Use highlight.js with code fences?

support
1

I’m trying to use highlight.js to highlight some powershell code using markdown code fences. I’m having trouble getting highlight.js to recognize it (ironically discourse seems to recognize it). For example:

```powershell
echo "Profile loaded from $profile"
```

If I do it the long way then it works:

<pre><code class="powershell">
echo "Profile loaded from $profile"
</code></pre>

I think this is happening because the generated code block has the wrong class <pre><code class="language-powershell"> so I’m not sure what I’m doing wrong.

Can I use code fencing and highlight.js?

2

You shouldn’t have a problem using highlight.js with the fenced code blocks created by BlackFriday, although if you’re having an issue with the markdown renderer, I would recommend posting an issue on BlackFriday’s repo on GitHub. As far as the difference in classes, have you checked to see whether the classes are modified on the client by highlight.js itself? Just a thought. Otherwise, I would need to see more code and any errors you might be getting in the browser console. Keep in mind that you’ll also need to import/use the highlight.js css as well…

3

Do you have an example that we can look at? It’s tough to tell what is happening from what you said because it’s working fine on my site e.g.

My sites source is available to look at here:

You can compare what I’m doing to what you are doing to see if something is different.

4

Ok turns out code fences and highlight.js work fine. My problem was that powershell is NOT one of the 22 default languages that Highlight.js supports:

  • Apache
  • Bash
  • C#
  • C++
  • CSS
  • CoffeeScript
  • Diff
  • HTML, XML
  • HTTP
  • Ini
  • JSON
  • Java
  • JavaScript
  • Makefile
  • Markdown
  • Nginx
  • Objective-C
  • PHP
  • Perl
  • Python
  • Ruby
  • SQL

If the language you’re trying to highlight is not one of the defaults above, you must create your own highlight.js package instead of using the CDN.

5

I’m personally a fan of prism.js as well. You can add Powershell from the site’s download. I went with prism because of the additional plugins, especially line numbers. FWIW.

6

As of version 9.12.0 hljs supports 197 languages and 12 styles, including powershell.

7

Right.

A) This thread is quite old
B) The OP is referencing the default packages

1 Like