Highlight Inline Code Blocks

[andreas-mausch]

Hi, the default language works well for normal code blocks (triple ```).

However, for

`inline code`

the code is rendered as

<code>...</code>

instead of

<code class="language-default">...</code>

[jGleitz]

This plugin currently does not target inline code at all.

To clarify: Would you like to have just the defaultLanguage functionality for inline code? Or all the functionality?

[andreas-mausch]

This plugin currently does not target inline code at all.

Oops, thanks for pointing that out.

Would you like to have just the defaultLanguage functionality for inline code? Or all the functionality?

Best case all functionality. That would be great.
(I currently use a workaround for inline code mentioned in 11ty/eleventy-plugin-syntaxhighlight#38 (comment))

[jGleitz]

Alright. So let’s teach this plugin to optionally also target inline code ✔️.

[jGleitz]

@andreas-mausch highlighting inline code is implemented in #616. Can you please give feedback on it?

In particular, what’s your take on the syntax

`class Demo { };`{language=cpp}

to specify the language for inline code? I’d like to make sure the syntax makes sense & is usable before merging, as changing it afterwards would be a breaking change.

[andreas-mausch]

Hi, your change works great!
Only "issue": I didn't have to set the option highlightInlineCode explicitly. Seems like the value is ignored.

The default language was successfully set on the code tag. 👍

what’s your take on the syntax

I think it looks great. Easy to understand.
I'm just curious if that is compatible with https://github.com/arve0/markdown-it-attrs.
If yes, perfect.

For my personal requirements the default language should be good enough though.
Quick test with markdown-it-attrs (defaultLanguage is set to plain):

// Works:
`class Demo { };`{language=cpp}
// = <code class="language-cpp">

// Also works:
`class Demo { };`{data-myattr=value}
// = <code data-myattr="value" class="language-plain">

// This is not rendered as expected:
`class Demo { };`{language=cpp, data-myattr=value}
// Rendered: <code data-myattr="value" class="language-plain">
// Expected: <code data-myattr="value" class="language-cpp">

I wonder if the last case is really needed. I do not need it.
I use attrs to specify a filename on a code block with three backticks:

```js {data-filename=test.js}

but for inline code I don't need it.

Thank you very much for your effort.
If you accept donations, please let me know.

[jGleitz]

Thank you very much for your detailed feedback!

I didn't have to set the option highlightInlineCode explicitly.

Yep, that was an oversight. I fixed it & added a test case.

I think [the syntax] looks great. Easy to understand.

Great, so I’ll merge it that way.

I'm just curious if that is compatible with https://github.com/arve0/markdown-it-attrs.

I think it is, see below.

// This is not rendered as expected:

This renders exactly like I intended it to. My intention was to not introduce additional syntax to markdown-it, but rather freeload on the existing markdown-it-attrs syntax. This effectively makes language a special attribute for inline code to define the desired language. Hence, the language attribute works differently than normal with markdown-it-attrs. However, language is not a valid HTML attribute, so I figured nobody would mind.

Alternatively, I could have mandated the syntax

`class Demo { };\`{.language-cpp}

However, I find this awkward. First, it is less intuitive, and second, if the lang-prefix setting in markdownIt was changed, one would have to update all the language specifications.

If you accept donations, please let me know.

I don’t. But if you had the chance to give a little to UNHCR instead, that’d be a great reward for me!

[github-actions]

🎉 This issue has been resolved in version 2.3.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀