Syntax highlighting for fenced code blocks #185

New Issue

norrist · 2024-04-04T19:42:14Z

norrist commented

2024-04-04 19:42:14 +00:00

https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks#syntax-highlighting

Is it possible to preserve the language for fenced code blocks so the show notes would have syntax highlighting

```python

import time
print(time.now())

https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks#syntax-highlighting Is it possible to preserve the language for fenced code blocks so the show notes would have syntax highlighting ```md ```python import time print(time.now()) ```

davmo commented

2024-04-11 13:41:22 +00:00

This is a nice feature, however it is implemented (or was last time I looked) by lots of  and <div> tags. When the show arrives on the Internet Archive (IA) these are all stripped out.

In short, I disabled this feature because at the time the IA stripped all but the most basic HTML. I'd be happy to review it; the IA code is changed silently over time, so this might no longer be the case.

This is a nice feature, however it is implemented (or was last time I looked) by lots of `` and `<div>` tags. When the show arrives on the Internet Archive (IA) these are all stripped out. In short, I disabled this feature because at the time the IA stripped all but the most basic HTML. I'd be happy to review it; the IA code is changed silently over time, so this might no longer be the case.

gordons commented

2025-11-28 03:48:08 +00:00

There are 2 ways that I know how to show syntax highlighting.
JavaScript reads the code block and wraps tokens in SPANS with classes, or wraps them in , , ,  etc, which have special styles because they are in a classed <pre> block.
The newish way is to use the custom highlighting API. So instead of splitting into tokens the JavaScript just need to know the character positions to set Ranges of text that get a highlight name that then is associated to a style. See https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API

There are 2 ways that I know how to show syntax highlighting. JavaScript reads the code block and wraps _tokens_ in SPANS with classes, or wraps them in `, , , ` etc, which have special styles because they are in a classed `<pre>` block. The _newish_ way is to use the custom highlighting API. So instead of splitting into _tokens_ the JavaScript just need to know the character positions to set Ranges of text that get a highlight **name** that then is associated to a style. See https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API

Sign in to join this conversation.

3 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: HPR/hpr_generator#185