Trilium-SyntaxHighlightWidget icon indicating copy to clipboard operation
Trilium-SyntaxHighlightWidget copied to clipboard

Syntax highlight Trilium widget for editable note codeblocks using highlight.js

Trilium-SyntaxHighlightWidget

Syntax highlight Trilium widget for editable note codeblocks using highlight.js

Features

  • Live syntax highlighting of any codeblock inside a text note using automatic language detection, unless plaintext is selected.
  • The highlighting is not saved as formatting with the note, but just view-time markers like that highlighting that happens when you do searching.

Installation

  • Create a code note of type JS Frontend with the contents of SyntaxHighlightWidget.js and the label #widget
  • Attach the highlight.min.js file to that note
  • To enable debug output, set the code note #debugLevel attribute to one of error, warn, info, log, debug (default is info)

Todo

  • Honor language attribute when different from plaintext instead of using automatic?
  • Allow specifying the style sheet as code and/or text note attribute?
  • Readonly note support?

Discussions

https://github.com/zadam/trilium/discussions/2822

Video

https://user-images.githubusercontent.com/6446344/165748493-ef5ad3b5-b89b-440e-b942-e105083dfada.mp4