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:
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:
As soon as the syntax highlighter comes in place, it’s hard to do this. With PrismJS the code would look like:
To combine PrismJS and our underlining of the term
alert
, the result needs to look like:The syntax highlighter feature needs to translate offsets from before to after syntax highlighting.