.comment can become .namespace--comment) or replace them with your defined ones (like .editor__comment). You can even add new classes.","owner":"dvkndn","noCSS":true},"file-highlight":{"title":"File Highlight","description":"Fetch external files and highlight them with Prism. Used on the Prism website itself.","noCSS":true},"show-language":{"title":"Show Language","description":"Display the highlighted language in code blocks (inline code does not show the label).","owner":"nauzilus","noCSS":true,"require":"toolbar"},"jsonp-highlight":{"title":"JSONP Highlight","description":"Fetch content with JSONP and highlight some interesting content (e.g. GitHub/Gists or Bitbucket API).","noCSS":true,"owner":"nauzilus"},"highlight-keywords":{"title":"Highlight Keywords","description":"Adds special CSS classes for each keyword matched in the code. For example, the keyword if will have the class keyword-if as well. You can have fine grained control over the appearance of each keyword by providing your own CSS rules.","owner":"vkbansal","noCSS":true},"remove-initial-line-feed":{"title":"Remove initial line feed","description":"Removes the initial line feed in code blocks.","owner":"Golmote","noCSS":true},"inline-color":{"title":"Inline color","description":"Adds a small inline preview for colors in style sheets.","require":"css-extras","owner":"RunDevelopment"},"previewers":{"title":"Previewers","description":"Previewers for angles, colors, gradients, easing and time.","require":"css-extras","owner":"Golmote"},"autoloader":{"title":"Autoloader","description":"Automatically loads the needed languages to highlight the code blocks.","owner":"Golmote","noCSS":true},"keep-markup":{"title":"Keep Markup","description":"Prevents custom markup from being dropped out during highlighting.","owner":"Golmote","optional":"normalize-whitespace","noCSS":true},"command-line":{"title":"Command Line","description":"Display a command line with a prompt and, optionally, the output/response from the commands.","owner":"chriswells0"},"unescaped-markup":{"title":"Unescaped Markup","description":"Write markup without having to escape anything."},"normalize-whitespace":{"title":"Normalize Whitespace","description":"Supports multiple operations to normalize whitespace in code blocks.","owner":"zeitgeist87","optional":"unescaped-markup","noCSS":true},"data-uri-highlight":{"title":"Data-URI Highlight","description":"Highlights data-URI contents.","owner":"Golmote","noCSS":true},"toolbar":{"title":"Toolbar","description":"Attach a toolbar for plugins to easily register buttons on the top of a code block.","owner":"mAAdhaTTah"},"copy-to-clipboard":{"title":"Copy to Clipboard Button","description":"Add a button that copies the code block to the clipboard when clicked.","owner":"mAAdhaTTah","require":"toolbar","noCSS":true},"download-button":{"title":"Download Button","description":"A button in the toolbar of a code block adding a convenient way to download a code file.","owner":"Golmote","require":"toolbar","noCSS":true},"match-braces":{"title":"Match braces","description":"Highlights matching braces.","owner":"RunDevelopment"},"diff-highlight":{"title":"Diff Highlight","description":"Highlights the code inside diff blocks.","owner":"RunDevelopment","require":"diff"},"filter-highlight-all":{"title":"Filter highlightAll","description":"Filters the elements the highlightAll and highlightAllUnder methods actually highlight.","owner":"RunDevelopment","noCSS":true},"treeview":{"title":"Treeview","description":"A language with special styles to highlight file system tree structures.","owner":"Golmote"}}};
+var components = {"core":{"meta":{"path":"components/prism-core.js","option":"mandatory"},"core":"Core"},"themes":{"meta":{"path":"themes/{id}.css","link":"index.html?theme={id}","exclusive":true},"prism":{"title":"Default","option":"default"},"prism-dark":"Dark","prism-funky":"Funky","prism-okaidia":{"title":"Okaidia","owner":"ocodia"},"prism-twilight":{"title":"Twilight","owner":"remybach"},"prism-coy":{"title":"Coy","owner":"tshedor"},"prism-solarizedlight":{"title":"Solarized Light","owner":"hectormatos2011 "},"prism-tomorrow":{"title":"Tomorrow Night","owner":"Rosey"}},"languages":{"meta":{"path":"components/prism-{id}","noCSS":true,"examplesPath":"examples/prism-{id}","addCheckAll":true},"markup":{"title":"Markup","alias":["html","xml","svg","mathml","ssml","atom","rss"],"aliasTitles":{"html":"HTML","xml":"XML","svg":"SVG","mathml":"MathML","ssml":"SSML","atom":"Atom","rss":"RSS"},"option":"default"},"css":{"title":"CSS","option":"default","modify":"markup"},"clike":{"title":"C-like","option":"default"},"javascript":{"title":"JavaScript","require":"clike","modify":"markup","optional":"regex","alias":"js","option":"default"},"abap":{"title":"ABAP","owner":"dellagustin"},"abnf":{"title":"ABNF","owner":"RunDevelopment"},"actionscript":{"title":"ActionScript","require":"javascript","modify":"markup","owner":"Golmote"},"ada":{"title":"Ada","owner":"Lucretia"},"agda":{"title":"Agda","owner":"xy-ren"},"al":{"title":"AL","owner":"RunDevelopment"},"antlr4":{"title":"ANTLR4","alias":"g4","owner":"RunDevelopment"},"apacheconf":{"title":"Apache Configuration","owner":"GuiTeK"},"apex":{"title":"Apex","require":["clike","sql"],"owner":"RunDevelopment"},"apl":{"title":"APL","owner":"ngn"},"applescript":{"title":"AppleScript","owner":"Golmote"},"aql":{"title":"AQL","owner":"RunDevelopment"},"arduino":{"title":"Arduino","require":"cpp","owner":"dkern"},"arff":{"title":"ARFF","owner":"Golmote"},"asciidoc":{"alias":"adoc","title":"AsciiDoc","owner":"Golmote"},"aspnet":{"title":"ASP.NET (C#)","require":["markup","csharp"],"owner":"nauzilus"},"asm6502":{"title":"6502 Assembly","owner":"kzurawel"},"autohotkey":{"title":"AutoHotkey","owner":"aviaryan"},"autoit":{"title":"AutoIt","owner":"Golmote"},"bash":{"title":"Bash","alias":"shell","aliasTitles":{"shell":"Shell"},"owner":"zeitgeist87"},"basic":{"title":"BASIC","owner":"Golmote"},"batch":{"title":"Batch","owner":"Golmote"},"bbcode":{"title":"BBcode","alias":"shortcode","aliasTitles":{"shortcode":"Shortcode"},"owner":"RunDevelopment"},"birb":{"title":"Birb","require":"clike","owner":"Calamity210"},"bison":{"title":"Bison","require":"c","owner":"Golmote"},"bnf":{"title":"BNF","alias":"rbnf","aliasTitles":{"rbnf":"RBNF"},"owner":"RunDevelopment"},"brainfuck":{"title":"Brainfuck","owner":"Golmote"},"brightscript":{"title":"BrightScript","owner":"RunDevelopment"},"bro":{"title":"Bro","owner":"wayward710"},"bsl":{"title":"BSL (1C:Enterprise)","alias":"oscript","aliasTitles":{"oscript":"OneScript"},"owner":"Diversus23"},"c":{"title":"C","require":"clike","owner":"zeitgeist87"},"csharp":{"title":"C#","require":"clike","alias":["cs","dotnet"],"owner":"mvalipour"},"cpp":{"title":"C++","require":"c","owner":"zeitgeist87"},"cil":{"title":"CIL","owner":"sbrl"},"clojure":{"title":"Clojure","owner":"troglotit"},"cmake":{"title":"CMake","owner":"mjrogozinski"},"coffeescript":{"title":"CoffeeScript","require":"javascript","alias":"coffee","owner":"R-osey"},"concurnas":{"title":"Concurnas","alias":"conc","owner":"jasontatton"},"csp":{"title":"Content-Security-Policy","owner":"ScottHelme"},"crystal":{"title":"Crystal","require":"ruby","owner":"MakeNowJust"},"css-extras":{"title":"CSS Extras","require":"css","modify":"css","owner":"milesj"},"cypher":{"title":"Cypher","owner":"RunDevelopment"},"d":{"title":"D","require":"clike","owner":"Golmote"},"dart":{"title":"Dart","require":"clike","owner":"Golmote"},"dataweave":{"title":"DataWeave","owner":"machaval"},"dax":{"title":"DAX","owner":"peterbud"},"dhall":{"title":"Dhall","owner":"RunDevelopment"},"diff":{"title":"Diff","owner":"uranusjr"},"django":{"title":"Django/Jinja2","require":"markup-templating","alias":"jinja2","owner":"romanvm"},"dns-zone-file":{"title":"DNS zone file","owner":"RunDevelopment","alias":"dns-zone"},"docker":{"title":"Docker","alias":"dockerfile","owner":"JustinBeckwith"},"ebnf":{"title":"EBNF","owner":"RunDevelopment"},"editorconfig":{"title":"EditorConfig","owner":"osipxd"},"eiffel":{"title":"Eiffel","owner":"Conaclos"},"ejs":{"title":"EJS","require":["javascript","markup-templating"],"owner":"RunDevelopment","alias":"eta","aliasTitles":{"eta":"Eta"}},"elixir":{"title":"Elixir","owner":"Golmote"},"elm":{"title":"Elm","owner":"zwilias"},"etlua":{"title":"Embedded Lua templating","require":["lua","markup-templating"],"owner":"RunDevelopment"},"erb":{"title":"ERB","require":["ruby","markup-templating"],"owner":"Golmote"},"erlang":{"title":"Erlang","owner":"Golmote"},"excel-formula":{"title":"Excel Formula","alias":["xlsx","xls"],"owner":"RunDevelopment"},"fsharp":{"title":"F#","require":"clike","owner":"simonreynolds7"},"factor":{"title":"Factor","owner":"catb0t"},"firestore-security-rules":{"title":"Firestore security rules","require":"clike","owner":"RunDevelopment"},"flow":{"title":"Flow","require":"javascript","owner":"Golmote"},"fortran":{"title":"Fortran","owner":"Golmote"},"ftl":{"title":"FreeMarker Template Language","require":"markup-templating","owner":"RunDevelopment"},"gml":{"title":"GameMaker Language","alias":"gamemakerlanguage","require":"clike","owner":"LiarOnce"},"gcode":{"title":"G-code","owner":"RunDevelopment"},"gdscript":{"title":"GDScript","owner":"RunDevelopment"},"gedcom":{"title":"GEDCOM","owner":"Golmote"},"gherkin":{"title":"Gherkin","owner":"hason"},"git":{"title":"Git","owner":"lgiraudel"},"glsl":{"title":"GLSL","require":"c","owner":"Golmote"},"go":{"title":"Go","require":"clike","owner":"arnehormann"},"graphql":{"title":"GraphQL","optional":["markdown"],"owner":"Golmote"},"groovy":{"title":"Groovy","require":"clike","owner":"robfletcher"},"haml":{"title":"Haml","require":"ruby","optional":["css","css-extras","coffeescript","erb","javascript","less","markdown","scss","textile"],"owner":"Golmote"},"handlebars":{"title":"Handlebars","require":"markup-templating","owner":"Golmote"},"haskell":{"title":"Haskell","alias":"hs","owner":"bholst"},"haxe":{"title":"Haxe","require":"clike","owner":"Golmote"},"hcl":{"title":"HCL","owner":"outsideris"},"hlsl":{"title":"HLSL","require":"c","owner":"RunDevelopment"},"http":{"title":"HTTP","optional":["css","javascript","json","markup"],"owner":"danielgtaylor"},"hpkp":{"title":"HTTP Public-Key-Pins","owner":"ScottHelme"},"hsts":{"title":"HTTP Strict-Transport-Security","owner":"ScottHelme"},"ichigojam":{"title":"IchigoJam","owner":"BlueCocoa"},"icon":{"title":"Icon","owner":"Golmote"},"ignore":{"title":".ignore","owner":"osipxd","alias":["gitignore","hgignore","npmignore"],"aliasTitles":{"gitignore":".gitignore","hgignore":".hgignore","npmignore":".npmignore"}},"inform7":{"title":"Inform 7","owner":"Golmote"},"ini":{"title":"Ini","owner":"aviaryan"},"io":{"title":"Io","owner":"AlesTsurko"},"j":{"title":"J","owner":"Golmote"},"java":{"title":"Java","require":"clike","owner":"sherblot"},"javadoc":{"title":"JavaDoc","require":["markup","java","javadoclike"],"modify":"java","optional":"scala","owner":"RunDevelopment"},"javadoclike":{"title":"JavaDoc-like","modify":["java","javascript","php"],"owner":"RunDevelopment"},"javastacktrace":{"title":"Java stack trace","owner":"RunDevelopment"},"jolie":{"title":"Jolie","require":"clike","owner":"thesave"},"jq":{"title":"JQ","owner":"RunDevelopment"},"jsdoc":{"title":"JSDoc","require":["javascript","javadoclike","typescript"],"modify":"javascript","optional":["actionscript","coffeescript"],"owner":"RunDevelopment"},"js-extras":{"title":"JS Extras","require":"javascript","modify":"javascript","optional":["actionscript","coffeescript","flow","n4js","typescript"],"owner":"RunDevelopment"},"json":{"title":"JSON","alias":"webmanifest","aliasTitles":{"webmanifest":"Web App Manifest"},"owner":"CupOfTea696"},"json5":{"title":"JSON5","require":"json","owner":"RunDevelopment"},"jsonp":{"title":"JSONP","require":"json","owner":"RunDevelopment"},"jsstacktrace":{"title":"JS stack trace","owner":"sbrl"},"js-templates":{"title":"JS Templates","require":"javascript","modify":"javascript","optional":["css","css-extras","graphql","markdown","markup"],"owner":"RunDevelopment"},"julia":{"title":"Julia","owner":"cdagnino"},"keyman":{"title":"Keyman","owner":"mcdurdin"},"kotlin":{"title":"Kotlin","alias":["kt","kts"],"aliasTitles":{"kts":"Kotlin Script"},"require":"clike","owner":"Golmote"},"latex":{"title":"LaTeX","alias":["tex","context"],"aliasTitles":{"tex":"TeX","context":"ConTeXt"},"owner":"japborst"},"latte":{"title":"Latte","require":["clike","markup-templating","php"],"owner":"nette"},"less":{"title":"Less","require":"css","optional":"css-extras","owner":"Golmote"},"lilypond":{"title":"LilyPond","require":"scheme","alias":"ly","owner":"RunDevelopment"},"liquid":{"title":"Liquid","owner":"cinhtau"},"lisp":{"title":"Lisp","alias":["emacs","elisp","emacs-lisp"],"owner":"JuanCaicedo"},"livescript":{"title":"LiveScript","owner":"Golmote"},"llvm":{"title":"LLVM IR","owner":"porglezomp"},"lolcode":{"title":"LOLCODE","owner":"Golmote"},"lua":{"title":"Lua","owner":"Golmote"},"makefile":{"title":"Makefile","owner":"Golmote"},"markdown":{"title":"Markdown","require":"markup","optional":"yaml","alias":"md","owner":"Golmote"},"markup-templating":{"title":"Markup templating","require":"markup","owner":"Golmote"},"matlab":{"title":"MATLAB","owner":"Golmote"},"mel":{"title":"MEL","owner":"Golmote"},"mizar":{"title":"Mizar","owner":"Golmote"},"mongodb":{"title":"MongoDB","owner":"airs0urce","require":"javascript"},"monkey":{"title":"Monkey","owner":"Golmote"},"moonscript":{"title":"MoonScript","alias":"moon","owner":"RunDevelopment"},"n1ql":{"title":"N1QL","owner":"TMWilds"},"n4js":{"title":"N4JS","require":"javascript","optional":"jsdoc","alias":"n4jsd","owner":"bsmith-n4"},"nand2tetris-hdl":{"title":"Nand To Tetris HDL","owner":"stephanmax"},"naniscript":{"title":"Naninovel Script","owner":"Elringus","alias":"nani"},"nasm":{"title":"NASM","owner":"rbmj"},"neon":{"title":"NEON","owner":"nette"},"nginx":{"title":"nginx","owner":"westonganger","require":"clike"},"nim":{"title":"Nim","owner":"Golmote"},"nix":{"title":"Nix","owner":"Golmote"},"nsis":{"title":"NSIS","owner":"idleberg"},"objectivec":{"title":"Objective-C","require":"c","alias":"objc","owner":"uranusjr"},"ocaml":{"title":"OCaml","owner":"Golmote"},"opencl":{"title":"OpenCL","require":"c","modify":["c","cpp"],"owner":"Milania1"},"oz":{"title":"Oz","owner":"Golmote"},"parigp":{"title":"PARI/GP","owner":"Golmote"},"parser":{"title":"Parser","require":"markup","owner":"Golmote"},"pascal":{"title":"Pascal","alias":"objectpascal","aliasTitles":{"objectpascal":"Object Pascal"},"owner":"Golmote"},"pascaligo":{"title":"Pascaligo","owner":"DefinitelyNotAGoat"},"pcaxis":{"title":"PC-Axis","alias":"px","owner":"RunDevelopment"},"peoplecode":{"title":"PeopleCode","alias":"pcode","owner":"RunDevelopment"},"perl":{"title":"Perl","owner":"Golmote"},"php":{"title":"PHP","require":"markup-templating","owner":"milesj"},"phpdoc":{"title":"PHPDoc","require":["php","javadoclike"],"modify":"php","owner":"RunDevelopment"},"php-extras":{"title":"PHP Extras","require":"php","modify":"php","owner":"milesj"},"plsql":{"title":"PL/SQL","require":"sql","owner":"Golmote"},"powerquery":{"title":"PowerQuery","alias":["pq","mscript"],"owner":"peterbud"},"powershell":{"title":"PowerShell","owner":"nauzilus"},"processing":{"title":"Processing","require":"clike","owner":"Golmote"},"prolog":{"title":"Prolog","owner":"Golmote"},"promql":{"title":"PromQL","owner":"arendjr"},"properties":{"title":".properties","owner":"Golmote"},"protobuf":{"title":"Protocol Buffers","require":"clike","owner":"just-boris"},"pug":{"title":"Pug","require":["markup","javascript"],"optional":["coffeescript","ejs","handlebars","less","livescript","markdown","scss","stylus","twig"],"owner":"Golmote"},"puppet":{"title":"Puppet","owner":"Golmote"},"pure":{"title":"Pure","optional":["c","cpp","fortran"],"owner":"Golmote"},"purebasic":{"title":"PureBasic","require":"clike","alias":"pbfasm","owner":"HeX0R101"},"purescript":{"title":"PureScript","require":"haskell","alias":"purs","owner":"sriharshachilakapati"},"python":{"title":"Python","alias":"py","owner":"multipetros"},"q":{"title":"Q (kdb+ database)","owner":"Golmote"},"qml":{"title":"QML","require":"javascript","owner":"RunDevelopment"},"qore":{"title":"Qore","require":"clike","owner":"temnroegg"},"r":{"title":"R","owner":"Golmote"},"racket":{"title":"Racket","require":"scheme","alias":"rkt","owner":"RunDevelopment"},"jsx":{"title":"React JSX","require":["markup","javascript"],"optional":["jsdoc","js-extras","js-templates"],"owner":"vkbansal"},"tsx":{"title":"React TSX","require":["jsx","typescript"]},"reason":{"title":"Reason","require":"clike","owner":"Golmote"},"regex":{"title":"Regex","owner":"RunDevelopment"},"renpy":{"title":"Ren'py","alias":"rpy","owner":"HyuchiaDiego"},"rest":{"title":"reST (reStructuredText)","owner":"Golmote"},"rip":{"title":"Rip","owner":"ravinggenius"},"roboconf":{"title":"Roboconf","owner":"Golmote"},"robotframework":{"title":"Robot Framework","alias":"robot","owner":"RunDevelopment"},"ruby":{"title":"Ruby","require":"clike","alias":"rb","owner":"samflores"},"rust":{"title":"Rust","owner":"Golmote"},"sas":{"title":"SAS","optional":["groovy","lua","sql"],"owner":"Golmote"},"sass":{"title":"Sass (Sass)","require":"css","owner":"Golmote"},"scss":{"title":"Sass (Scss)","require":"css","optional":"css-extras","owner":"MoOx"},"scala":{"title":"Scala","require":"java","owner":"jozic"},"scheme":{"title":"Scheme","owner":"bacchus123"},"shell-session":{"title":"Shell session","require":"bash","alias":["sh-session","shellsession"],"owner":"RunDevelopment"},"smali":{"title":"Smali","owner":"RunDevelopment"},"smalltalk":{"title":"Smalltalk","owner":"Golmote"},"smarty":{"title":"Smarty","require":"markup-templating","owner":"Golmote"},"sml":{"title":"SML","alias":"smlnj","aliasTitles":{"smlnj":"SML/NJ"},"owner":"RunDevelopment"},"solidity":{"title":"Solidity (Ethereum)","alias":"sol","require":"clike","owner":"glachaud"},"solution-file":{"title":"Solution file","alias":"sln","owner":"RunDevelopment"},"soy":{"title":"Soy (Closure Template)","require":"markup-templating","owner":"Golmote"},"sparql":{"title":"SPARQL","require":"turtle","owner":"Triply-Dev","alias":"rq"},"splunk-spl":{"title":"Splunk SPL","owner":"RunDevelopment"},"sqf":{"title":"SQF: Status Quo Function (Arma 3)","require":"clike","owner":"RunDevelopment"},"sql":{"title":"SQL","owner":"multipetros"},"stan":{"title":"Stan","owner":"RunDevelopment"},"iecst":{"title":"Structured Text (IEC 61131-3)","owner":"serhioromano"},"stylus":{"title":"Stylus","owner":"vkbansal"},"swift":{"title":"Swift","require":"clike","owner":"chrischares"},"t4-templating":{"title":"T4 templating","owner":"RunDevelopment"},"t4-cs":{"title":"T4 Text Templates (C#)","require":["t4-templating","csharp"],"alias":"t4","owner":"RunDevelopment"},"t4-vb":{"title":"T4 Text Templates (VB)","require":["t4-templating","vbnet"],"owner":"RunDevelopment"},"tap":{"title":"TAP","owner":"isaacs","require":"yaml"},"tcl":{"title":"Tcl","owner":"PeterChaplin"},"tt2":{"title":"Template Toolkit 2","require":["clike","markup-templating"],"owner":"gflohr"},"textile":{"title":"Textile","require":"markup","optional":"css","owner":"Golmote"},"toml":{"title":"TOML","owner":"RunDevelopment"},"turtle":{"title":"Turtle","alias":"trig","aliasTitles":{"trig":"TriG"},"owner":"jakubklimek"},"twig":{"title":"Twig","require":"markup","owner":"brandonkelly"},"typescript":{"title":"TypeScript","require":"javascript","optional":"js-templates","alias":"ts","owner":"vkbansal"},"typoscript":{"title":"TypoScript","alias":"tsconfig","aliasTitles":{"tsconfig":"TSConfig"},"owner":"dkern"},"unrealscript":{"title":"UnrealScript","alias":["uscript","uc"],"owner":"RunDevelopment"},"vala":{"title":"Vala","require":"clike","optional":"regex","owner":"TemplarVolk"},"vbnet":{"title":"VB.Net","require":"basic","owner":"Bigsby"},"velocity":{"title":"Velocity","require":"markup","owner":"Golmote"},"verilog":{"title":"Verilog","owner":"a-rey"},"vhdl":{"title":"VHDL","owner":"a-rey"},"vim":{"title":"vim","owner":"westonganger"},"visual-basic":{"title":"Visual Basic","alias":["vb","vba"],"aliasTitles":{"vba":"VBA"},"owner":"Golmote"},"warpscript":{"title":"WarpScript","owner":"RunDevelopment"},"wasm":{"title":"WebAssembly","owner":"Golmote"},"wiki":{"title":"Wiki markup","require":"markup","owner":"Golmote"},"xeora":{"title":"Xeora","require":"markup","alias":"xeoracube","aliasTitles":{"xeoracube":"XeoraCube"},"owner":"freakmaxi"},"xml-doc":{"title":"XML doc (.net)","require":"markup","modify":["csharp","fsharp","vbnet"],"owner":"RunDevelopment"},"xojo":{"title":"Xojo (REALbasic)","owner":"Golmote"},"xquery":{"title":"XQuery","require":"markup","owner":"Golmote"},"yaml":{"title":"YAML","alias":"yml","owner":"hason"},"yang":{"title":"YANG","owner":"RunDevelopment"},"zig":{"title":"Zig","owner":"RunDevelopment"}},"plugins":{"meta":{"path":"plugins/{id}/prism-{id}","link":"plugins/{id}/"},"line-highlight":{"title":"Line Highlight","description":"Highlights specific lines and/or line ranges."},"line-numbers":{"title":"Line Numbers","description":"Line number at the beginning of code lines.","owner":"kuba-kubula"},"lines":{"title":"Lines","description":"Creates a wrapper element for every line.","owner":"galaxy4public","noCSS":true},"show-invisibles":{"title":"Show Invisibles","description":"Show hidden characters such as tabs and line breaks.","optional":["autolinker","data-uri-highlight"]},"autolinker":{"title":"Autolinker","description":"Converts URLs and emails in code to clickable links. Parses Markdown links in comments."},"wpd":{"title":"WebPlatform Docs","description":"Makes tokens link to WebPlatform.org documentation. The links open in a new tab."},"custom-class":{"title":"Custom Class","description":"This plugin allows you to prefix Prism's default classes (.comment can become .namespace--comment) or replace them with your defined ones (like .editor__comment). You can even add new classes.","owner":"dvkndn","noCSS":true},"file-highlight":{"title":"File Highlight","description":"Fetch external files and highlight them with Prism. Used on the Prism website itself.","noCSS":true},"show-language":{"title":"Show Language","description":"Display the highlighted language in code blocks (inline code does not show the label).","owner":"nauzilus","noCSS":true,"require":"toolbar"},"jsonp-highlight":{"title":"JSONP Highlight","description":"Fetch content with JSONP and highlight some interesting content (e.g. GitHub/Gists or Bitbucket API).","noCSS":true,"owner":"nauzilus"},"highlight-keywords":{"title":"Highlight Keywords","description":"Adds special CSS classes for each keyword matched in the code. For example, the keyword if will have the class keyword-if as well. You can have fine grained control over the appearance of each keyword by providing your own CSS rules.","owner":"vkbansal","noCSS":true},"remove-initial-line-feed":{"title":"Remove initial line feed","description":"Removes the initial line feed in code blocks.","owner":"Golmote","noCSS":true},"inline-color":{"title":"Inline color","description":"Adds a small inline preview for colors in style sheets.","require":"css-extras","owner":"RunDevelopment"},"previewers":{"title":"Previewers","description":"Previewers for angles, colors, gradients, easing and time.","require":"css-extras","owner":"Golmote"},"autoloader":{"title":"Autoloader","description":"Automatically loads the needed languages to highlight the code blocks.","owner":"Golmote","noCSS":true},"keep-markup":{"title":"Keep Markup","description":"Prevents custom markup from being dropped out during highlighting.","owner":"Golmote","optional":"normalize-whitespace","noCSS":true},"command-line":{"title":"Command Line","description":"Display a command line with a prompt and, optionally, the output/response from the commands.","owner":"chriswells0"},"unescaped-markup":{"title":"Unescaped Markup","description":"Write markup without having to escape anything."},"normalize-whitespace":{"title":"Normalize Whitespace","description":"Supports multiple operations to normalize whitespace in code blocks.","owner":"zeitgeist87","optional":"unescaped-markup","noCSS":true},"data-uri-highlight":{"title":"Data-URI Highlight","description":"Highlights data-URI contents.","owner":"Golmote","noCSS":true},"toolbar":{"title":"Toolbar","description":"Attach a toolbar for plugins to easily register buttons on the top of a code block.","owner":"mAAdhaTTah"},"copy-to-clipboard":{"title":"Copy to Clipboard Button","description":"Add a button that copies the code block to the clipboard when clicked.","owner":"mAAdhaTTah","require":"toolbar","noCSS":true},"download-button":{"title":"Download Button","description":"A button in the toolbar of a code block adding a convenient way to download a code file.","owner":"Golmote","require":"toolbar","noCSS":true},"match-braces":{"title":"Match braces","description":"Highlights matching braces.","owner":"RunDevelopment"},"diff-highlight":{"title":"Diff Highlight","description":"Highlights the code inside diff blocks.","owner":"RunDevelopment","require":"diff"},"filter-highlight-all":{"title":"Filter highlightAll","description":"Filters the elements the highlightAll and highlightAllUnder methods actually highlight.","owner":"RunDevelopment","noCSS":true},"treeview":{"title":"Treeview","description":"A language with special styles to highlight file system tree structures.","owner":"Golmote"}}};
if (typeof module !== 'undefined' && module.exports) { module.exports = components; }
\ No newline at end of file
diff --git a/components.json b/components.json
index e2e9845a97..8eef5f57be 100644
--- a/components.json
+++ b/components.json
@@ -1300,6 +1300,12 @@
"description": "Line number at the beginning of code lines.",
"owner": "kuba-kubula"
},
+ "lines": {
+ "title": "Lines",
+ "description": "Creates a wrapper element for every line.",
+ "owner": "galaxy4public",
+ "noCSS": true
+ },
"show-invisibles": {
"title": "Show Invisibles",
"description": "Show hidden characters such as tabs and line breaks.",
diff --git a/plugins/lines/index.html b/plugins/lines/index.html
new file mode 100644
index 0000000000..213b632b27
--- /dev/null
+++ b/plugins/lines/index.html
@@ -0,0 +1,272 @@
+
+
+
+
+
+
+This plugin is designed to work only for code blocks (<pre><code>) and not for inline code.
The primary functionality of the plugin does not require any configuration or additional classes or attributes, however to get the most of it you will need to provide additional CSS rules to dress things up.
+To keep the plugin as non-intrusive as possible the only extra CSS rules that are provided with the plugin are to introduce a wrapped line marker on the left side of the code block. See Examples on how disable this or change its behaviour. +
This plugin wraps each physical line of the multi-line code block with <div class="line"><a></a>...</div>, which allows to style the result quite extensively using only CSS.
The stylesheet provided with the plugin uses one pseudo-element (div.line::after) to display a visual marker for the wrapped lines. The examples below are also leveraging another pseudo element (div.line > a::before), which leaves two more pseudo-elements for you to style.
Using just this plugin one can mimic the Line Numbers plugin output by adding the line-numbers class to your desired <pre> or any of its ancestors, and by updating your CSS rules to include something along the following lines:
+
+
/* Visually backward compatible replacement of the line-numbers plugin :) */
+.line-numbers pre[class*="language-"],
+pre[class*="language-"].line-numbers {
+ counter-reset: linenumber;
+ counter-reset: linenumber var(--counter-start,0);
+ padding-left: 0;
+}
+
+.line-numbers pre[class*="language-"] > code,
+pre[class*="language-"].line-numbers > code {
+ padding-left: 3.8em;
+}
+
+.line-numbers pre[class*="language-"] div.line > a::before,
+pre[class*="language-"].line-numbers div.line > a::before {
+ content: counter(linenumber);
+ counter-increment: linenumber;
+ color: #999;
+ text-indent: 0;
+ text-align: right;
+ box-sizing: border-box;
+ left: -3.8em; /* make it -4.6em if your box-sizing is content-box */
+ display: block;
+ position: absolute;
+ width: 3em;
+ height: 100%;
+ padding-right: 0.8em;
+ border-right: solid #999;
+}... and the browser will take care of the rest. To give all code blocks line numbers, add the line-numbers class to the <body> of the page.
Optional: You can specify the data-start (Number) attribute on the <pre> element. It will shift the line counter (if you are using the above CSS example).
Optional: To support multiline line numbers using soft wrap, apply the CSS white-space: pre-line; or white-space: pre-wrap; to your desired <pre>.
Optional: There is a rudimentary support for line highlighting and active line numbers, please see the corresponding examples below. +
Please note that this <pre> does not have the line-numbers class but its parent does.
Please note the data-start="-5" in the code below.
Please note the style="white-space:pre-wrap;" in the code below and how it affects the wrapped lines.
Please note the how the following style: +
#demo1 div.line:nth-of-type(3) {
+background: yellow;
+}This raw text
+is not highlighted
+but it still has
+lines wrapped in <div>s, so we could benefit from the support this plugin provides such as nice visual line wrapping and the ability to select lines using CSS rules.
+
+The long and the following blank lines are here to demonstrate the wrapping of the long line.A similar example but without Lines support (please note how plugin was selectively disabled for a particular block using the nolines class:
This raw text
+is not highlighted
+and it was explicitly
+excluded from being processed through the Lines plugin. The rendering of this block is exactly the same as if no Lines plugin was present. You may notice that the wrapping still happens due to the associated CSS class, though, yet it is hard to understand which line was wrapped and which was not.
+
+The long and the following blank lines are here to demonstrate the wrapping of the long line.The location and presentation of the line wrap indicator can be easily customised by adjusting the div.line::after pseudo-element using CSS. For example, to relocate the indicator to the right side one could come up with something similar to the following stylesheet:
pre[class*="language-"] div.line {
+ padding-left: 0;
+ text-indent: 0;
+}
+
+pre[class*="language-"] div.line::after {
+ right: -1em;
+ bottom: 0;
+ left: auto;
+ top: auto;
+ width: 1.5em;
+ transform: none;
+}The result of the applying the above style to a code block can be observed below:
+ +This raw text
+ has a very long line to demonstrate the relocation of the line wrapping indicator from the default left side to the right side of the block. It is just showcases what is possible when you have semantic representation of lines inside your <pre> blocks.
+
+ The empty line above is there for the demonstration purposes.The indicator can be completely disabled by setting the display: none CSS property for the div.line::after pseudo-element, e.g. with the following stylesheet:
pre[class*="language-"] div.line::after {
+ display: none;
+}
+
+pre[class*="language-"] div.line {
+ padding-left: 0;
+ text-indent: 0;
+}
+
+#demo3 div.line:nth-of-type(2) {
+ background: yellow;
+}To demonstrate that the Lines plugin still did its work the highlighting of the second line was added to the above stylesheet. The resulting rendering of a block looks as follows: + +
This raw text
+demonstrates that the line wrapping indicator can be completely disabled and you will get the same experience as like no Lines plugin was there.
+
+However, as you can see above, the lines are still semantically represented and are addressable using CSS.There is a basic support for active line numbers, i.e. when the user clicks on the line number (if the line numbers are displayed) and the location bar is updated with the hash fragment corresponding to the line clicked.
+The Lines plugin provides bare minimum to support the active line numbers, the user still need to do some preparation work. Following are conditions for working with the active line numbers in the Lines plugin: +
id attribute of the enclosing <pre> element;<div><a>...</div></a> each <div> is assigned an id which is a composition of <pre>'s id and the corresponding line number joined by .;This means that without any additional configuration the Lines plugin provides a rudimentary support for linking lines and code blocks (e.g. this mimics what the Line Highlight plugin does with the linkable-line-numbers option)
However, the problem with that approach is that when somebody is following such a URL that points to a very deeply burrowed code block on a large page, chances are that PrismJS won't be able to modify the DOM tree in time to let the browser "see" the target.
+One way of addressing the issue would be to pre-generate the structure inside the codeblock, so it is stable from the browser perspective, i.e. wrap all physical lines with <div><a> as the Lines plugin does and ensure that the ids are properly assigned to the <divs.
+
Below is a non-working(*) demonstration of the active line numbers functionality, it uses the example stylesheet that was presented at the start of this page. You still can reference a line using a fragment (e.g. clicking this will point you to line 3), but since the page is using <base href="../.." /> one can forget of using fragments without page reloads.
The following style rules were added to make the experience a bit more pleasant:
+.line-numbers pre[class*="language-"][id] div.line > a::before,
+pre[class*="language-"][id].line-numbers div.line > a::before {
+ cursor: pointer;
+ pointer-events: auto;
+}
+
+.line-numbers pre[class*="language-"][id] div.line > a:hover::before,
+pre[class*="language-"][id].line-numbers div.line > a:hover::before {
+ color: black;
+ background: rgba(0,0,0,.1);
+}
+
+/* add visual assist for demo purposes */
+#demo4 *:target {
+ background-color: #0000ff24;
+}All this combined renders as follows:
+ This is a demo code block to demonstrate the basic active line numbering functionality of the Lines plugin.
+ wrapped inside (not inline)
+
+ var pre = /** @type {HTMLPreElement} */ (env.element.parentNode);
+ if (!pre || !/^pre$/i.test(pre.nodeName)) {
+ return;
+ }
+
+ // prepare the registration hook
+ /** @type {LinesListener[]} */
+ var listeners = [];
+ Prism.hooks.run('lines-register', /** @type {RegisterHookEnv} */({
+ pre: pre,
+ env: env,
+ listeners: listeners
+ }));
+
+ if (!listeners.length) {
+ // no plugin needs line wrappers, so we don't add any
+ return;
+ }
+
+ /**
+ * @param {T} event
+ * @param {Envs[T]} env
+ * @template {keyof Envs} T
+ */
+ function fire(event, env) {
+ for (var listener, i = 0; listener = listeners[i++];) {
+ var fn = listener[event];
+ if (fn) {
+ fn(/** @type {any} */(env));
+ }
+ }
+ }
+
+ fire('onBefore', {
+ pre: pre,
+ env: env
+ });
+
+ var dom = parser.parseFromString(env.highlightedCode, 'text/html');
+ /** @type {readonly Node[]} */
+ var domNodes = drainChildNodes(dom.body);
+ var wrapper = dom.createElement('div');
+
+ /**
+ * @param {Node[]} childNodes
+ */
+ function addLine(childNodes) {
+ var line = dom.createElement('div');
+ line.className = 'prism-line';
+
+ fire('onNewLine', {
+ pre: pre,
+ env: env,
+ line: line,
+ childNodes: childNodes
+ });
+
+ line.append.apply(line, childNodes);
+ wrapper.append(line);
+ }
+
+ var lineNodes = [];
+
+ // This outer loop will go through all nodes in the DOM in order.
+ // This can be thought of as iterating over all top-level tokens.
+ for (var i = 0, l = domNodes.length; i < l; i++) {
+ /** @type {Node | undefined} */
+ var currentNode = domNodes[i];
+
+ // The inner loop will process the current node. The current node may be split any number of times and the
+ // split result also has to be processed.
+ while (currentNode) {
+ var res = splitNode(currentNode);
+ lineNodes.push(currentNode);
+
+ if (res.newline) {
+ // the returned node contains a newline, so we have to create a new line
+ addLine(lineNodes);
+ lineNodes.length = 0;
+
+ // the node was split and there is still some part of it left to precess
+ currentNode = res.rest;
+
+ } else {
+ // the current node doesn't contain a newline, so we just append it to the current line and
+ // process the next node.
+ break;
+ }
+ }
+ }
+
+ if (lineNodes.length > 0) {
+ addLine(lineNodes);
+ }
+
+ fire('onComplete', {
+ pre: pre,
+ env: env,
+ lines: wrapper
+ });
+
+ env.highlightedCode = wrapper.innerHTML;
+ });
+
+}());
diff --git a/plugins/lines/prism-lines.min.js b/plugins/lines/prism-lines.min.js
new file mode 100644
index 0000000000..e54e6c2c0a
--- /dev/null
+++ b/plugins/lines/prism-lines.min.js
@@ -0,0 +1 @@
+!function(){if("undefined"!=typeof self&&self.Prism&&self.document){var s={},d={newline:!0},v=new DOMParser;Prism.hooks.add("before-insert",function(r){var t=r.element.parentNode;if(t&&/^pre$/i.test(t.nodeName)){var o=[];if(Prism.hooks.run("lines-register",{pre:t,env:r,listeners:o}),o.length){h("onBefore",{pre:t,env:r});for(var i=v.parseFromString(r.highlightedCode,"text/html"),e=function(e){for(var n,r=[];n=e.firstChild;)r.push(n),e.removeChild(n);return r}(i.body),l=i.createElement("div"),n=[],a=0,s=e.length;a {
+ // register a noop listener to active the Lines plugin
+ env.listeners.push({});
+ });
+
+ function highlightedMarkup(text, language) {
+ const pre = document.createElement('pre');
+ pre.className = `language-${language}`;
+ const code = pre.appendChild(document.createElement('code'));
+ code.textContent = text;
+
+ Prism.highlightElement(code);
+
+ return code.innerHTML;
+ }
+
+ function processMarkup(markup, language) {
+ const pre = document.createElement('pre');
+ pre.className = `language-${language}`;
+ const code = pre.appendChild(document.createElement('code'));
+ code.className = `language-${language}`;
+
+ const env = {
+ element: code,
+ highlightedCode: markup
+ };
+
+ Prism.hooks.run('before-insert', env);
+
+ return env.highlightedCode;
+ }
+
+ it('- should split lines correctly', function () {
+ assert.equal(highlightedMarkup(`/* a \n b */`, 'javascript'), [
+ '/* a \n',
+ ' b */'
+ ].join(''));
+
+ assert.equal(highlightedMarkup(`var\n/* a \n b */\nbar\n=\n\n0;`, 'javascript'), [
+ 'var\n',
+ '/* a \n',
+ ' b */\n',
+ 'bar\n',
+ '=\n',
+ '\n',
+ '0;'
+ ].join(''));
+
+
+ assert.equal(processMarkup(`foo\nfoofoo\nfoo `, 'javascript'), [
+ 'foo\n',
+ 'foofoo\n ',
+ 'foo '
+ ].join(''));
+ });
+
+ it('- should handle zero-width elements correctly', function () {
+ assert.equal(processMarkup(`\n\n`, 'javascript'), [
+ '',
+ '',
+ ''
+ ].join(''));
+
+ assert.equal(processMarkup(`\n \n \n \n