Bludit and syntax highlighting

Author Christian Reading time 3 minutes
Bludit and syntax highlighting

Photo by Pixabay: https://www.pexels.com/photo/computer-c-code-276452/

Bludit offers syntax highlighting via TinyMCE and it's codesample plugin, which you have to enable in the TinyMCE plugin settings first. But it offers only limited support. No Bash, no Puppet, no Perl and so on. Also I wanted line numbering when in code blocks for easier orientation. This is also not included.

The Prism.js library however offers support for many more languages and also some nice Plugins. For example for line-numbering.

To make everything work, the following tasks are necessary:

  1. Download & install the Bludit-Prism Plugin from here: https://plugins.bludit.com/plugin/prism
  2. Replace prism.js and prism.css files included in this Plugin with newer ones from https://prismjs.com/
    • As the one included in the Bludit Prism-Plugin only has support for: HTML/XML, JavaScript, CSS, PHP, Ruby, Python, Java, C, C#, C++
  3. Add our new languages to the codesamples config in the TinyMCE plugin config. This will add them in the dropdown-menu when inserting a code-sample block
  4. Edit the plugin.min.js file from the TinyMCE codesample plugin to automatically included the line-numbers plugin into the HTML pre-element.

For a general overview, and a little bit of background why the Prism plugin was created, see this link: https://forum.bludit.org/viewtopic.php?t=1818

As I'm somewhat new to Bludit I can't assess if this is the best approach. But for me it works. ;-)

  1. Download & install the Bludit-Prism Plugin from here: https://plugins.bludit.com/plugin/prism
    • Then activate it on the Bludit Plugins page
  2. Download prism.js and prism.css from https://prismjs.com/
    • Include all languages and plugins you need
    • Note: You need to use the JS and CSS-file from the same generation! You can't mix features or versions.
  3. Go to: bludit-folder/bl-plugins/prism and make a backup copy of the original files 
    • mv js/prism.js js/prism.js.backup
mv css/prism.css css/prism.css.backup
  4. Download new prism.js and prism.css and put into the correct folders
  5. Go to: Plugins -> TinyMCE -> Codesample languages and add your new languages, in my case:
    • Bash sh|RegEx regex|Puppet puppet|Perl perl|Python python|HTML/XML markup|JavaScript javascript|CSS css|PHP php|Ruby ruby
    • Unrelated side info: This will be written in the file bludit-folder/bl-content/databases/plugins/tinymce/db.php. I was just curious how/where this change is persisted.
  6. Now you will have syntax highlighting. But only in the generated HTML files, not in the TinyMCE code-blocks!
  7. To automatically include the line-numbers plugin from Prism.js we need to include the "line-numbers" class into the pre-element. This is done in the following way:
    • Open: bludit-folder/bl-plugins/tinymce/tinymce/plugins/codesample/plugin.min.js
    • Search for <pre and in the class property add line-numbers. It should now look like this: t.insertContent('<pre id="__new" class="language-'+a+' line-numbers">'+r+"</pre>")
    • A little after that pre you will also find t.dom.setAttrib(e,"class","language-"+a), add the line-numbers class in there too, it should look like this: t.dom.setAttrib(e,"class","line-numbers language-"+a)
    • Again, thanks to this comment on GitHub: https://github.com/tinymce/tinymce/issues/2771#issuecomment-232910444
  8. Keep in mind: As Bludit is a static file generator, your previously generated pages won't get this automatically. Here you will have to edit the pre-element manually.

If you are interested in some examples, have a look at this page: https://admin.brennt.net/syntax-highlighting-test with line-numbering and without, etc.