# External highlighters for code blocks

**URL:** <https://zola.discourse.group/t/external-highlighters-for-code-blocks/283>\
**Category:** Feature requests\
**Created:** [December 18, 2019, 7:05am UTC](https://zola.discourse.group/t/external-highlighters-for-code-blocks/283 "2019-12-18T07:05:49Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![remexre](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/remexre/32/15_2.png) [@remexre](https://zola.discourse.group/u/remexre)\
**Post date:** [December 18, 2019, 7:05am UTC](https://zola.discourse.group/t/external-highlighters-for-code-blocks/283/1 "2019-12-18T07:05:49Z")

</div>

Submitting the following concurrently with a draft PR, [https://github.com/getzola/zola/pull/883](https://github.com/getzola/zola/pull/883).

* * *

This is close enough to being a solution to #563 that I’d be fine with closing it if this were to be merged. I would also consider this to be a reasonable temporary solution for #878 (though I do think that in the long term, `tree-sitter` would be preferable to `syntect`). This provides GraphViz support easily (ref [https://zola.discourse.group/t/269](https://zola.discourse.group/t/269)), and should provide PlantUML support too (though I haven’t used that tool, so I can’t say for certain).

I’d like to be able to get this working with LaTeX with all the proper fallbacks, so MathML falls back to MathJax falls back to a static image. Unfortunately, the static image bit proves to be the problem – see below / the commit message.

* * *

This feature is activated by specifying shell commands in config.toml.  
For example, an external “highlighter” that renders GraphViz to SVG  
could be defined as:

```
# ...
[external_highlighters]
dot = "echo -n '<p>'; dot -Tsvg; echo '</p>'"
# ...

```

A code block like:

````
```dot
digraph G {
A -> B;
B -> C;
A -> C;
}
```

````

then results in the HTML output by piping the contents of the code block  
to the command specified as external\_highlighters.dot.

The following environment variables are passed to external highlighter  
commands:

- `ZOLA_BASE_URL`: The base URL in the config
- `ZOLA_CURRENT_PAGE`: The permalink URL to the current page
- `ZOLA_OUTPUT_DIR`: The directory being output to

The last one would be more useful if the output directory weren’t  
cleared before the content is translated from Markdown (ref  
**new user, max 2 links, see github** ). This would be particularly useful  
for e.g. generating images from LaTeX, and replacing the code blocks  
with `<img>` tags.

---

<div class="post-metadata">

**Author:** ![keats](https://avatars.discourse-cdn.com/v4/letter/k/34f0e0/32.png) [@keats](https://zola.discourse.group/u/keats)\
**Post date:** [December 22, 2019, 11:56am UTC](https://zola.discourse.group/t/external-highlighters-for-code-blocks/283/2 "2019-12-22T11:56:55Z")

</div>

There are many highlighting improvements that I would like to add to Zola: line numbers and selection highlight are the main two. This external highlighter approach seems like it could be confusing once we add those.  
What about having a shortcode to run a command based on some body rather than overloading the syntax highlighting?

---

<div class="post-metadata">

**Author:** ![remexre](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/remexre/32/15_2.png) [@remexre](https://zola.discourse.group/u/remexre)\
**Post date:** [December 22, 2019, 8:04pm UTC](https://zola.discourse.group/t/external-highlighters-for-code-blocks/283/3 "2019-12-22T20:04:37Z")

</div>

Big advantage for me of overloading highlighting is that I get highlighting for the appropriate language in my editor.