Added support for highlighted text and footnotes

This commit is contained in:
Ole Eskild Steensen 2022-03-10 13:59:21 +01:00
parent 6998e7af13
commit 2e9432181e
4 changed files with 92 additions and 68 deletions

View File

@ -5,76 +5,78 @@ const matter = require('gray-matter')
module.exports = function(eleventyConfig) { module.exports = function(eleventyConfig) {
let markdownLib = markdownIt({ let markdownLib = markdownIt({
breaks: true, breaks: true,
html: true html: true
}).use(function(md) { })
//https://github.com/DCsunset/markdown-it-mermaid-plugin .use(require("markdown-it-footnote"))
const origFenceRule = md.renderer.rules.fence || function(tokens, idx, options, env, self) { .use(function(md) {
return self.renderToken(tokens, idx, options, env, self); //https://github.com/DCsunset/markdown-it-mermaid-plugin
}; const origFenceRule = md.renderer.rules.fence || function(tokens, idx, options, env, self) {
md.renderer.rules.fence = (tokens, idx, options, env, slf) => { return self.renderToken(tokens, idx, options, env, self);
const token = tokens[idx]; };
if (token.info === 'mermaid') { md.renderer.rules.fence = (tokens, idx, options, env, slf) => {
const code = token.content.trim(); const token = tokens[idx];
return `<pre class="mermaid">${code}</pre>`; if (token.info === 'mermaid') {
} const code = token.content.trim();
if (token.info === 'transclusion') { return `<pre class="mermaid">${code}</pre>`;
const code = token.content.trim(); }
return `<div class="transclusion">${md.render(code)}</div>`; if (token.info === 'transclusion') {
} const code = token.content.trim();
if (token.info.startsWith("ad-")) { return `<div class="transclusion">${md.render(code)}</div>`;
const code = token.content.trim(); }
return `<pre class="language-${token.info}">${md.render(code)}</pre>`; 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);
};
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); // Other languages
}; return origFenceRule(tokens, idx, options, env, slf);
};
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) { const defaultImageRule = md.renderer.rules.image || function(tokens, idx, options, env, self) {
tokens[idx].attrPush(['target', '_blank']); return self.renderToken(tokens, idx, options, env, self);
} else { };
tokens[idx].attrs[aIndex][1] = '_blank'; 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;
}
}
if (classIndex < 0) { return defaultImageRule(tokens, idx, options, env, self);
tokens[idx].attrPush(['class', 'external-link']); };
} else {
tokens[idx].attrs[classIndex][1] = 'external-link';
}
return defaultLinkRule(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');
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';
}
return defaultLinkRule(tokens, idx, options, env, self);
};
});
eleventyConfig.setLibrary("md", markdownLib); eleventyConfig.setLibrary("md", markdownLib);
@ -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 { return {
dir: { dir: {
input: "src/site", input: "src/site",

13
package-lock.json generated
View File

@ -14,7 +14,8 @@
"@sindresorhus/slugify": "^1.1.0", "@sindresorhus/slugify": "^1.1.0",
"dotenv": "^10.0.0", "dotenv": "^10.0.0",
"gray-matter": "^4.0.3", "gray-matter": "^4.0.3",
"markdown-it": "^12.3.2" "markdown-it": "^12.3.2",
"markdown-it-footnote": "^3.0.3"
}, },
"devDependencies": { "devDependencies": {
"@11ty/eleventy": "^1.0.0", "@11ty/eleventy": "^1.0.0",
@ -2628,6 +2629,11 @@
"markdown-it": "bin/markdown-it.js" "markdown-it": "bin/markdown-it.js"
} }
}, },
"node_modules/markdown-it-footnote": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/markdown-it-footnote/-/markdown-it-footnote-3.0.3.tgz",
"integrity": "sha512-YZMSuCGVZAjzKMn+xqIco9d1cLGxbELHZ9do/TSYVzraooV8ypsppKNmUJ0fVH5ljkCInQAtFpm8Rb3eXSrt5w=="
},
"node_modules/markdown-it/node_modules/argparse": { "node_modules/markdown-it/node_modules/argparse": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@ -6910,6 +6916,11 @@
} }
} }
}, },
"markdown-it-footnote": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/markdown-it-footnote/-/markdown-it-footnote-3.0.3.tgz",
"integrity": "sha512-YZMSuCGVZAjzKMn+xqIco9d1cLGxbELHZ9do/TSYVzraooV8ypsppKNmUJ0fVH5ljkCInQAtFpm8Rb3eXSrt5w=="
},
"maximatch": { "maximatch": {
"version": "0.1.0", "version": "0.1.0",
"resolved": "https://registry.npmjs.org/maximatch/-/maximatch-0.1.0.tgz", "resolved": "https://registry.npmjs.org/maximatch/-/maximatch-0.1.0.tgz",

View File

@ -26,6 +26,7 @@
"@sindresorhus/slugify": "^1.1.0", "@sindresorhus/slugify": "^1.1.0",
"dotenv": "^10.0.0", "dotenv": "^10.0.0",
"gray-matter": "^4.0.3", "gray-matter": "^4.0.3",
"markdown-it": "^12.3.2" "markdown-it": "^12.3.2",
"markdown-it-footnote": "^3.0.3"
} }
} }

View File

@ -1,6 +1,9 @@
<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script> <script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
<script> <script>
mermaid.initialize({startOnLoad: true}); mermaid.initialize({
startOnLoad: true,
theme: "forest"
});
</script> </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/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> <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>