[Widget] Syntax Highlight Widget

[antoniotejada]

Trilium-SyntaxHighlightWidget

https://github.com/antoniotejada/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.
• 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
• Attach the highlight.min.js file to that note
• Set the code note #debug attribute to enable debug output
• set #highlightCodeBlock attribute to the notes you want to enable codeblock highlighting (this is temporary while the widget is in development, will be removed in future versions)

Todo

• Don't re-highlight unmodified codeblocks
• Honor language attribute instead of using automatic?
• Allow specifying the style sheet as code and/or text note attribute
• Readonly note support

Video

sandbox.-.Trilium.Notes.2022-04-28.08-01-40_rescaled.mp4

[antoniotejada]

Must be photoshopped, the internets say it can't be done.

[kaaass]

This is brilliant! I had thought it was impossible to achive real-time syntax highlighting without introducing a new CKEditor plugin. And the idea of delaying highlight DOM changing by passing class name through markers is intersting.
However, it is a little bit upset to not have code highlighted until note been modified. Hope this could be fixed.

[antoniotejada]

Good catch, I have been running with debugging and reloading with cltr+r so I forgot about the requirement of having to modify the note (you don't need to if you ctlr+r).
It's a timing issue, the first time a note is loaded when switching from a different one, Trilium warns of note refresh before the DOM for the note is ready.

Should be easy to work around with a timer or such, but I'm considering going the setAttribute route instead of addMarker which formats the text permanently. That would make it work with readonly notes too, and the notes stored in the database would keep the formatting, which I see pros and cons to, but I don't think I care about the cons.
I do need to add "debouncing" if I format the text though (formatting will trigger a refresh, which will trigger a reformatting, which will trigger a refresh...).

[Nriver]

Good job.

[TuxTheXplorer]

Brilliant work! Thanks for creating this :)

[FluffMe]

Thank you so much!

[antoniotejada]

I updated the version at my github, with very nice improvements antoniotejada/Trilium-SyntaxHighlightWidget@c186fef

I won't be posting more updates here, so subscribe to the github if you want them!

[ChoKhoOu]

Cool! Thanks for creating this 👍

[Salmooo]

How to attach the highlight.min.js file to that note？

[Kani3D]

Drag and Drop works

[greengeek]

Thanks @antoniotejada for this!

I am using it with the theme I just made, #3451 , along with the Material Darker CSS for highlight.js and it works and looks awesome!

[czen]

Thanks @antoniotejada for this!

I am using it with the theme I just made, #3451 , along with the Material Darker CSS for highlight.js and it works and looks awesome!

Sorry, but how to use that CSS for highlight.js in Trilim?

[Kani3D]

This is freaking awesome thanks @antoniotejada !
Is there anyway to adjust the colors? The darkblue is pretty hard to read for me.
i.e. the code is "cd/volumexx/folderxx" where the "cd" gets darkblue it's almost invisible.
Thanks in advance.

[guchengod]

good job Thank you so much!

[remus-selea]

Is it possible to make it so that the user can type three back ticks followed by the language identifier like yml, js instead of the automatic syntax highlighting? Almost like markdown. It's definitely the most annoying feature to not have.

I like many of the features of Trilium such as:

Notes can be arranged into arbitrarily deep tree. Single note can be placed into multiple places in the tree (see cloning)
Strong note encryption with per-note granularity
Synchronization with self-hosted sync server
Seamless note versioning

But for the most part dislike the WYSIWYG editor with exceptions such as the image sizing and placement feature.

[antoniotejada]

There's an unmerged pull request that does that

antoniotejada/Trilium-SyntaxHighlightWidget#6

[remus-selea]

Unfortunately that PR is not working for me. There are no instructions in that PR on how to use it. I tried ``` followed by language such as java, or two `` followed by language, but it always just closes on the third back tick and you cannot write the language there.

[kaaass]

@remus-selea That PR doesn't provide the ``` support, it allows you to select the language of the code block in CKEditor's popup.

[spirit1431007]

Good job Thank you!

[0xbismarck]

Can this be integrated into the mainline Trilium?

[Beexx]

Hello,

I can't make it work...

• I created the 'js frontend' code note, and attached to it the highlight.min.js file
• I added the #widget attribute

When I reload the frontend (Ctrl+R), I get an error :

Execution of JS note "Highlight" with ID FTSScYG0tdvn failed with error: Load of script note "Highlight" (FTSScYG0tdvn) failed with: highlightminjs is not defined
Do you know what's going wrong ?

[Beexx]

Ok, I found out the issue :
I was attaching the highlight.min.js file as a "note attachment" (using the ... menu on the top right). This is not the way to do it.
Instead, you should just add a subnote of the same type (JS Frontend), and just copy-paste the content of highlight.min.js file into it.
(alternatively, you can create the subnote by dragging the highlight.min.js file from your file browser to the note containing SyntaxHighlightWidget.js)

[eliandoran]

@antoniotejada , would you be interested in bringing this into Trilium as a first-class feature instead of a widget/plugin?

If you are, let's follow up the discussion in here: TriliumNext/Notes#20