#||
||
Compatible with: !!(green)**R6.1**!!
Current version: **0.1**
Credits: ((user:WikiAdmin WikiAdmin))
|{{toc numerate=1}} ||
||#
Repo: ((source:master/community/formatter/highlight/hljs.php community/formatter/highlight/hljs.php))
https://github.com/highlightjs/highlight.js
((https://highlightjs.org Highlight.js Documentation))
Highlight.js is a syntax highlighter written in JavaScript. It works in the browser as well as on the server. It can work with pretty much any markup, doesn’t depend on any other frameworks, and has automatic language detection.
===Usage===
Call via ##(hljs [language])##
##""%%(hljs php) source%%""##
===Install===
1. download ((https://highlightjs.org/download/ highlight.js))
1. place the ##Highlight.js## lib and ##default.min.css## under the **lib/highlight.js/** folder
1. add ##hljs.php## highlighter to the **formatter/highlight/** folder
2. add ##hljs.tpl## template to the **formatter/highlight/template/** folder
2. link the js and css file in the theme header or add the hljs action to the **action/** folder
====Formatter====
((source:master/community/formatter/highlight/hljs.php formatter/highlight/hljs.php))
``(php)
<?php
// WackoWiki Wrapper for Highlight.js
// https://wackowiki.org/doc/Dev/PatchesHacks/Highlight.js
/*
%%(hljs [language])
content
%%
requires Highlight.js script <https://highlightjs.org/>
The Highlight.js script must be loaded once either via the {{hljs}} action or the theme header.
*/
// comment this out when you've set this statically in the theme header
if (!isset($this->hljs))
{
$this->hljs = true;
$tpl->action_name = 'hljs';
}
if ($options['_default'])
{
$language = $options['_default'];
if (!empty($language))
{
$class = match ($language)
{
'nohighlight' => 'nohighlight',
default => 'language-' . $language
};
}
if ($class)
{
$tpl->class = ' class="' . $class . '"';
}
}
$tpl->text = Ut::html($text);
``
((source:master/community/formatter/highlight/template/hljs.tpl formatter/highlight/template/hljs.tpl))
%%
[ === main === ]
[ '' action '' ]
<ignore>
<!--notypo-->
[ ' error ' ]
<pre><code[ ' class ' ]>[ ' text | pre ' ]</code></pre>
<!--/notypo-->
</ignore>
[ == action == ]
<ignore><!--notypo--><!--action:begin-->[ ' name ' ]<!--action:end--><!--/notypo--></ignore>
%%
====Link to the library and one of the themes====
The Highlight.js script and the stylesheet **must be loaded once** either dynamically via
* the ##~{{hljs}}## action (formatter sets action call) **or**
* the theme header.
%%(php)
<?php
// add to theme/_common/_header.php (above $tpl->additions)
// highlight.js
$this->add_html('header', '<link rel="stylesheet" href="' . $this->db->base_path . 'js/highlight.js/default.min.css' . '">');
$this->add_html('footer', '<script src="' . $this->db->base_path . 'js/highlight.js/highlight.min.js' . '"></script>');
$this->add_html('footer', '<script>hljs.highlightAll();</script>');
%%
or load them dynamically via a action set once only via formatter when needed.
((source:master/community/action/hljs.php action/hljs.php))
%%(php)
<?php
if (!defined('IN_WACKO'))
{
exit;
}
// chose your favorite style (e.g. stackoverflow-dark.min.css)
$hljs_css = 'default.min.css';
// local
$hljs_styles = $this->db->base_path . 'js/highlight.js/' . $hljs_css;
$hljs_script = $this->db->base_path . 'js/highlight.js/highlight.min.js';
// CDN (see Highlight.js README.md)
#$hljs_styles = 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/styles/' . $hljs_css;
#$hljs_script = 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/es/highlight.min.js';
// highlight.js
$this->add_html('header', '<link rel="stylesheet" href="' . $hljs_styles . '">');
$this->add_html('footer', '<script src="' . $hljs_script . '"></script>');
$this->add_html('footer', '<script>hljs.highlightAll();</script>');
%%
=====Fetch via CDN & Subresource Integrity=====
If you prefer Highlight.js via CDN replace the local resources accordingly.
If you are loading Highlight.js via CDN you may wish to use ((https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity Subresource Integrity)) to guarantee that you are using a legimitate build of the library.
To do this you simply need to add the ##integrity## attribute for each JavaScript file you download via CDN. These digests are used by the browser to confirm the files downloaded have not been modified.
``(hl html)
<script
src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"
integrity="sha384-d8KTBLFjg2IVNtohjj32TAh8+MOFPukj5WKbkfk83mLz1ctxujsIN0jnKaRw3rW7"></script>
``
====Use custom CSS files====
Chose a style like ##stackoverflow-dark.min.css## from the ##styles/## folder of the downloaded highlight.zip and replace ##default.min.css## with it. Don't forget to change the CSS file name in the action or your theme header accordingly.
====Router configuration====
Add the js/highlight.js directory to your router.conf if you hosting your own copy of Highlight.js.
config/router.conf
%%(hl diff)
diff --git a/src/config/router.conf b/src/config/router.conf
index 6649fc2..24698d1 100644
--- a/src/config/router.conf
+++ b/src/config/router.conf
@@ -107,7 +107,7 @@
`^(theme/{}/css|theme/_common|admin/style)/{}$` _ok! // css
`^image/(wikiedit/)?{}$` _ok! // icons
`^theme/{}/icon/{}$` _ok! // icons
-`^js/(lang/|photoswipe/)?{}$` _ok! // js
+`^js/(lang/|photoswipe/|highlight.js/)?{}$` _ok! // js
`^file/(global/){}$` _ok! // global uploads
`^file/thumb/{}$` _ok! // global thumbs
`^setup/(image|css)/{}$` _ok! unlock=1 // setup inlines
%%
====CSP====
Add the domain of the CDN to ##style-src## and ##script-src## in your ##csp.custom.conf## if you do use a Highlight.js CDN server.
config/csp.custom.conf
%%
style-src 'self' cdn.jsdelivr.net;
script-src 'self' 'unsafe-inline' cdn.jsdelivr.net;
%%
===Supported Formats===
The table below shows the full list of languages (and corresponding classes/aliases) supported by Highlight.js. Languages that list a **Package** below are 3rd party languages and are not bundled with the core library. You can find their repositories by following the links.
**Note:** The languages available will depend on how you've built or are included the library in your app. For example our default minified web build includes only ~~40 popular languages.
#|
*| # | Language | Aliases | Package |*
|| 1 | 1C | 1c | ||
|| 2 | 4D | 4d | ((https://github.com/highlightjs/highlightjs-4d highlightjs-4d)) ||
|| 3 | ABAP | sap-abap, abap | ((https://github.com/highlightjs/highlightjs-sap-abap highlight-sap-abap)) ||
|| 4 | ABNF | abnf | ||
|| 5 | Access logs | accesslog | ||
|| 6 | Ada | ada | ||
|| 7 | Apex | apex | ((https://github.com/highlightjs/highlightjs-apex/ highlightjs-apex)) ||
|| 8 | Arduino (C++ w/Arduino libs) | arduino, ino | ||
|| 9 | ARM assembler | armasm, arm | ||
|| 10 | AVR assembler | avrasm | ||
|| 11 | ActionScript | actionscript, as | ||
|| 12 | Alan IF | alan, i | ((https://github.com/highlightjs/highlightjs-alan highlightjs-alan)) ||
|| 13 | Alan | ln | ((https://github.com/alantech/highlightjs-alan highlightjs-alan)) ||
|| 14 | AngelScript | angelscript, asc | ||
|| 15 | Apache | apache, apacheconf | ||
|| 16 | AppleScript | applescript, osascript | ||
|| 17 | Arcade | arcade | ||
|| 18 | AsciiDoc | asciidoc, adoc | ||
|| 19 | AspectJ | aspectj | ||
|| 20 | AutoHotkey | autohotkey | ||
|| 21 | AutoIt | autoit | ||
|| 22 | Awk | awk, mawk, nawk, gawk | ||
|| 23 | Bash | bash, sh, zsh | ||
|| 24 | Basic | basic | ||
|| 25 | BBCode | bbcode | ((https://github.com/RedGuy12/highlightjs-bbcode highlightjs-bbcode)) ||
|| 26 | Blade (Laravel) | blade | ((https://github.com/miken32/highlightjs-blade highlightjs-blade)) ||
|| 27 | BNF | bnf | ||
|| 28 | Brainfuck | brainfuck, bf | ||
|| 29 | C# | csharp, cs | ||
|| 30 | C | c, h | ||
|| 31 | C++ | cpp, hpp, cc, hh, c++, h++, cxx, hxx | ||
|| 32 | C/AL | cal | ||
|| 33 | Cache Object Script | cos, cls | ||
|| 34 | CMake | cmake, cmake.in | ||
|| 35 | COBOL | cobol, standard-cobol | ((https://github.com/otterkit/highlightjs-cobol highlightjs-cobol)) ||
|| 36 | Coq | coq | ||
|| 37 | CSP | csp | ||
|| 38 | CSS | css | ||
|| 39 | Cap’n Proto | capnproto, capnp | ||
|| 40 | Chaos | chaos, kaos | ((https://github.com/chaos-lang/highlightjs-chaos highlightjs-chaos)) ||
|| 41 | Chapel | chapel, chpl | ((https://github.com/chapel-lang/highlightjs-chapel highlightjs-chapel)) ||
|| 42 | Cisco CLI | cisco | ((https://github.com/BMatheas/highlightjs-cisco-cli highlightjs-cisco-cli)) ||
|| 43 | Clojure | clojure, clj | ||
|| 44 | CoffeeScript | coffeescript, coffee, cson, iced | ||
|| 45 | CpcdosC+ | cpc | ((https://github.com/SPinti-Software/highlightjs-cpcdos highlightjs-cpcdos)) ||
|| 46 | Crmsh | crmsh, crm, pcmk | ||
|| 47 | Crystal | crystal, cr | ||
|| 48 | cURL | curl | ((https://github.com/highlightjs/highlightjs-curl highlightjs-curl)) ||
|| 49 | Cypher (Neo4j) | cypher | ((https://github.com/highlightjs/highlightjs-cypher highlightjs-cypher)) ||
|| 50 | D | d | ||
|| 51 | Dafny | dafny | ((https://github.com/ConsenSys/highlightjs-dafny highlightjs-dafny))||
|| 52 | Dart | dart | ||
|| 53 | Delphi | dpr, dfm, pas, pascal | ||
|| 54 | Diff | diff, patch | ||
|| 55 | Django | django, jinja | ||
|| 56 | DNS Zone file | dns, zone, bind | ||
|| 57 | Dockerfile | dockerfile, docker | ||
|| 58 | DOS | dos, bat, cmd | ||
|| 59 | dsconfig | dsconfig | ||
|| 60 | DTS (Device Tree) | dts | ||
|| 61 | Dust | dust, dst | ||
|| 62 | Dylan | dylan | ((https://github.com/highlightjs/highlightjs-dylan highlightjs-dylan)) ||
|| 63 | EBNF | ebnf | ||
|| 64 | Elixir | elixir | ||
|| 65 | Elm | elm | ||
|| 66 | Erlang | erlang, erl | ||
|| 67 | Excel | excel, xls, xlsx | ||
|| 68 | Extempore | extempore, xtlang, xtm | ((https://github.com/highlightjs/highlightjs-xtlang highlightjs-xtlang)) ||
|| 69 | F# | fsharp, fs | ||
|| 70 | FIX | fix | ||
|| 71 | Flix | flix | ((https://github.com/flix/highlightjs-flix highlightjs-flix)) ||
|| 72 | Fortran | fortran, f90, f95 | ||
|| 73 | FunC | func | ((https://github.com/highlightjs/highlightjs-func highlightjs-func)) ||
|| 74 | G-Code | gcode, nc | ||
|| 75 | Gams | gams, gms | ||
|| 76 | GAUSS | gauss, gss | ||
|| 77 | GDScript | godot, gdscript | ((https://github.com/highlightjs/highlightjs-gdscript highlightjs-gdscript)) ||
|| 78 | Gherkin | gherkin | ||
|| 79 | Glimmer and EmberJS | hbs, glimmer, html.hbs, html.handlebars, htmlbars | ((https://github.com/NullVoxPopuli/highlightjs-glimmer highlightjs-glimmer)) ||
|| 80 | GN for Ninja | gn, gni | ((https://github.com/highlightjs/highlightjs-GN highlightjs-GN)) ||
|| 81 | Go | go, golang | ||
|| 82 | Grammatical Framework | gf | ((https://github.com/johnjcamilleri/highlightjs-gf highlightjs-gf)) ||
|| 83 | Golo | golo, gololang | ||
|| 84 | Gradle | gradle | ||
|| 85 | GraphQL | graphql | ||
|| 86 | Groovy | groovy | ||
|| 87 | GSQL | gsql | ((https://github.com/DanBarkus/highlightjs-gsql highlightjs-gsql)) ||
|| 88 | HTML, XML | xml, html, xhtml, rss, atom, xjb, xsd, xsl, plist, svg | ||
|| 89 | HTTP | http, https | ||
|| 90 | Haml | haml | ||
|| 91 | Handlebars | handlebars, hbs, html.hbs, html.handlebars | ||
|| 92 | Haskell | haskell, hs | ||
|| 93 | Haxe | haxe, hx | ||
|| 94 | High-level shader language| hlsl | ((https://github.com/highlightjs/highlightjs-hlsl highlightjs-hlsl)) ||
|| 95 | Hy | hy, hylang | ||
|| 96 | Ini, TOML | ini, toml | ||
|| 97 | Inform7 | inform7, i7 | ||
|| 98 | IRPF90 | irpf90 | ||
|| 99 | JSON | json | ||
|| 100 | Java | java, jsp | ||
|| 101 | JavaScript | javascript, js, jsx | ||
|| 102 | Jolie | jolie, iol, ol | ((https://github.com/xiroV/highlightjs-jolie highlightjs-jolie)) ||
|| 103 | Julia | julia, julia-repl | ||
|| 104 | Kotlin | kotlin, kt | ||
|| 105 | LaTeX | tex | ||
|| 106 | Leaf | leaf | ||
|| 107 | Lean | lean | ((https://github.com/leanprover-community/highlightjs-lean highlightjs-lean)) ||
|| 108 | Lasso | lasso, ls, lassoscript | ||
|| 109 | Less | less | ||
|| 110 | LDIF | ldif | ||
|| 111 | Lisp | lisp | ||
|| 112 | LiveCode Server | livecodeserver | ||
|| 113 | LiveScript | livescript, ls | ||
|| 114 | LookML | lookml | ((https://github.com/spectacles-ci/highlightjs-lookml highlightjs-lookml)) ||
|| 115 | Lua | lua | ||
|| 116 | Macaulay2 | macaulay2 | ((https://github.com/d-torrance/highlightjs-macaulay2 highlightjs-macaulay2)) ||
|| 117 | Makefile | makefile, mk, mak, make | ||
|| 118 | Markdown | markdown, md, mkdown, mkd | ||
|| 119 | Mathematica | mathematica, mma, wl | ||
|| 120 | Matlab | matlab | ||
|| 121 | Maxima | maxima | ||
|| 122 | Maya Embedded Language | mel | ||
|| 123 | Mercury | mercury | ||
|| 124 | mIRC Scripting Language | mirc, mrc | ((https://github.com/highlightjs/highlightjs-mirc highlightjs-mirc)) ||
|| 125 | Mizar | mizar | ||
|| 126 | MKB | mkb | ((https://github.com/Dereavy/highlightjs-mkb highlightjs-mkb)) ||
|| 127 | MLIR | mlir | ((https://github.com/highlightjs/highlightjs-mlir highlightjs-mlir)) ||
|| 128 | Mojolicious | mojolicious | ||
|| 129 | Monkey | monkey | ||
|| 130 | Moonscript | moonscript, moon | ||
|| 131 | N1QL | n1ql | ||
|| 132 | NSIS | nsis | ||
|| 133 | Never | never | ((https://github.com/never-lang/highlightjs-never highlightjs-never)) ||
|| 134 | Nginx | nginx, nginxconf | ||
|| 135 | Nim | nim, nimrod | ||
|| 136 | Nix | nix | ||
|| 137 | Oak | oak | ((https://github.com/timlabs/highlightjs-oak highlightjs-oak)) ||
|| 138 | Object Constraint Language | ocl | ((https://github.com/nhomble/highlightjs-ocl highlightjs-ocl)) ||
|| 139 | OCaml | ocaml, ml | ||
|| 140 | Objective C | objectivec, mm, objc, obj-c, obj-c++, objective-c++ | ||
|| 141 | OpenGL Shading Language | glsl | ||
|| 142 | OpenSCAD | openscad, scad | ||
|| 143 | Oracle Rules Language | ruleslanguage | ||
|| 144 | Oxygene | oxygene | ||
|| 145 | PF | pf, pf.conf | ||
|| 146 | PHP | php | ||
|| 147 | Papyrus | papyrus, psc | ((https://github.com/Pickysaurus/highlightjs-papyrus highlightjs-papyrus)) ||
|| 148 | Parser3 | parser3 | ||
|| 149 | Perl | perl, pl, pm | ||
|| 150 | Pine Script | pine, pinescript | ((https://github.com/jeyllani/highlightjs-pine highlightjs-pine)) ||
|| 151 | Plaintext | plaintext, txt, text | ||
|| 152 | Pony | pony | ||
|| 153 | PostgreSQL & PL/pgSQL | pgsql, postgres, postgresql | ||
|| 154 | PowerShell | powershell, ps, ps1 | ||
|| 155 | Processing | processing | ||
|| 156 | Prolog | prolog | ||
|| 157 | Properties | properties | ||
|| 158 | Protocol Buffers | protobuf | ||
|| 159 | Puppet | puppet, pp | ||
|| 160 | Python | python, py, gyp | ||
|| 161 | Python profiler results | profile | ||
|| 162 | Python REPL | python-repl, pycon | ||
|| 163 | Q# | qsharp | ((https://github.com/fedonman/highlightjs-qsharp highlightjs-qsharp)) ||
|| 164 | Q | k, kdb | ||
|| 165 | QML | qml | ||
|| 166 | R | r | ||
|| 167 | Razor CSHTML | cshtml, razor, razor-cshtml | ((https://github.com/highlightjs/highlightjs-cshtml-razor highlightjs-cshtml-razor)) ||
|| 168 | ReasonML | reasonml, re | ||
|| 169 | Rebol & Red | redbol, rebol, red, red-system | ((https://github.com/oldes/highlightjs-redbol highlightjs-redbol)) ||
|| 170 | RenderMan RIB | rib | ||
|| 171 | RenderMan RSL | rsl | ||
|| 172 | RiScript | risc, riscript | ((https://github.com/highlightjs/highlightjs-riscript highlightjs-riscript)) ||
|| 173 | Roboconf | graph, instances | ||
|| 174 | Robot Framework | robot, rf | ((https://github.com/highlightjs/highlightjs-robot highlightjs-robot)) ||
|| 175 | RPM spec files | rpm-specfile, rpm, spec, rpm-spec, specfile | ((https://github.com/highlightjs/highlightjs-rpm-specfile highlightjs-rpm-specfile)) ||
|| 176 | Ruby | ruby, rb, gemspec, podspec, thor, irb | ||
|| 177 | Rust | rust, rs | ||
|| 178 | RVT Script | rvt, rvt-script | ((https://github.com/Sopitive/highlightjs-rvt-script highlightjs-rvt-script)) ||
|| 179 | SAS | SAS, sas | ||
|| 180 | SCSS | scss | ||
|| 181 | SQL | sql | ||
|| 182 | STEP Part 21 | p21, step, stp | ||
|| 183 | Scala | scala | ||
|| 184 | Scheme | scheme | ||
|| 185 | Scilab | scilab, sci | ||
|| 186 | Shape Expressions | shexc | ((https://github.com/highlightjs/highlightjs-shexc highlightjs-shexc)) ||
|| 187 | Shell | shell, console | ||
|| 188 | Smali | smali | ||
|| 189 | Smalltalk | smalltalk, st | ||
|| 190 | SML | sml, ml | ||
|| 191 | Solidity | solidity, sol | ((https://github.com/highlightjs/highlightjs-solidity highlightjs-solidity)) ||
|| 192 | Splunk SPL | spl | ((https://github.com/swsoyee/highlightjs-spl highlightjs-spl)) ||
|| 193 | Stan | stan, stanfuncs | ||
|| 194 | Stata | stata | ||
|| 195 | Structured Text | iecst, scl, stl, structured-text | ((https://github.com/highlightjs/highlightjs-structured-text highlightjs-structured-text)) ||
|| 196 | Stylus | stylus, styl | ||
|| 197 | SubUnit | subunit | ||
|| 198 | Supercollider | supercollider, sc | ((https://github.com/highlightjs/highlightjs-supercollider highlightjs-supercollider)) ||
|| 199 | Svelte | svelte | ((https://github.com/AlexxNB/highlightjs-svelte highlightjs-svelte)) ||
|| 200 | Swift | swift | ||
|| 201 | Tcl | tcl, tk | ||
|| 202 | Terraform (HCL) | terraform, tf, hcl | ((https://github.com/highlightjs/highlightjs-terraform highlightjs-terraform)) ||
|| 203 | Test Anything Protocol | tap | ||
|| 204 | Thrift | thrift | ||
|| 205 | Toit | toit | ((https://github.com/snxx-lppxx/toit-highlight toit-highlight)) ||
|| 206 | TP | tp | ||
|| 207 | Transact-SQL | tsql | ((https://github.com/highlightjs/highlightjs-tsql highlightjs-tsql)) ||
|| 208 | Twig | twig, craftcms | ||
|| 209 | TypeScript | typescript, ts, tsx | ||
|| 210 | Unicorn Rails log | unicorn-rails-log | ((https://github.com/sweetppro/highlightjs-unicorn-rails-log highlightjs-unicorn-rails-log)) ||
|| 211 | VB.Net | vbnet, vb | ||
|| 212 | VBA | vba | ((https://github.com/dullin/highlightjs-vba highlightjs-vba)) ||
|| 213 | VBScript | vbscript, vbs | ||
|| 214 | VHDL | vhdl | ||
|| 215 | Vala | vala | ||
|| 216 | Verilog | verilog, v | ||
|| 217 | Vim Script | vim | ||
|| 218 | X# | xsharp, xs, prg | ((https://github.com/InfomindsAg/highlightjs-xsharp highlightjs-xsharp)) ||
|| 219 | X++ | axapta, x++ | ||
|| 220 | x86 Assembly | x86asm | ||
|| 221 | XL | xl, tao | ||
|| 222 | XQuery | xquery, xpath, xq | ||
|| 223 | YAML | yml, yaml | ||
|| 224 | ZenScript | zenscript, zs | ((https://github.com/highlightjs/highlightjs-zenscript highlightjs-zenscript)) ||
|| 225 | Zephir | zephir, zep | ||
|#
===Basic Usage===
The bare minimum for using highlight.js on a web page is linking to the library along with one of the themes and calling ##[highlightAll][1]##:
``(hl html)
<link rel="stylesheet" href="/path/to/styles/default.min.css">
<script src="/path/to/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
``
This will find and highlight code inside of ##<pre><code>## tags; it tries to detect the language automatically. If automatic detection doesn’t work for you, or you simply prefer to be explicit, you can specify the language manually in the using the ##class## attribute:
``(hl html)
<pre><code class="language-html">...</code></pre>
``
====Plaintext Code Blocks====
To apply the Highlight.js styling to plaintext without actually highlighting it, use the ##plaintext## language:
``(hl html)
<pre><code class="language-plaintext">...</code></pre>
``
====Ignoring a Code Block====
To skip highlighting of a code block completely, use the ##nohighlight## class:
``(hl html)
<pre><code class="nohighlight">...</code></pre>
``
===Changelog===
0.1 Initial version
0.2
===ToDo===
* test formatter and settings
* improve code and documentation
{{backlinks}}