Skip to content

Commit

Permalink
Added support for highlighted text and footnotes
Browse files Browse the repository at this point in the history
  • Loading branch information
Ole Eskild Steensen committed Mar 10, 2022
1 parent 6998e7a commit 2e94321
Show file tree
Hide file tree
Showing 4 changed files with 91 additions and 67 deletions.
133 changes: 71 additions & 62 deletions .eleventy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,76 +5,78 @@ const matter = require('gray-matter')
module.exports = function(eleventyConfig) {

let markdownLib = markdownIt({
breaks: true,
html: true
}).use(function(md) {
//https://github.com/DCsunset/markdown-it-mermaid-plugin
const origFenceRule = md.renderer.rules.fence || function(tokens, idx, options, env, self) {
return self.renderToken(tokens, idx, options, env, self);
};
md.renderer.rules.fence = (tokens, idx, options, env, slf) => {
const token = tokens[idx];
if (token.info === 'mermaid') {
const code = token.content.trim();
return `<pre class="mermaid">${code}</pre>`;
}
if (token.info === 'transclusion') {
const code = token.content.trim();
return `<div class="transclusion">${md.render(code)}</div>`;
}
if (token.info.startsWith("ad-")) {
const code = token.content.trim();
return `<pre class="language-${token.info}">${md.render(code)}</pre>`;
}

// Other languages
return origFenceRule(tokens, idx, options, env, slf);
};


breaks: true,
html: true
})
.use(require("markdown-it-footnote"))
.use(function(md) {
//https://github.com/DCsunset/markdown-it-mermaid-plugin
const origFenceRule = md.renderer.rules.fence || function(tokens, idx, options, env, self) {
return self.renderToken(tokens, idx, options, env, self);
};
md.renderer.rules.fence = (tokens, idx, options, env, slf) => {
const token = tokens[idx];
if (token.info === 'mermaid') {
const code = token.content.trim();
return `<pre class="mermaid">${code}</pre>`;
}
if (token.info === 'transclusion') {
const code = token.content.trim();
return `<div class="transclusion">${md.render(code)}</div>`;
}
if (token.info.startsWith("ad-")) {
const code = token.content.trim();
return `<pre class="language-${token.info}">${md.render(code)}</pre>`;
}

const defaultImageRule = md.renderer.rules.image || function(tokens, idx, options, env, self) {
return self.renderToken(tokens, idx, options, env, self);
};
md.renderer.rules.image = (tokens, idx, options, env, self) => {
const imageName = tokens[idx].content;
const [fileName, width] = imageName.split("|");
if (width) {
const widthIndex = tokens[idx].attrIndex('width');
const widthAttr = `${width}px`;
if (widthIndex < 0) {
tokens[idx].attrPush(['width', widthAttr]);
} else {
tokens[idx].attrs[widthIndex][1] = widthAttr;
// Other languages
return origFenceRule(tokens, idx, options, env, slf);
};



const defaultImageRule = md.renderer.rules.image || function(tokens, idx, options, env, self) {
return self.renderToken(tokens, idx, options, env, self);
};
md.renderer.rules.image = (tokens, idx, options, env, self) => {
const imageName = tokens[idx].content;
const [fileName, width] = imageName.split("|");
if (width) {
const widthIndex = tokens[idx].attrIndex('width');
const widthAttr = `${width}px`;
if (widthIndex < 0) {
tokens[idx].attrPush(['width', widthAttr]);
} else {
tokens[idx].attrs[widthIndex][1] = widthAttr;
}
}
}

return defaultImageRule(tokens, idx, options, env, self);
};
return defaultImageRule(tokens, idx, options, env, self);
};


const defaultLinkRule = md.renderer.rules.link_open || function(tokens, idx, options, env, self) {
return self.renderToken(tokens, idx, options, env, self);
};
md.renderer.rules.link_open = function(tokens, idx, options, env, self) {
const aIndex = tokens[idx].attrIndex('target');
const classIndex = tokens[idx].attrIndex('class');
const defaultLinkRule = md.renderer.rules.link_open || function(tokens, idx, options, env, self) {
return self.renderToken(tokens, idx, options, env, self);
};
md.renderer.rules.link_open = function(tokens, idx, options, env, self) {
const aIndex = tokens[idx].attrIndex('target');
const classIndex = tokens[idx].attrIndex('class');

if (aIndex < 0) {
tokens[idx].attrPush(['target', '_blank']);
} else {
tokens[idx].attrs[aIndex][1] = '_blank';
}
if (aIndex < 0) {
tokens[idx].attrPush(['target', '_blank']);
} else {
tokens[idx].attrs[aIndex][1] = '_blank';
}

if (classIndex < 0) {
tokens[idx].attrPush(['class', 'external-link']);
} else {
tokens[idx].attrs[classIndex][1] = 'external-link';
}
if (classIndex < 0) {
tokens[idx].attrPush(['class', 'external-link']);
} else {
tokens[idx].attrs[classIndex][1] = 'external-link';
}

return defaultLinkRule(tokens, idx, options, env, self);
};
});
return defaultLinkRule(tokens, idx, options, env, self);
};
});

eleventyConfig.setLibrary("md", markdownLib);

Expand All @@ -99,6 +101,13 @@ module.exports = function(eleventyConfig) {
});
})

eleventyConfig.addTransform('highlight', function(str) {
//replace ==random text== with <mark>random text</mark>
return str && str.replace(/\=\=(.*?)\=\=/g, function(match, p1) {
return `<mark>${p1}</mark>`;
});
});

return {
dir: {
input: "src/site",
Expand Down
13 changes: 12 additions & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 3 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
"@sindresorhus/slugify": "^1.1.0",
"dotenv": "^10.0.0",
"gray-matter": "^4.0.3",
"markdown-it": "^12.3.2"
"markdown-it": "^12.3.2",
"markdown-it-footnote": "^3.0.3"
}
}
}
7 changes: 5 additions & 2 deletions src/site/_includes/components/pageheader.njk
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
<script>
mermaid.initialize({startOnLoad: true});
mermaid.initialize({
startOnLoad: true,
theme: "forest"
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js" integrity="sha512-hpZ5pDCF2bRCweL5WoA0/N1elet1KYL5mx3LP555Eg/0ZguaHawxNvEjF6O3rufAChs16HVNhEc6blF/rZoowQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-sv0slik/5O0JIPdLBCR2A3XDg/1U3WuDEheZfI/DI5n8Yqc3h5kjrnr46FGBNiUAJF7rE4LHKwQ/SoSLRKAxEA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Expand All @@ -14,4 +17,4 @@

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">

0 comments on commit 2e94321

Please sign in to comment.