diff --git a/plugins/tiddlywiki/highlight/files/tiddlywiki.files b/plugins/tiddlywiki/highlight/files/tiddlywiki.files
index acc957162f..b75b85598e 100644
--- a/plugins/tiddlywiki/highlight/files/tiddlywiki.files
+++ b/plugins/tiddlywiki/highlight/files/tiddlywiki.files
@@ -14,7 +14,7 @@
"fields": {
"type": "text/css",
"title": "$:/plugins/tiddlywiki/highlight/highlight.css",
- "tags": "[[$:/tags/Stylesheet]]"
+ "tags": "[[$:/tags/Stylesheet]] [[$:/tags/Stylesheet/Highlight]]"
}
}
]
diff --git a/plugins/tiddlywiki/highlight/styles.tid b/plugins/tiddlywiki/highlight/styles.tid
index fb1badeb97..58f9aa8826 100644
--- a/plugins/tiddlywiki/highlight/styles.tid
+++ b/plugins/tiddlywiki/highlight/styles.tid
@@ -1,5 +1,5 @@
title: $:/plugins/tiddlywiki/highlight/styles
-tags: [[$:/tags/Stylesheet]]
+tags: [[$:/tags/Stylesheet]] [[$:/tags/Stylesheet/Highlight]]
pre.hljs {
padding: 0;
diff --git a/plugins/tiddlywiki/highlight/usage.tid b/plugins/tiddlywiki/highlight/usage.tid
index fc1d8f12c7..cc663e2efc 100644
--- a/plugins/tiddlywiki/highlight/usage.tid
+++ b/plugins/tiddlywiki/highlight/usage.tid
@@ -2,9 +2,6 @@ title: $:/plugins/tiddlywiki/highlight/usage
\import $:/plugins/tiddlywiki/highlight/readme
-\define jsDelivrLink() https://www.jsdelivr.com/package/gh/highlightjs/cdn-release?path=build%2Flanguages&version=$(highlightVersion)$
-\define unpkgLink() https://unpkg.com/browse/@highlightjs/cdn-assets@$(highlightVersion)$/languages/
-
! Usage
Syntax highlighting is triggered when you add language information to code blocks defined with triple backticks or with the `<$codeblock>` widget. For fenced code blocks, specify the code's language immediately after the first set of backticks:
@@ -17,9 +14,20 @@ Syntax highlighting is triggered when you add language information to code block
! Adding Themes
-You can add themes from highlight.js by copying the CSS to a new tiddler and tagging it with [[$:/tags/Stylesheet]]. The available themes can be found on GitHub:
+The available themes can be found from the following CDNs:
-https://github.com/isagalaev/highlight.js/tree/master/src/styles
+* jsDelivr
+* unpkg
+
+You can add themes from highlight.js by copying the CSS to a new tiddler and tagging it with [[$:/tags/Stylesheet/Highlight]], with type set to `text/css`.
+
+Then, check the new theme in the following list and uncheck others:
+
+<$list filter="[all[tiddlers+shadows]tag[$:/tags/Stylesheet/Highlight]]">
+
+<$checkbox tag="$:/tags/Stylesheet"> <>$checkbox>
+
+$list>
! Supporting Additional Languages
@@ -31,8 +39,8 @@ You can import language definitions into <$text text="JavaScript"/> tiddlers, wi
First, locate the language file(s) you need. You can fetch the files from the following CDNs:
-* > class="tc-tiddlylink-external" target="_blank">jsDelivr
-* > class="tc-tiddlylink-external" target="_blank">unpkg
+* jsDelivr
+* unpkg
Then, click the button below to create a "highlight" module. Copy and paste the content of a language file into the the text area. Give your tiddler a meaningful title so you can keep track of the languages you've installed. You may choose to either create one tiddler per language or lump all language definitions into one tiddler. Save and reload your wiki.