4

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. enter image description here

HTML being rendered: 

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

What am I missing here?

Sean Kearon
  • 10,987
  • 13
  • 77
  • 93
Kevin Etore
  • 1,046
  • 3
  • 14
  • 32

2 Answers2

5

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>
Curtis Chang
  • 141
  • 2
  • 4
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
```
Demian Vnh
  • 76
  • 7