I cannot get a colored code with docsify?

Question

I am using docsify to build a documentation for my API. However when I insert code block (especially json) the code is written in black.

I don't know how to change it.

Any suggestion ?

Answer 1

Docsify uses Prism for syntax highlighting as explained in the Documentation.

To add support for a specific language you need to add the matching grammar file as so :

<!-- Loading Docsify -->
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<!-- Adding json syntax highlighting -->
<script src="//cdn.jsdelivr.net/npm/prismjs@1.22/components/prism-json.min.js"></script>

If you want to browse the list of grammar files available you can browse them here : PrismJS on Github

Answer 2

You must add the scripts after the docsify js script. If you add them before, you will see an error in the console that says Prism is not defined.

Add them like so:

<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.28/components/prism-bash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.28/components/prism-typescript.min.js"></script>

After that, you can highlight using your new language:

```bash
yarn add fast-data-engine
```

...and it will work as expected.