WikiText HighligthJS brush support outside of TW

#1

Hi all,

I testing support for WikiText syntax highlighting in non TW web sites. For that I packaged the HightlightJS brush from TW as a tw-wikitext.min.js file and added the following lines to my HTML template:

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
    <!-- The following HighlightJS brush was adapted thanks to:
      * https://tw-wikitext-brush.tiddlyhost.com/#WikiText%20Brush
      * https://talk.tiddlywiki.org/t/tiddlywiki-syntax-highlighting/6386/12 
    -->
    <script src="https://mutabit.com/repos.fossil/cardumem/doc/tip/wiki/_makina/tw-wikitext.min.js"></script>
	<script>hljs.initHighlightingOnLoad();</script>

The result is kind of fine, as you can see here:

image
image951Ă—728 69.2 KB

But they it doesn’t look like the same code with the TW brush inside TW:

image
image967Ă—600 61.3 KB

Particularly I don’t have distinctive colors for links addresses and their text, as you compare in the two provided screenshots. It this related to the use of some CSS or what I’m missing?

Thanks, as a reluctant “web tinkerer” any help is greatly appreciated.

#2

The first screenshot uses the default css theme, which don’t have much colors. You should change the link of the stylesheet, like https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/monokai.min.css.

1 Like