How Do I Find Out What Syntax Highlighting is Supported?

Community Help
1

I wanted to include the text of some code from some url as a formatted block in a notebook, so I made this function to help. It produces a highlighted markdown code block just using the url of the source you want to include in a one-liner, such as

md`${await makeCodeBlockFromURL(‘https://my.url/code.js’, 4, ‘mytitle’)}`

The problem is that it only detects a very few languages from the file extension provided for the syntax highlighting. I don’t want to hard-code all of the extensions and have it break later, so if someone could point out which syntax highlighting style observable uses in the source code, then I could just parse that to make the function more usable for people.

3 Likes
2

Hi @anwarhahjjeffersonge,

We’re currently using highlight.js to perform syntax highlighting on code blocks within Markdown. This means that the 185 languages that Highlight.js supports, we support.

https://highlightjs.org/static/demo/

To create a block for a specific language, you wrap it in three backticks (which need to be escaped if you’re using them directly in a template literal) and the language name, like so:

md` Regular text

\`\`\`coffeescript
if student.excellentWork
    "A+"
  else if student.okayStuff
    if student.triedHard then "B" else "B-"
  else
    "C"
\`\`\`

More text
`

Regular text

if student.excellentWork
    "A+"
  else if student.okayStuff
    if student.triedHard then "B" else "B-"
  else
    "C"

More text

2 Likes
3

Thank you. I’ve got it working to where it produces all that markdown output from a source code url, so I can do my one-liner and guarantee that it will generate a corresponding block of markdown that shows up formatted in the notebook for a few languages whose extensions I hard coded in. The problem now seems to be that highlight.js doesn’t know about file extensions, only “aliases,” which is I guess not a problem for ObservableHQ. Thanks.

4

three tilde work too (and don’t need escaping)

~~~coffeescript
if student.excellentWork
    "A+"
  else if student.okayStuff
    if student.triedHard then "B" else "B-"
  else
    "C"
~~~
5 Likes
5

Just checked out your notebook because I was curious how you solved this - I like how compact it is! I don’t think I would have thought of making the key of the look-up dictionary itself match the code type name.

Where were you a decade ago when I just learned how to use MD?