I have produced a new highlighter plugin, https://prismjs.tiddlyhost.com
Tiddlyprism is a smaller alternative highlighter to the official highlighterjs plugin, and supports highlighting of tiddlywiki text.
8 Likes
<$codeblock code={{{ [<currentTiddler>get[text]] }}} language="swift"/>
Previously I used to use the above mentioned code in a viewtemplate to display the tiddler text when the highlighterjs plugin is installed. Is something similar possible with Tiddlyprism?
Also can this highlight the wikitext in system tiddlers ?
How codeblocks works should not vary between the different highlighters, so that should work.
The highlight of system tiddlers would be to be controlled by templates - similar to the css case in this pull request
Actually what I wanted to know was whether there is some widget similar to codeblock widget in tiddlyprism which can be used similar to the code given above
tiddlyprism has no widgets it extends the codeblock widget.
I tried your solution and there is a strange behaviour while in edit mode, if I try to select some text, the selected text is offset from the original text below. And some other time it is even on a different line (like images joined here)
Very strange and annoying problem because impossible to target clearly a text to select…
It seems that the green selected text doesn’t have the same width than the text in edit box. On small tiddlers it seems fine but on longer tiddlers, the problem gets worse at the bottom of the tiddler.
Hi Thomas thank for the report. Do you see this on the demo page https://unieditor.tiddlyhost.com/? I have a lilac highlight when selecting text not a green one. Which browser are you using?
No I don’t have any problem with you version online I see on Opera Browser.
Here I use TiddlyDesktop. But I tried to open my wiki directly on Opera browser, the color is pink like you but the problem is the same.
As I use this wiki to compile and test a lot of things, it is maybe a problem of compatibility with another plugin or a personnal adaptation in my stylesheets.
Witch stylesheet in your plugin is responsible for this pink highlighting?
The editor works by making the text int textarea invisible and then overlaying the same text in a div hightlighted by twprism. The selecting of text is done in the textarea, on the invisible text and the pink you see is from the textarea. I guess that there is some css that is overriding the spacing, probably of the textarea. The textarea css of unieditor is contained in $:/plugins/bj/unieditor/unieditor.css
Looks sensible as the issue.
I maybe solve the case…In my wiki, there was no definition of $:/themes/tiddlywiki/vanilla/settings/editorfontfamily and because I use the notebook theme this parameter was replaced with $:/themes/nico/notebook/settings/editorfontfamily.
I set those two with Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; witch is what is defined in $:/plugins/bj/unieditor/unieditor.css and everything seems fine.
I guess unieditor should catch this font definition by transcluding $:/themes/tiddlywiki/vanilla/settings/editorfontfamily to let user choose whatever font suits him to edit the tiddlers…
EDIT…
Not a complete solution, on long tiddlers, the offset stil exists… 
EDIT 2
I removed word-spacing, word-warp and font-size definitions in $:/plugins/bj/unieditor/unieditor.css and everything is much better. not perfect though. The selected text is still a little bit wider than the original one, but no more line offset in long tiddlers… And I removed the transparency of selection whitch was confusing to me.
EDIT 3
Better in Vanilla theme but not with Notebook theme. The line offset is still there. Really a question of font size or space size or wraping…
Here the editor window on certain line of the tiddler :
And the same line selected :
The last word (more) is wrap to the next line creating the offset…
I don’t know where to look for a solution…
I don’t know the notebook theme, do you have a link?
the css has to be compatible with that in tiddlyprism
Here it is GitHub - NicolasPetton/Notebook: Notebook is a clean, uncluttered theme for TiddlyWiki., but I tried it on your demo site and everything went fine…
The plugin is not accessible on this site but you can find it there : Notebook Theme Plugin Site Disabled
if you make your wiki available, say in tiddlyhost, I will take a look
Wikitext syntax highlight colors seem to be defined here $:/plugins/bj/tiddlyprism/prismtw.css and they are hardcoded. This does not look good when changing palettes.
How are you displaying wikitext?
Here is a tiddler containing a wikitext snippet in edit mode:
Palette is Nord.
Same with Vanilla palette:
I tried to make the colors show on black as well as white backgrounds.
you could change the background to black via the $:/plugins/bj/unieditor/unieditor.css
div.unieditor pre.unieditor__pre {
z-index: 1;
display: block;
background-color: black;
/*for fix editor height, needs to overflow and be hidden for js scrolling*/
height:fit-content;
/*width:fit-content;*/
}