Prism.js syntax highighting not working

Question

I'm using Docsify to serve documentation about my project. For the syntax highlighting I want to use prism.js. Sadly, the highlighting part does not work. I've also tried all the suggestions mentioned here.

In my index.html I have <script src="//unpkg.com/prismjs/components/prism-ruby.js"></script> included, as docsify mentioned here. And in my file.md where I want to show some Ruby code:

<pre><code class="language-ruby">
  def hello(name)
    p "Hello #{name}"
  end
</code></pre>

But the Ruby code is not being highlighted.

HTML being rendered:

<pre><code class="language-ruby">
  def hello(name)
    p "Hello #{name}"
  end
</code></pre>

What am I missing here?

Answer 1

try calling Prism.highlightAll() manually

<script defer src="./docsify.min.js"></script>
<script defer src="./prism.js"></script>
<script defer lang="javascript">
   window.$docsify = {
      // call Prism.highlightAll() in vue hook
      plugins: [
         function (hook, vm) {
            hook.doneEach(function (html) {
               Prism.highlightAll()
               console.log('mounted,', Prism, Prism.languages.flow)
            })

         }
      ]
   }
</script>

Answer 2

After some testing it seems for some reason docsify won't ask Prism to highlight when tags are placed by hand.

If there is nothing preventing you from using the standard markdown syntax you should prefer it:

```ruby
def hello(name)
    p "Hello #{name}"
end
```