Add processing of inline code in Markdown

[sashaqred]

Hi,

Recently I've tried writing some code with 11ty in markdown and faced with something unexpectable. With block code, everything works fine. But inline code is not.

This code

will be transformed into this:

Seems like inline code isn't processed at all. On block code result there are bunch of extra classes but on inline none of them.

As temporal fix I'm using HTML in markdown (<code class="language-">Some inline code with custom wrap</code>).

Is this a bug or my misconfiguration?

[lautarodragan]

I'm interested in this too. Haven't found a way to process inline code blocks yet.

[sashaqred]

@lautarodragan, I think it is possible to automate only with a custom instance of markdownIt.

I use that function:
https://github.com/sashaqred/sashaqred/blob/d165371710e059e01c6103405d8e998e4c5c938e/src/_markdown-it/index.js#L9-L12

[lautarodragan]

Thanks @sashaqred !! That worked 😄

[markmichon]

To build on @sashaqred's example in case anyone else runs into it, markdownit's default inline rule escapes the HTML, so if you don't also do so you may run into issues when using things like < in your inline-code blocks. Here's a modification using markdown-it's escapeHtml library.

// setup

const markdownIt = require("markdown-it");
const mdSetup = markdownIt({ html: true})

// The important part below. Replace mdSetup with your instance of markdownit,
// and replace attributes and classes as needed.

mdSetup.renderer.rules.code_inline = (tokens, idx, { langPrefix = "" }) => {
  const token = tokens[idx];
  return `<code class="${langPrefix}">${mdSetup.utils.escapeHtml(token.content)}</code>`;
};

[sashaqred]

@markmichon, good catch!

Recently I've faced such an issue. Your comment saved some time for me 😅

[Dinhero21]

I used markdown-it with markdown-it-highlightjs with this style. It looks a bit weird because it will guess the language when inline but you can just turn off auto.