mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2025-02-19 12:30:01 +00:00
Update highlight.js to v11.4.0 (#6427)
* Rename v9 highlight.js plugin to highlight-legacy * Add ES6 version of highlight.js plugin * highlightblock.js - ensure this ES6 plugin will not cause error on legacy browsers - update the code to use new highlight.js APIs - change class tagging to match more closely with highlight.js - allow users to add language definitions as JS "highlight" modules * styles.tid - update to match v11 * howto.tid - add instructions on how to add language definitions as JS modules * highlight.min.js, default.min.css - version 11.4.0 common languages only * Remove extraneous whitespaces * Update readme.tid * Update bundled languages bundled: common + apache + nginx + latex + dockerfile + fortran * Update highlight-legacy subtiddlers' titles * Touch up highlight-legacy docs * Touch up highlight plugin docs * Fix pre block styling - add "hljs" class to <pre> so the element can be styled
This commit is contained in:
cdruan
GitHub
parent
36b162a377
commit
4f42df8bef
8
plugins/tiddlywiki/highlight-legacy/TypeMappings.multids
Normal file
8
plugins/tiddlywiki/highlight-legacy/TypeMappings.multids
Normal file
@ -0,0 +1,8 @@
|
||||
title: $:/config/HighlightPlugin/TypeMappings/
|
||||
|
||||
application/javascript: javascript
|
||||
application/json: json
|
||||
text/css: css
|
||||
text/html: html
|
||||
image/svg+xml: xml
|
||||
text/x-markdown: markdown
|
||||
22
plugins/tiddlywiki/highlight-legacy/files/tiddlywiki.files
Normal file
22
plugins/tiddlywiki/highlight-legacy/files/tiddlywiki.files
Normal file
@ -0,0 +1,22 @@
|
||||
{
|
||||
"tiddlers": [
|
||||
{
|
||||
"file": "highlight.pack.js",
|
||||
"fields": {
|
||||
"type": "application/javascript",
|
||||
"title": "$:/plugins/tiddlywiki/highlight-legacy/highlight.js",
|
||||
"module-type": "library"
|
||||
},
|
||||
"prefix": "var hljs = require(\"$:/plugins/tiddlywiki/highlight-legacy/highlight.js\");\n",
|
||||
"suffix": "\nexports.hljs = hljs;\n"
|
||||
},
|
||||
{
|
||||
"file": "default.css",
|
||||
"fields": {
|
||||
"type": "text/css",
|
||||
"title": "$:/plugins/tiddlywiki/highlight-legacy/highlight.css",
|
||||
"tags": "[[$:/tags/Stylesheet]]"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
44
plugins/tiddlywiki/highlight-legacy/highlightblock.js
Normal file
44
plugins/tiddlywiki/highlight-legacy/highlightblock.js
Normal file
@ -0,0 +1,44 @@
|
||||
/*\
|
||||
title: $:/plugins/tiddlywiki/highlight-legacy/highlightblock.js
|
||||
type: application/javascript
|
||||
module-type: widget
|
||||
|
||||
Wraps up the fenced code blocks parser for highlight and use in TiddlyWiki5
|
||||
|
||||
\*/
|
||||
(function() {
|
||||
|
||||
/*jslint node: true, browser: true */
|
||||
/*global $tw: false */
|
||||
"use strict";
|
||||
var TYPE_MAPPINGS_BASE = "$:/config/HighlightPlugin/TypeMappings/";
|
||||
|
||||
var CodeBlockWidget = require("$:/core/modules/widgets/codeblock.js").codeblock;
|
||||
|
||||
var hljs = require("$:/plugins/tiddlywiki/highlight-legacy/highlight.js");
|
||||
|
||||
hljs.configure({tabReplace: " "});
|
||||
|
||||
CodeBlockWidget.prototype.postRender = function() {
|
||||
var domNode = this.domNodes[0],
|
||||
language = this.language,
|
||||
tiddler = this.wiki.getTiddler(TYPE_MAPPINGS_BASE + language);
|
||||
if(tiddler) {
|
||||
language = tiddler.fields.text || "";
|
||||
}
|
||||
if(language && hljs.getLanguage(language)) {
|
||||
domNode.className = language.toLowerCase() + " hljs";
|
||||
if($tw.browser && !domNode.isTiddlyWikiFakeDom) {
|
||||
hljs.highlightBlock(domNode);
|
||||
} else {
|
||||
var text = domNode.textContent;
|
||||
domNode.children[0].innerHTML = hljs.fixMarkup(hljs.highlight(language,text).value);
|
||||
// If we're using the fakedom then specially save the original raw text
|
||||
if(domNode.isTiddlyWikiFakeDom) {
|
||||
domNode.children[0].textInnerHTML = text;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
})();
|
||||
27
plugins/tiddlywiki/highlight-legacy/license.tid
Normal file
27
plugins/tiddlywiki/highlight-legacy/license.tid
Normal file
@ -0,0 +1,27 @@
|
||||
title: $:/plugins/tiddlywiki/highlight-legacy/license
|
||||
type: text/plain
|
||||
|
||||
Copyright (c) 2006, Ivan Sagalaev
|
||||
All rights reserved.
|
||||
Redistribution and use in source and binary forms, with or without
|
||||
modification, are permitted provided that the following conditions are met:
|
||||
|
||||
* Redistributions of source code must retain the above copyright
|
||||
notice, this list of conditions and the following disclaimer.
|
||||
* Redistributions in binary form must reproduce the above copyright
|
||||
notice, this list of conditions and the following disclaimer in the
|
||||
documentation and/or other materials provided with the distribution.
|
||||
* Neither the name of highlight.js nor the names of its contributors
|
||||
may be used to endorse or promote products derived from this software
|
||||
without specific prior written permission.
|
||||
|
||||
THIS SOFTWARE IS PROVIDED BY THE REGENTS AND CONTRIBUTORS ``AS IS'' AND ANY
|
||||
EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
|
||||
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
||||
DISCLAIMED. IN NO EVENT SHALL THE REGENTS AND CONTRIBUTORS BE LIABLE FOR ANY
|
||||
DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
|
||||
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
|
||||
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
|
||||
ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
||||
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
|
||||
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
7
plugins/tiddlywiki/highlight-legacy/plugin.info
Normal file
7
plugins/tiddlywiki/highlight-legacy/plugin.info
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"title": "$:/plugins/tiddlywiki/highlight-legacy",
|
||||
"name": "Highlight (Legacy)",
|
||||
"description": "Highlight.js syntax highlighting for legacy browsers",
|
||||
"author": "Joao Bolila",
|
||||
"list": "readme usage license"
|
||||
}
|
||||
65
plugins/tiddlywiki/highlight-legacy/readme.tid
Normal file
65
plugins/tiddlywiki/highlight-legacy/readme.tid
Normal file
@ -0,0 +1,65 @@
|
||||
title: $:/plugins/tiddlywiki/highlight-legacy/readme
|
||||
|
||||
This plugin provides syntax highlighting of code blocks using v9.18.1 of [[highlight.js|https://github.com/isagalaev/highlight.js]] from Ivan Sagalaev. This legacy version should be installed in place of the regular Highlight plugin when you require your wiki to be opened in browsers that do not fully support <$text text="JavaScript"/> ES6 (2015). Here's a [[ES6 compatibility table|https://caniuse.com/?search=es6]].
|
||||
|
||||
! Built-in Language Brushes
|
||||
|
||||
The plugin includes support for the following languages (referred to as "brushes" by highlight.js):
|
||||
|
||||
* apache
|
||||
* arduino
|
||||
* arm assembly
|
||||
* asciidoc
|
||||
* autohotkey
|
||||
* awk
|
||||
* bash
|
||||
* cmake
|
||||
* coffeescript
|
||||
* cpp
|
||||
* cs
|
||||
* css
|
||||
* diff
|
||||
* dockerfile
|
||||
* erlang
|
||||
* elixir
|
||||
* fortran
|
||||
* go
|
||||
* gradle
|
||||
* haskell
|
||||
* html
|
||||
* http
|
||||
* ini
|
||||
* intel x86 assembly
|
||||
* java
|
||||
* javascript
|
||||
* json
|
||||
* kotlin
|
||||
* less
|
||||
* lua
|
||||
* makefile
|
||||
* markdown
|
||||
* mathematica
|
||||
* matlab
|
||||
* nginx
|
||||
* objectivec
|
||||
* perl
|
||||
* php
|
||||
* plaintext
|
||||
* powershell
|
||||
* properties
|
||||
* python
|
||||
* R
|
||||
* ruby
|
||||
* rust
|
||||
* scss
|
||||
* shell session
|
||||
* sql
|
||||
* swift
|
||||
* toml
|
||||
* typescript
|
||||
* vala
|
||||
* vim script
|
||||
* xml
|
||||
* yaml
|
||||
|
||||
The mapping between a MIME type and a highlight.js language specifier is accomplished via mapping tiddlers whose titles start with `$:/config/HighlightPlugin/TypeMappings/`.
|
||||
82
plugins/tiddlywiki/highlight-legacy/styles.tid
Normal file
82
plugins/tiddlywiki/highlight-legacy/styles.tid
Normal file
@ -0,0 +1,82 @@
|
||||
title: $:/plugins/tiddlywiki/highlight-legacy/styles
|
||||
tags: [[$:/tags/Stylesheet]]
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
background: <<colour tiddler-editor-background>>;
|
||||
color: <<colour foreground>>;
|
||||
-webkit-text-size-adjust:none
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-quote {
|
||||
color: #93a1a1;
|
||||
}
|
||||
|
||||
/* Solarized Green */
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-addition {
|
||||
color: #859900;
|
||||
}
|
||||
|
||||
/* Solarized Cyan */
|
||||
.hljs-number,
|
||||
.hljs-string,
|
||||
.hljs-meta .hljs-meta-string,
|
||||
.hljs-literal,
|
||||
.hljs-doctag,
|
||||
.hljs-regexp {
|
||||
color: #2aa198;
|
||||
}
|
||||
|
||||
/* Solarized Blue */
|
||||
.hljs-title,
|
||||
.hljs-section,
|
||||
.hljs-name,
|
||||
.hljs-selector-id,
|
||||
.hljs-selector-class {
|
||||
color: #268bd2;
|
||||
}
|
||||
|
||||
/* Solarized Yellow */
|
||||
.hljs-attribute,
|
||||
.hljs-attr,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-class .hljs-title,
|
||||
.hljs-type {
|
||||
color: #b58900;
|
||||
}
|
||||
|
||||
/* Solarized Orange */
|
||||
.hljs-symbol,
|
||||
.hljs-bullet,
|
||||
.hljs-subst,
|
||||
.hljs-meta,
|
||||
.hljs-meta .hljs-keyword,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-pseudo,
|
||||
.hljs-link {
|
||||
color: #cb4b16;
|
||||
}
|
||||
|
||||
/* Solarized Red */
|
||||
.hljs-built_in,
|
||||
.hljs-deletion {
|
||||
color: #dc322f;
|
||||
}
|
||||
|
||||
.hljs-formula {
|
||||
background: #eee8d5;
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
28
plugins/tiddlywiki/highlight-legacy/usage.tid
Normal file
28
plugins/tiddlywiki/highlight-legacy/usage.tid
Normal file
@ -0,0 +1,28 @@
|
||||
title: $:/plugins/tiddlywiki/highlight-legacy/usage
|
||||
|
||||
! 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:
|
||||
|
||||
```
|
||||
```js
|
||||
var a = b + c; // Highlighted as JavaScript
|
||||
```
|
||||
```
|
||||
|
||||
! 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:
|
||||
|
||||
https://github.com/isagalaev/highlight.js/tree/master/src/styles
|
||||
|
||||
! Supporting Additional Languages
|
||||
|
||||
The [[highlight.js|https://github.com/highlightjs/highlight.js]] project supports many languages. Only a subset of these languages are supported by the plugin. It is possible for users to change the set of languages supported by the plugin by following these steps:
|
||||
|
||||
(Requires ~TiddlyWiki on Node.js)
|
||||
|
||||
# Go to the highlight.js project [[download page|https://highlightjs.org/download/]], select the language definitions to include, and press the Download button to download a zip archive containing customised support files for a highlight.js syntax highlighting server.
|
||||
# Locate the `highlight.pack.js` file in the highlight plugin -- on a stock Debian 8 system running Tiddlywiki5 under node-js, it is in `/usr/local/lib/node_modules/tiddlywiki/plugins/tiddlywiki/highlight/files/`.
|
||||
# Replace the plugin `highlight.pack.js` file located in step 2 with the one from the downloaded archive obtained in step 1.
|
||||
# Restart the ~TiddlyWiki server.
|
||||
9
plugins/tiddlywiki/highlight/files/default.min.css
vendored
Normal file
9
plugins/tiddlywiki/highlight/files/default.min.css
vendored
Normal file
@ -0,0 +1,9 @@
|
||||
/*!
|
||||
Theme: Default
|
||||
Description: Original highlight.js style
|
||||
Author: (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
|
||||
Maintainer: @highlightjs/core-team
|
||||
Website: https://highlightjs.org/
|
||||
License: see project LICENSE
|
||||
Touched: 2021
|
||||
*/pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{background:#f3f3f3;color:#444}.hljs-comment{color:#697070}.hljs-punctuation,.hljs-tag{color:#444a}.hljs-tag .hljs-attr,.hljs-tag .hljs-name{color:#444}.hljs-attribute,.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-name,.hljs-selector-tag{font-weight:700}.hljs-deletion,.hljs-number,.hljs-quote,.hljs-selector-class,.hljs-selector-id,.hljs-string,.hljs-template-tag,.hljs-type{color:#800}.hljs-section,.hljs-title{color:#800;font-weight:700}.hljs-link,.hljs-operator,.hljs-regexp,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#ab5656}.hljs-literal{color:#695}.hljs-addition,.hljs-built_in,.hljs-bullet,.hljs-code{color:#397300}.hljs-meta{color:#1f7199}.hljs-meta .hljs-string{color:#38a}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}
|
||||
1401
plugins/tiddlywiki/highlight/files/highlight.min.js
vendored
Normal file
1401
plugins/tiddlywiki/highlight/files/highlight.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -1,7 +1,7 @@
|
||||
{
|
||||
"tiddlers": [
|
||||
{
|
||||
"file": "highlight.pack.js",
|
||||
"file": "highlight.min.js",
|
||||
"fields": {
|
||||
"type": "application/javascript",
|
||||
"title": "$:/plugins/tiddlywiki/highlight/highlight.js",
|
||||
@ -11,7 +11,7 @@
|
||||
"suffix": "\nexports.hljs = hljs;\n"
|
||||
},
|
||||
{
|
||||
"file": "default.css",
|
||||
"file": "default.min.css",
|
||||
"fields": {
|
||||
"type": "text/css",
|
||||
"title": "$:/plugins/tiddlywiki/highlight/highlight.css",
|
||||
|
||||
@ -18,28 +18,34 @@ var CodeBlockWidget = require("$:/core/modules/widgets/codeblock.js").codeblock;
|
||||
|
||||
var hljs = require("$:/plugins/tiddlywiki/highlight/highlight.js");
|
||||
|
||||
hljs.configure({tabReplace: " "});
|
||||
|
||||
CodeBlockWidget.prototype.postRender = function() {
|
||||
var domNode = this.domNodes[0],
|
||||
language = this.language,
|
||||
tiddler = this.wiki.getTiddler(TYPE_MAPPINGS_BASE + language);
|
||||
if(tiddler) {
|
||||
language = tiddler.fields.text || "";
|
||||
}
|
||||
if(language && hljs.getLanguage(language)) {
|
||||
domNode.className = language.toLowerCase() + " hljs";
|
||||
if($tw.browser && !domNode.isTiddlyWikiFakeDom) {
|
||||
hljs.highlightBlock(domNode);
|
||||
} else {
|
||||
var text = domNode.textContent;
|
||||
domNode.children[0].innerHTML = hljs.fixMarkup(hljs.highlight(language,text).value);
|
||||
// If we're using the fakedom then specially save the original raw text
|
||||
if(domNode.isTiddlyWikiFakeDom) {
|
||||
domNode.children[0].textInnerHTML = text;
|
||||
if(hljs.getLanguage !== undefined) {
|
||||
// load language definitions
|
||||
$tw.utils.each($tw.modules.types["highlight"],function(moduleInfo,moduleName) {
|
||||
$tw.utils.evalSandboxed(moduleInfo.definition,{hljs:hljs, exports:{}},moduleName);
|
||||
});
|
||||
|
||||
CodeBlockWidget.prototype.postRender = function() {
|
||||
var domNode = this.domNodes[0],
|
||||
language = this.language,
|
||||
tiddler = this.wiki.getTiddler(TYPE_MAPPINGS_BASE + language);
|
||||
if(tiddler) {
|
||||
language = tiddler.fields.text || "";
|
||||
}
|
||||
if(language && hljs.getLanguage(language)) {
|
||||
domNode.className = "hljs";
|
||||
domNode.children[0].className = language.toLowerCase() + " hljs";
|
||||
if($tw.browser && !domNode.isTiddlyWikiFakeDom) {
|
||||
hljs.highlightElement(domNode.children[0]);
|
||||
} else {
|
||||
var text = domNode.textContent;
|
||||
domNode.children[0].innerHTML = hljs.highlight(text,{language: language, ignoreIllegals: true}).value;
|
||||
// If we're using the fakedom then specially save the original raw text
|
||||
if(domNode.isTiddlyWikiFakeDom) {
|
||||
domNode.children[0].textInnerHTML = text;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
})();
|
||||
|
||||
@ -1,10 +0,0 @@
|
||||
title: $:/plugins/tiddlywiki/highlight/howto
|
||||
|
||||
! Supporting Additional Languages
|
||||
|
||||
The [[highlight.js|https://github.com/highlightjs/highlight.js]] project supports many languages. Only a subset of these languages are supported by the plugin. It is possible for users to change the set of languages supported by the plugin by following these steps:
|
||||
|
||||
# Go to the highlight.js project [[download page|https://highlightjs.org/download/]], select the language definitions to include, and press the Download button to download a zip archive containing customised support files for a highlight.js syntax highlighting server.
|
||||
# Locate the `highlight.pack.js` file in the highlight plugin -- on a stock Debian 8 system running Tiddlywiki5 under node-js it is located at `/usr/local/lib/node_modules/tiddlywiki/plugins/tiddlywiki/highlight/files/highlight.pack.js`.
|
||||
# Replace the plugin `highlight.pack.js` file located in step 2 with the one from the downloaded archive obtained in step 1.
|
||||
# Restart the Tiddlywiki server.
|
||||
@ -3,5 +3,5 @@
|
||||
"name": "Highlight",
|
||||
"description": "Highlight.js syntax highlighting",
|
||||
"author": "Joao Bolila",
|
||||
"list": "readme usage howto license"
|
||||
"list": "readme usage license"
|
||||
}
|
||||
|
||||
@ -1,51 +1,21 @@
|
||||
title: $:/plugins/tiddlywiki/highlight/readme
|
||||
|
||||
This plugin provides syntax highlighting of code blocks using v9.18.1 of [[highlight.js|https://github.com/isagalaev/highlight.js]] from Ivan Sagalaev.
|
||||
\define highlightVersion() 11.4.0
|
||||
|
||||
! Usage
|
||||
|
||||
When the plugin is installed it automatically applies highlighting to all codeblocks defined with triple backticks or with the CodeBlockWidget.
|
||||
|
||||
The language can optionally be specified after the opening triple braces:
|
||||
|
||||
<$codeblock code="""```css
|
||||
* { margin: 0; padding: 0; } /* micro reset */
|
||||
|
||||
html { font-size: 62.5%; }
|
||||
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
|
||||
h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */
|
||||
```"""/>
|
||||
|
||||
If no language is specified highlight.js will attempt to automatically detect the language.
|
||||
This plugin provides syntax highlighting of code blocks using version <<highlightVersion>> of [[highlight.js|https://github.com/isagalaev/highlight.js]] from Ivan Sagalaev. This plugin does not work on browsers that do not fully support ~JavaScript ES6 (2015). If you need highlight.js running on those legacy browsers, you would need to install the "Highlight (Legacy)" plugin instead. Here's a [[ES6 compatibility table|https://caniuse.com/?search=es6]].
|
||||
|
||||
! Built-in Language Brushes
|
||||
|
||||
The plugin includes support for the following languages (referred to as "brushes" by highlight.js):
|
||||
The plugin includes support for the following common languages (referred to as "brushes" by highlight.js):
|
||||
|
||||
* apache
|
||||
* arduino
|
||||
* arm assembly
|
||||
* asciidoc
|
||||
* autohotkey
|
||||
* awk
|
||||
* bash
|
||||
* cmake
|
||||
* coffeescript
|
||||
* c
|
||||
* cpp
|
||||
* cs
|
||||
* csharp
|
||||
* css
|
||||
* diff
|
||||
* dockerfile
|
||||
* erlang
|
||||
* elixir
|
||||
* fortran
|
||||
* go
|
||||
* gradle
|
||||
* haskell
|
||||
* html
|
||||
* http
|
||||
* ini
|
||||
* intel x86 assembly
|
||||
* html, xml
|
||||
* java
|
||||
* javascript
|
||||
* json
|
||||
@ -54,28 +24,29 @@ The plugin includes support for the following languages (referred to as "brushes
|
||||
* lua
|
||||
* makefile
|
||||
* markdown
|
||||
* mathematica
|
||||
* matlab
|
||||
* nginx
|
||||
* objectivec
|
||||
* perl
|
||||
* php
|
||||
* plaintext
|
||||
* powershell
|
||||
* properties
|
||||
* python
|
||||
* R
|
||||
* ruby
|
||||
* rust
|
||||
* scss
|
||||
* shell session
|
||||
* sql
|
||||
* shell session
|
||||
* swift
|
||||
* toml
|
||||
* toml, ini
|
||||
* typescript
|
||||
* vala
|
||||
* vim script
|
||||
* xml
|
||||
* visual basic .net
|
||||
* yaml
|
||||
|
||||
You can also specify the language as a MIME content type (eg `text/html` or `text/css`). The mapping is accomplished via mapping tiddlers whose titles start with `$:/config/HighlightPlugin/TypeMappings/`.
|
||||
And these additional ones:
|
||||
|
||||
* apache config
|
||||
* dockerfile
|
||||
* fortran
|
||||
* latex
|
||||
* nginx config
|
||||
|
||||
The mapping between a MIME type and a highlight.js language specifier is accomplished via mapping tiddlers whose titles start with `$:/config/HighlightPlugin/TypeMappings/`.
|
||||
|
||||
@ -1,13 +1,18 @@
|
||||
title: $:/plugins/tiddlywiki/highlight/styles
|
||||
tags: [[$:/tags/Stylesheet]]
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
pre.hljs {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
pre code.hljs {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.hljs {
|
||||
background: <<colour tiddler-editor-background>>;
|
||||
color: <<colour foreground>>;
|
||||
-webkit-text-size-adjust:none
|
||||
-webkit-text-size-adjust:none;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
@ -25,7 +30,7 @@ tags: [[$:/tags/Stylesheet]]
|
||||
/* Solarized Cyan */
|
||||
.hljs-number,
|
||||
.hljs-string,
|
||||
.hljs-meta .hljs-meta-string,
|
||||
.hljs-meta .hljs-string,
|
||||
.hljs-literal,
|
||||
.hljs-doctag,
|
||||
.hljs-regexp {
|
||||
|
||||
@ -1,16 +1,63 @@
|
||||
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
|
||||
|
||||
Fenced code blocks can have a language specifier added to trigger highlighting in a specific language. Otherwise heuristics are used to detect the language.
|
||||
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:
|
||||
|
||||
```
|
||||
```js
|
||||
var a = b + c; // Highlighted as JavaScript
|
||||
```
|
||||
```
|
||||
|
||||
! 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:
|
||||
|
||||
https://github.com/isagalaev/highlight.js/tree/master/src/styles
|
||||
|
||||
! Supporting Additional Languages
|
||||
|
||||
The [[highlight.js|https://github.com/highlightjs/highlight.js]] project supports many languages. Only a subset of these languages are supported by the plugin. You can change the language set using either of the following methods:
|
||||
|
||||
!! Browser-based Method
|
||||
|
||||
You can import language definitions into <$text text="JavaScript"/> tiddlers, with their `module-type` set to "highlight".
|
||||
|
||||
First, locate the language file(s) you need. You can fetch the files from the following CDNs:
|
||||
|
||||
* <a href=<<jsDelivrLink>>>jsDelivr</a>
|
||||
* <a href=<<unpkgLink>>>unpkg</a>
|
||||
|
||||
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.
|
||||
|
||||
<$button tooltip="add new languages" aria-label="add new languages" >
|
||||
<$action-createtiddler $basetitle="highlight-language.js" text="" type="application/javascript" module-type="highlight">
|
||||
<$action-sendmessage $message="tm-edit-tiddler" $param=<<createTiddler-title>>/>
|
||||
</$action-createtiddler>
|
||||
Add New Language(s)
|
||||
</$button>
|
||||
|
||||
!!! Keeping Your Language Definitions Up-to-date
|
||||
|
||||
Remember to update installed languages whenever this plugin is upgraded:
|
||||
|
||||
<ul>
|
||||
<$list filter="[[highlight]modules[]]" emptyMessage="""<li>(none installed)</li>""">
|
||||
<li><$link><<currentTiddler>></$link></li>
|
||||
</$list>
|
||||
</ul>
|
||||
|
||||
!! Via <$text text="TiddlyWiki"/> on Node.js
|
||||
|
||||
You can replace the supplied highlight.js library with a custom version:
|
||||
|
||||
# Go to the highlight.js project [[download page|https://highlightjs.org/download/]], select the language definitions to include, and press the Download button to download a zip archive containing customised support files for a highlight.js syntax highlighting server.
|
||||
# Locate the `highlight.min.js` file in the highlight plugin -- on a stock Debian 8 system running Tiddlywiki5 under node-js, it is in `/usr/local/lib/node_modules/tiddlywiki/plugins/tiddlywiki/highlight/files/`.
|
||||
# Replace the plugin `highlight.min.js` file located in step 2 with the one from the downloaded archive obtained in step 1.
|
||||
# Restart the ~TiddlyWiki server.
|
||||
Loading…
x
Reference in New Issue
Block a user