question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Providing a default language for fenced code blocks

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:2
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
andreas-mauschcommented, Aug 14, 2022

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.

1reaction
zachleatcommented, Jun 28, 2022

Just to be clear, I mean something like:

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

github_iconTop Results From Across the Web

Which is the proper language for fenced code blocks when ...
There's text for non-highlighted fenced blocks compliant with MD040. I'm not sure how much official in Markdown world that is but it is ......
Read more >
Fenced Code Blocks — Python-Markdown 3.4.1 documentation
The Fenced Code Blocks extension adds a secondary way to define code blocks ... While language is the default prefix, the prefix may...
Read more >
Highlighting of fenced code in markdown for known but non ...
An extension NL-language-support is created to describe the syntax. And there should be an extension markdown-NL to support it. But the markdown ...
Read more >
What language should I specify in this markdown fenced code ...
If I have to name a Vagrantfile I'd write "ruby", but what If I have to name a code block which includes only...
Read more >
Is there a way to set a default language for code blocks? - Reddit
I don't know about setting a default language, but it works if you type py after the backticks afaik. Not a lot of...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found