Providing a default language for fenced code blocks

[mattrossman]

Use case

In many markdown editors, I can write a fenced code blog and receive plaintext code styling without specifying a language.

E.g. writing this in GitHub markdown:

```
This is some plain text
```

Looks like this:

This is some plain text

Currently, when no language is specified on a fenced code block, this plugin outputs plain <pre> and <code> tags without a "language-*" class applied. In many Prism themes, such as the prism-okaidia theme shown in the plugin docs, this means the code block will not receive any styling. This is unexpected behavior for me.

Proposed Solution

To avoid breaking changes, I propose adding a defaultLanguage plugin option, which users may want to set to "plain". That way a generic code block like this:

```
This is some plain text
```

could be rendered as

<pre class="language-plain"><code class="language-plain">
This is some plain text
</code></pre>

Additional Context

Initially I thought I could set default languages like so:

eleventyConfig.addPlugin(pluginSyntaxHighlight, {
    preAttributes: {
      class: "language-plain",
    },
    codeAttributes: {
      class: "language-plain",
    },
});

However, as brought up in #52 this does not work. Resolving that issue could also resolve this one.

[AleksandrHovhannisyan]

Big +1 from me on this; it's mainly why I switched to prism in the meantime.

[zachleat]

Hmm—#52 is shipping with 4.1.0. Is this one still necessary?

docs are in the advanced options details on https://www.11ty.dev/docs/plugins/syntaxhighlight/#installation

[AleksandrHovhannisyan]

Oh, maybe not! It sounds like this should be possible with the init option. I can give this a shot later and report back.

[zachleat]

Just to be clear, I mean something like:

eleventyConfig.addPlugin(pluginSyntaxHighlight, {
    preAttributes: {
      class: ({language}) => `language-${language || "plain"}`,
    },
});

[AleksandrHovhannisyan]

Oh, yup, that should work! Thanks.

[zachleat]

Closing this one as fixed by #52 and #50 thanks y’all

[andreas-mausch]

Code blocks without language are still rendered without a language, even with this:

eleventyConfig.addPlugin(pluginSyntaxHighlight, {
    preAttributes: {
      class: ({language}) => `language-${language || "text"}`,
    },
});

Am I doing something wrong? I suspect the lib returns here already: https://github.com/11ty/eleventy-plugin-syntaxhighlight/blob/7b7b547fff07f2e60d91c0a7ed3bba1938dbc057/src/markdownSyntaxHighlightOptions.js#L8-L11

and my preAttributes-class-function is never called.

The function is called on code blocks with a language specified though.

For convenience, I'd even prefer the defaultLanguage option as suggested by @mattrossman

Edit: I "solved" this problem for myself by using https://github.com/jGleitz/markdown-it-prism instead of this plugin. It supports specifying a defaultLanguage, and I already had a custom markdown-it configuration, so the integration worked easy for me. I'd prefer to use your plugin, but this is an important feature to me.

[edwardhorsford]

I see the same as @andreas-mausch - code blocks with languages already defined get the pre-attributes, but those with no languages defined get nothing.

[Nekkowe]

Yeah, same here. @zachleat In light of this, if possible, could you please reopen this issue?

In the meantime, my personal workaround (short of switching over to Prism) is using the :has() selector in my CSS, like so:

pre:not([class*="language-"]):has(code) {
  // CSS equivalent to <pre> tag styled by language-plain here
}