Highlight lines without specifying a language

[talatkuyuk]

When I write down a code block without specifying any language but put line numbers for highlighting like below:

```{2}

it is interpreted as the language is language-{2}.

I know the documentation says that :

Note: This will wrongly assign a language class and the class might appear as language-{1,3} or language-showLineNumbers, but allow the language highlighting and line number function to work. An possible approach would be to add a placeholder like unknown so the div will have class="language-unknown"

I see in the playground that the above code produces the below AST (the rest is omitted)

{
  "type": "code",
  "lang": "{2}",
  "meta": null,
}

Is it possible to put a logic in the plugin like below as a pseudo code:

• Check if the lang starts with "{"
  • if the meta is null then copy the content of the lang into the meta and make the lang is "unknown" or null,
  • if the meta is not null then prepend the lang into the meta and make the lang again "unknown" or null,

Here is two AST examples before and after :

// ```{2}

// before
{
  "type": "code",
  "lang": "{2}",
  "meta": null,
}

// after
{
  "type": "code",
  "lang": "unknown", // or null, I could not figure out which is better
  "meta": "{2}",
}

// ```{2} showLineNumbers

// before
{
  "type": "code",
  "lang": "{2}",
  "meta":"showLineNumbers,
}

// after
{
  "type": "code",
  "lang": "unknown", // or null, I could not figure out which is better
  "meta": "{2} showLineNumbers",
}

Then maybe we can highlight any line without specifying any language or without the text unknown as a dummy language.

[talatkuyuk]

I created a new npm package remark-flexible-code-titles to add title element or container element or both for the code nodes in markdown.

It supports to use the rehype-prism-plus line highlighting and numbering features without specifying any language.

For example, you can write markdown code blocks like follows:

```:title
lines...
```

```{ 1, 3 - 6 }
lines...
```

```showLineNumbers
lines...
```

```:title {2}
lines...
```

```:title showLineNumbers
lines...
```

It has options for not adding title or container or for not adding both, just for usage of rehype-prism-plus without specifying language. For more explanation, you can have a look at the documentation here

[magoz]

Great work @talatkuyuk! Was looking for a solution with support for not explicit language. I'll definitely give it a try.

[timlrx]

@talatkuyuk sorry for the late reply, but congrats on publishing a workaround that support titles as well. The current approach tries to follow GFM syntax, namely:

The first word of the info string is typically used to specify the language of the code sample, and rendered in the class attribute of the code tag. However, this spec does not mandate any particular treatment of the info string.

So my preference would be to still reserve the first word for the language and go with the dummy language approach:

```unknown {1}
<Component/>
```

where unknown (or code or null) can be just a placeholder language and ignoreMissing set to true.

[talatkuyuk]

Thanks for yor reply @timlrx,

Those who want to go with a dummy language, I am planning to set another option in the remark-flexible-code-titles in order to choose the dummy language string, and the plugin will assign the option (handleMissingLanguageAs) into node.lang instead of null. So, the remark-flexible-code-titles will ensure that the dummy language will be rendered in the class attribute of the code tag.

import remarkCodeTitles from "remark-flexible-code-titles";
...
.use(remarkCodeTitles, {
  handleMissingLanguageAs: "unknown", // "dummy" what so ever
})

And the user will be able to continue the markdown code block without language, or without dummy language. Of course it is a preference if a user write down explicitly the language as "unknown" for the code blocks, but the remark-flexible-code-titles is going to handle it in near future, for those who want.

[talatkuyuk]

I added an option in the remark-flexible-code-titles in order to choose the dummy language string, and the plugin assigns the option (handleMissingLanguageAs) as language instead of null, as I explained above comment.

So, the remark-flexible-code-titles ensures that the dummy language is rendered in the class attribute of the code tag.

https://github.com/ipikuka/remark-flexible-code-titles/releases/tag/v1.1.3