hagenburger / pimd

PIMD – Processing Instructions for Markdown
https://hagenburger.github.io/pimd-docs/
MIT License
20 stars 5 forks source link

Syntax highlighting #18

Closed hagenburger closed 5 years ago

hagenburger commented 6 years ago

New feature

Allow syntax highlighting in code blocks with different highlighters (PrismJS by default). Additional features in the code examples must be possible. Those additional features could be manipulating the visual output of the code block to make it more useful by for example highlighting or removing parts of it without breaking the preview.

Specifications

The language is given by the first argument of a code block:

``` html
<p>Test</p>

This can also be written as file name. In this case the file suffix is used as a language:

```` markdown
``` test.js
alert('test')

## Additional features

Let’s assume we have the following code block:

```` markdown
``` javascript
alert('test')

And we want to underline `alert` for some reason. We would have to insert an opening `<u>` at offset `0` and a closing `</u>` at offset `5`:

``` html
<u>alert</u>('test')

As soon as the syntax highlighter comes in place, it’s hard to do this. With PrismJS the code would look like:

<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span>

To combine PrismJS and our underlining of the term alert, the result needs to look like:

<span class="token function"><u>alert</u></span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span>

The syntax highlighter feature needs to translate offsets from before to after syntax highlighting.

violetadev commented 6 years ago

#18 Syntax highlighting