Different Markdown options based on content language? #2891
-
|
In a multilingual Eleventy website, it it possible to specify different Markdown options for each (or a particular) content language? Here’s a use case: Suppose that we have a website in two languages — English and Urdu. Both languages contain content written in Markdown. Because Urdu is an RTL language, its smart/curly quotes are opposite of what are used in English:
|
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 8 replies
-
|
@saadatm I don't think you can have multiple Markdown engines, but you could create 1+ shortcodes which parses a Markdown block with the smart quotes of your choice: // eleventy.config.js (Eleventy v2)
const markdownIt = require("markdown-it");
/**
* @param {import("@11ty/eleventy/src/UserConfig")} eleventyConfig
* @returns {ReturnType<import("@11ty/eleventy/src/defaultConfig")>}
*/
module.exports = function (eleventyConfig) {
// general/shared markdown-it config options.
const mdOptions = {
html: true,
breaks: true,
linkify: true,
typographer: true,
};
// override quotes per language/locale.
const mdEngines = {
english: markdownIt({ ...mdOptions, quotes: '“”‘’' }),
german: markdownIt({ ...mdOptions, quotes: '„“‚‘' }),
urdu: markdownIt({ ...mdOptions, quotes: '”“’‘' }),
};
// set default markdown library to use English quotes/config.
eleventyConfig.setLibrary("md", mdEngines.english);
// paired shortcode to convert markdown to HTML using the specified markdown engine language.
eleventyConfig.addPairedShortcode("markdown", function (content, language="english") {
// throw hard Error on unknown language.
if (!(language in mdEngines)) {
throw new Error(`Unknown markdown engine language: "${language}". Expected one of: ${JSON.stringify(Object.keys(mdEngines))}`);
}
const engine = mdEngines[language];
const html = engine.render(content).trim();
return `
<div data-language="${language}">${html}</div>
`.trim();
});
return {
dir: {
input: "src",
output: "www",
}
};
};---
# src/index.liquid
title: This is a "fancy" title!
author: Brian O'Malley
---
{% markdown "german" -%}
# {{ title }}
{{ author }}
{% endmarkdown -%}
{% markdown "urdu" -%}
# {{ title }}
{{ author }}
{% endmarkdown -%}OUTPUT<div data-language="german">
<h1>This is a „fancy“ title!</h1>
<p>Brian O’Malley</p>
</div>
<div data-language="urdu">
<h1>This is a ”fancy“ title!</h1>
<p>Brian O’Malley</p>
</div>I imagine you could change the language names to codes/locales if that works better for you, with the general caveats of it might get slightly trickier if you're using hyphens in names instead of underscores since "en-US" style codes aren't valid JavaScript variable names, so you'd have to use |
Beta Was this translation helpful? Give feedback.
-
|
Hmm. I guess I'll always need to wrap Urdu posts/pages in such a shortcode, then. Thanks for the code and your help, @pdehaan. 🙏 |
Beta Was this translation helpful? Give feedback.
-
|
Alternatively you could use the This should allow you to set the desired typographic symbols using CSS (if the browser doesn’t do so for you automatically based on your |
Beta Was this translation helpful? Give feedback.
-
|
Great idea @darthmall! I did a quick test locally and it seems to work perfectly (if you set your <html lang="de"><head></head><body>
<main>Here is some <q>Quoted?</q> text. So fancy!</main>
</body></html> |
Beta Was this translation helpful? Give feedback.
-
|
One thing I should've mentioned is that this element is intended only for quotations of other sources. So it wouldn't be appropriate if you were doing something like defining a term—e.g. “the definition of ‘sesquipedalian’ is…” |
Beta Was this translation helpful? Give feedback.
-
|
@darthmall Aha, yes! This will work beautifully for quotes. However, having multiple |
Beta Was this translation helpful? Give feedback.
-
|
Maybe you could create a wrapper around markdown-it and provide your wrapper to Eleventy? const markdownIt = require("markdown-it");
module.exports = function (eleventyConfig) {
const libEnglish = markdownIt({ html: true });
const libUrdu = markdownIt({ html: false });
eleventyConfig.setLibrary("md", {
...libEnglish,
render: (content, ctx) => {
const lib = ctx.lang === "urdu" ? libUrdu : libEnglish;
return lib.render(content, ctx);
},
});
};The |
Beta Was this translation helpful? Give feedback.
-
|
Great solution, @rothsandro! |
Beta Was this translation helpful? Give feedback.
-
|
Wonderful! This is working great, @rothsandro! Thank you so much. 🙏 |
Beta Was this translation helpful? Give feedback.
Maybe you could create a wrapper around markdown-it and provide your wrapper to Eleventy?
The
ctxvariable gives you access to front matter data and other props like inputPath that you can use to determine the language. Beside therenderproperty there are one or two other props that Eleventy uses (as far …