Hi all,
I’m currently reading the awesome Grok Tiddly Wiki book (. I’ve set the palette to “twilight”. The codeblocks marked as html look really nice in that palette. When I do the same in mine (twilight and html), the result doesn’t look the same at all.
Attaching a couple images for comparison.
Here’s a snippet from the book (Grok TiddlyWiki — Build a deep, lasting understanding of TiddlyWiki)
Here’s what it looks in mine:
Anyone know what this might be?
Have a look in the installed plugins, I think its the highlight plugin you want.
yeah it’s installed. i also tried it on a brand new TW after installing the plugin.
Just a (possibly silly, but an easy thing to forget) reminder: for an installed plugin to start working, a TW instance needs to be saved and reloaded.
Soren edited the shadow tiddler:
$:/plugins/tiddlywiki/highlight/highlight.css
Make a new tiddler named $:/plugins/tiddlywiki/highlight/highlight.css and paste his edited version into it:
/*
Original highlight.js style (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #F0F0F0;
}
/* Base color: saturation 0; */
.hljs,
.hljs-subst {
color: #444;
}
.hljs-comment {
color: #888888;
}
.hljs-keyword,
.hljs-attribute,
.hljs-selector-tag,
.hljs-meta-keyword,
.hljs-doctag,
.hljs-name {
font-weight: bold;
}
/* User color: hue: 0 */
.hljs-type,
.hljs-string,
.hljs-number,
.hljs-selector-id,
.hljs-selector-class,
.hljs-quote,
.hljs-template-tag,
.hljs-deletion {
color: #880000;
}
.hljs-title,
.hljs-section {
color: #880000;
font-weight: bold;
}
.hljs-regexp,
.hljs-symbol,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #BC6060;
}
/* Language color: hue: 90; */
.hljs-literal {
color: #78A960;
}
.hljs-built_in,
.hljs-bullet,
.hljs-code,
.hljs-addition {
color: #397300;
}
/* Meta color: hue: 200 */
.hljs-meta {
color: #1f7199;
}
.hljs-meta-string {
color: #4d99bf;
}
/* Misc effects */
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
This is pretty cool and it does make some tags look correct but it doesn’t seem complete. For example this bit in Grok:
In my wiki it renders as:
Could there be more overriden shadow tiddlers? How did you find that one, I’m very curious!
Go to Grok TiddlyWiki and look in the Sidebar tabs: More > Explorer
Expand plug-ins then tiddlywiki then highlight
$:/plugins/tiddlywiki/highlight
Click on the contents tab in that tiddler to see all the relevant parts. That’s where I found the highlight.css tiddler.
If you still can’t find what you need, I’d suggest just messaging Soren here or through email to help out.
@Surge
Can you post a screenshot with the tiddler in edit mode and preview switched on.
Edit:
there is an language specifier (html in this example) which gives the additional syntax highlighting as shown here (this screenshot is from Soren’s site itself)
There are also highlighter options with the code mirror editor and its additional plugins.
@Surge
I just created a demo wiki in tiddlyhost with highlight-legacy installed and it works - Check here
Thanks for taking the time to set that up. I do see it working. Here’s my situation:
You can see the html is not highlighted while bash is. Something else in my settings could be doing this.
Very nice, thank you. Here’s what I have now:
I’ll try to start with an empty TW and override the css tiddler.
Which version of tiddlywiki are you using?
Also which highlight plug in have you installed - legacy one or the other
TW Version: 5.2.7
Highlight version: 5.2.7 (non-legacy)
I tried overriding the css tiddler in my 5.2.7 plugin.
Should I install the legacy version?
I used legacy version in that demo…it wasn’t working with the other one
Ah, I didn’t catch onto the fact that there are two versions of that plugin until 5 minutes ago :). I will try that today and let you guys know – thank you so much!
Did you have to override the css tiddler though?
No. I didn’t changed the CSS tiddler in that demo wiki.
Got it to work finally. I noticed that even though my tiddlywiki.info had highlight-legacy, my TW kept showing non-legacy variant even after I restarted the NodeJS app. So I deleted the tiddler for the plugin directly from TW first and restarted the app again. After that I saw highlight-legacy correctly listed as the installed plugin. And the highlight is working!!
Thank you so much everyone for your quick responses and help.
