diff --git a/plugins/tiddlywiki/highlight/files/tiddlywiki.files b/plugins/tiddlywiki/highlight/files/tiddlywiki.files index acc957162..b75b85598 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 fb1badeb9..58f9aa882 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 fc1d8f12c..cc663e2ef 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"> <> + + ! 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.