Update Readme for a more detailed usage/installation description and codeblock background color not being applied

[Neko-Box-Coder]

This is a great widget/plugin I have been dreaming of for so long, so thank you so much for sharing it.

The only problem is that it took me so long to figure out how to install it.

You also need to change the type of the code block to the language you want to take effect, which is mentioned in the readme (to be fair I missed it) but contradictingly in the video it shows to use plaintext.
Which took me quite a while to figure it out unfortunately and for a while I thought it was broken or something.

It will be a good idea to put the replies in #3 to readme (or at least some "idiot-proof" guide with pictures) plus update the video to show it works for non-plaintext code block instead.

I can imagine these kinds of things are not too apparent to non technical Trilium users, or at least for idiots like me who sometimes misread or skip a few words in the readme.

Finally, it seems like the code block background color is not being applied so updating the
.ck-content pre{background:<whatever theme background color is>}
will be a good touch

[antoniotejada]

@Neko-Box-Coder thanks for taking the time to log the issue. You are completely right on the video being out of date, I recorded it with the initial implementation that didn't support plain-text and didn't care about the value of the drop down, it would autodetect independently of the value of the drop-down. Note the current version only cares about "plain text" and not "plain text". For not "plain text" it autodetects the language ignoring the language selected in the drop down.

I'm going to leave this open until I get around to it, which I don't know when it will be. I have a bunch of changes for corner cases that I need to verify and that is preventing me from updating with those and @kaaass nice pull requests.

For the background color, I think it's better to use highlight.js theme support. If you feel adventurous, you can change the style at the top of the javascript:

const TEMPLATE = `
<div style="padding: 10px; border-top: 1px solid var(--main-border-color); contain: none;">
<style>
/* <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/vs.min.css" rel="stylesheet"> */
pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{background:#fff;color:#000}.hljs-comment,.hljs-quote,.hljs-variable{color:green}.hljs-built_in,.hljs-keyword,.hljs-name,.hljs-selector-tag,.hljs-tag{color:#00f}.hljs-addition,.hljs-attribute,.hljs-literal,.hljs-section,.hljs-string,.hljs-template-tag,.hljs-template-variable,.hljs-title,.hljs-type{color:#a31515}.hljs-deletion,.hljs-meta,.hljs-selector-attr,.hljs-selector-pseudo{color:#2b91af}.hljs-doctag{color:grey}.hljs-attr{color:red}.hljs-bullet,.hljs-link,.hljs-symbol{color:#00b0e8}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}
</style>
</div>`;

Either

• modify the inlined css to your liking
• copy one from around https://github.com/highlightjs/highlight.js/tree/main/src/styles
• uncomment the link tag pointing to your desired theme and remove the inlined css.

[Neko-Box-Coder]

@antoniotejada
Yeah, I did that with some digging as to where I could get the CSS styles from highlight CSS.

But what I was saying is that the background color from highlight.js theme is actually not being applied because it is overridden by ".ck-content pre" CSS class.

For example, what you have at the moment in master should be pure white background. But in reality, it is not using it. This is also something maybe good to document if people want to apply their own theme. Not everyone is a CSS expert and I certainly am not and took quite some time to figure it out 😅

[Arjun-Somvanshi]

@Neko-Box-Coder I found the class by using the dev-tools provided in the trilium binary and updating it there does work temporarily. Although I believe for permanent changes to the code block's background one must compile trilium on their own with these changes or am I missing something obvious? I am a new user to trilium and don't have much exposure to electron so I am not familiar how ck is integrated here.

[Neko-Box-Coder]

@Arjun-Somvanshi
I am not sure what you mean by compiling trilium. If you literally mean editing the source code and recompiling the binary again, you don't need to do that.

You can just modify the .ck-content pre inside this extension js.

So under const TEMPLATE = ... in SyntaxHighlightWidget.js, I did something like this:

.ck-content pre{background:#1d2021;}

.ck-content pre code{white-space: pre;}

just before the </style>.

Then you just need to execute the script in the top right corner.