{"id":15600489,"url":"https://github.com/jason-fox/fox.jason.prismjs","last_synced_at":"2025-04-19T19:50:30.878Z","repository":{"id":45773052,"uuid":"157444774","full_name":"jason-fox/fox.jason.prismjs","owner":"jason-fox","description":"An integration of PrismJS into the DITA Open Toolkit engine, enabling static HTML and PDF syntax highlighting.","archived":false,"fork":false,"pushed_at":"2024-06-03T18:44:45.000Z","size":1208,"stargazers_count":5,"open_issues_count":1,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T12:26:51.367Z","etag":null,"topics":["code-highlighter","dita-ot","dita-ot-html-plugin","dita-ot-pdf-plugin","dita-ot-plugin","prismjs","syntax-highlighting"],"latest_commit_sha":null,"homepage":"https://jason-fox.github.io/dita-ot-plugins/prismjs","language":"XSLT","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jason-fox.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-11-13T20:51:41.000Z","updated_at":"2024-06-03T18:44:48.000Z","dependencies_parsed_at":"2024-06-03T21:32:13.111Z","dependency_job_id":"4bd26e2b-3d88-452b-8ee1-387321831c70","html_url":"https://github.com/jason-fox/fox.jason.prismjs","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jason-fox%2Ffox.jason.prismjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jason-fox%2Ffox.jason.prismjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jason-fox%2Ffox.jason.prismjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jason-fox%2Ffox.jason.prismjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jason-fox","download_url":"https://codeload.github.com/jason-fox/fox.jason.prismjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249785859,"owners_count":21325550,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code-highlighter","dita-ot","dita-ot-html-plugin","dita-ot-pdf-plugin","dita-ot-plugin","prismjs","syntax-highlighting"],"created_at":"2024-10-03T02:03:38.253Z","updated_at":"2025-04-19T19:50:30.844Z","avatar_url":"https://github.com/jason-fox.png","language":"XSLT","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Prism-JS for DITA-OT [\u003cimg src=\"https://jason-fox.github.io/fox.jason.prismjs/prismjs.png\" align=\"right\" width=\"300\"\u003e](https://prismjsdita-ot.rtfd.io/)\n\n[![license](https://img.shields.io/github/license/jason-fox/fox.jason.prismjs.svg)](http://www.apache.org/licenses/LICENSE-2.0)\n[![DITA-OT 4.2](https://img.shields.io/badge/DITA--OT-4.2-green.svg)](http://www.dita-ot.org/4.2)\n[![CI](https://github.com/jason-fox/fox.jason.prismjs/workflows/CI/badge.svg)](https://github.com/jason-fox/fox.jason.prismjs/actions?query=workflow%3ACI)\n[![Coverage Status](https://coveralls.io/repos/github/jason-fox/fox.jason.prismjs/badge.svg?branch=master)](https://coveralls.io/github/jason-fox/fox.jason.prismjs?branch=master)\n[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=fox.jason.prismjs\u0026metric=alert_status)](https://sonarcloud.io/dashboard?id=fox.jason.prismjs)\n\nThis is a syntax highlighting [DITA-OT Plug-in](https://www.dita-ot.org/plugins) which integrates the flexible\n[Prism-JS](https://github.com/PrismJS/prism) highlighting library into the DITA Open Toolkit engine. This enables the\ngeneration of documents including code snippets which are automatically colorized according to language syntax. The\nplug-in extends both static HTML and PDF transtypes.\n\n\u003e ![](https://jason-fox.github.io/fox.jason.prismjs/highlighted.png)\n\n:arrow_forward: [Video from DITA-OT Day 2019](https://youtu.be/vobY_ha5nd0)\n\n[![](https://jason-fox.github.io/fox.jason.prismjs/javascript-video.png)](https://youtu.be/vobY_ha5nd0)\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eTable of Contents\u003c/strong\u003e\u003c/summary\u003e\n\n-   [Background](#background)\n    -   [What is Prism-JS?](#what-is-prism-js)\n-   [Install](#install)\n    -   [Installing DITA-OT](#installing-dita-ot)\n    -   [Installing the Plug-in](#installing-the-plug-in)\n-   [Usage](#usage)\n    -   [Invocation from the command line](#invocation-from-the-command-line)\n        -   [Result](#result)\n    -   [Customizing the output](#customizing-the-output)\n        -   [Extending to other languages](#extending-to-other-languages)\n        -   [Altering the static HTML look and feel](#altering-the-static-html-look-and-feel)\n        -   [Altering the PDF look and feel](#altering-the-pdf-look-and-feel)\n-   [License](#license)\n\n\u003c/details\u003e\n\n## Background\n\n### What is Prism-JS?\n\n\u003ca href=\"http://prismjs.com\"\u003e\u003cimg src=\"https://pbs.twimg.com/profile_images/2451426554/Screen_Shot_2012-07-31_at_21.57.03__400x400.png\" align=\"right\" height=\"70\"\u003e\u003c/a\u003e\n\nPrism is a lightweight, robust, elegant syntax highlighting library. It's a spin-off project from\n[Dabblet](http://dabblet.com/).\n\n-   Highlights embedded languages (e.g. CSS inside HTML, JavaScript inside HTML)\n-   Highlights inline code (`\u003ccodeph\u003e`) as well, not just code blocks (`\u003ccodeblock\u003e`)\n-   Highlights nested languages (CSS in HTML, JavaScript in HTML)\n-   It doesn’t force you to use any Prism-specific markup\n\nYou can learn more on http://prismjs.com/.\n\nWhy another syntax highlighter?:\nhttp://lea.verou.me/2012/07/introducing-prism-an-awesome-new-syntax-highlighter/#more-1841\n\n---\n\n## Install\n\nThe DITA-OT Prism-JS syntax highlighter has been tested against [DITA-OT 3.x](http://www.dita-ot.org/download). It is\nrecommended that you upgrade to the latest version.\n\n### Installing DITA-OT\n\n\u003ca href=\"https://www.dita-ot.org\"\u003e\u003cimg src=\"https://www.dita-ot.org/images/dita-ot-logo.svg\" align=\"right\" height=\"55\"\u003e\u003c/a\u003e\n\nThe DITA-OT Prism-JS syntax highlighter is a plug-in for the DITA Open Toolkit.\n\n-   Full installation instructions for downloading DITA-OT can be found\n    [here](https://www.dita-ot.org/4.0/topics/installing-client.html).\n\n    1.  Download the `dita-ot-4.2.zip` package from the project website at\n        [dita-ot.org/download](https://www.dita-ot.org/download)\n    2.  Extract the contents of the package to the directory where you want to install DITA-OT.\n    3.  **Optional**: Add the absolute path for the `bin` directory to the _PATH_ system variable.\n\n    This defines the necessary environment variable to run the `dita` command from the command line.\n\n```console\ncurl -LO https://github.com/dita-ot/dita-ot/releases/download/4.2/dita-ot-4.2.zip\nunzip -q dita-ot-4.2.zip\nrm dita-ot-4.2.zip\n```\n\n### Installing the Plug-in\n\n-   Run the plug-in installation commands:\n\n```console\ndita install https://github.com/jason-fox/fox.jason.extend.css/archive/master.zip\ndita install https://github.com/jason-fox/fox.jason.prismjs/archive/master.zip\n```\n\n\n### Installing Node.js\n\n\u003ca href=\"https://nodejs.org/\"\u003e\u003cimg src=\"https://simpleicons.org/icons/nodedotjs.svg\" align=\"right\" width=\"70\" height=\"70\" align=\"right\" width=\"55\" height=\"55\"\u003e\u003c/a\u003e\n\nDue to the deprecation and removal of the Nashorn Engine in JDK11-14 [JEP 335](https://openjdk.java.net/jeps/335) any\nplug-in using JavaScript within `\u003cscript\u003e` or `\u003cscriptdef\u003e` ANT tasks will start throwing warnings with Java 11 onwards\nand above. From Java 15 onwards, these plugins will no longer work. From **DITA-OT 4.0** onward this step is mandatory\n\nThe DITA-OT Prism-JS syntax highlighter relies heavily the Prism-JS JavaScript library, and therefore has been updated\nto run using [Node.js](https://nodejs.org/) where present on a user's machine. Node.js is a JavaScript runtime built on\nChrome's V8 JavaScript engine.\n\nTo download a copy follow the instructions on the [Install Page](https://nodejs.org/en/download/).\n\n```console\napt-get update -q\nexport DEBIAN_FRONTEND=noninteractive\napt-get install -qy --no-install-recommends nodejs\nnodejs -v\n```\n\n---\n\n## Usage\n\nTo highlight the syntax within codeblocks, add an `outputclass` attribute to any `\u003ccodeph\u003e` or `\u003ccodeblock\u003e` elements in\nyour `*.dita` files. Alternatively add an `outputclass` attribute to the `\u003cbody\u003e` element, and all `\u003ccodeph\u003e` or\n`\u003ccodeblock\u003e` will inherit from it.\n\nWith the default Prism-JS\n[library](https://prismjs.com/download.html#themes=prism\u0026languages=markup+css+clike+javascript) the following languages\ncan be highlighted\n\n-   `outputclass=\"language-markup\"` - HTML, XML etc.\n-   `outputclass=\"language-css\"` - Cascading Style Sheet highlighting\n-   `outputclass=\"language-clike\"` - C-language family highlighting\n-   `outputclass=\"language-javascript\"` - JavaScript highlighting ... etc.\n\ne.g.:\n\n```xml\n\u003c?xml version=\"1.0\" encoding=\"UTF-8\"?\u003e\n\u003c!DOCTYPE topic PUBLIC \"-//OASIS//DTD DITA Topic//EN\" \"topic.dtd\"\u003e\n\u003ctopic id=\"examples\"\u003e\n  \u003ctitle\u003eExamples\u003c/title\u003e\n  \u003cbody  outputclass=\"language-markup\"\u003e\n\n  \u003cp\u003eThe Prism source, highlighted with Prism:\u003c/p\u003e\n  \u003ccodeblock outputclass=\"language-javascript\"\u003e\n    \u003ccoderef href=\"../src/prism.js\"/\u003e\n  \u003c/codeblock\u003e\n\n  \u003cp\u003eThis page’s CSS code, highlighted with Prism:\u003c/p\u003e\n  \u003ccodeblock outputclass=\"language-css\"\u003e\n    \u003ccoderef href=\"../src/style.css\"/\u003e\n  \u003c/codeblock\u003e\n\n  \u003cp\u003eThis page’s HTML, highlighted with Prism:\u003c/p\u003e\n  \u003ccodeblock outputclass=\"language-html\"\u003e\n    \u003ccoderef href=\"../src/index.html\"/\u003e\n  \u003c/codeblock\u003e\n\n  \u003cp\u003eThis page’s logo (SVG), highlighted with Prism:\u003c/p\u003e\n  \u003ccodeblock outputclass=\"language-markup\"\u003e\n    \u003ccoderef href=\"../src/logo.svg\"/\u003e\n  \u003c/codeblock\u003e\n  \u003c/body\u003e\n\u003c/topic\u003e\n```\n\nA test document including HTML, CSS and JavaScript code snippets can be found within the plug-in at:\n`PATH_TO_DITA_OT/plugins/fox.jason.prismjs/sample`\n\n#### Line numbering\n\nTo display line numbers in codeblocks in HTML and PDF, add the  `show-line-numbers` `outputclass` to the `\u003ccodeblock\u003e`\n\n```xml\n\u003ccodeblock outputclass=\"language-javascript show-line-numbers\"\u003e\n  \u003ccoderef href=\"../src/prism.js\"/\u003e\n\u003c/codeblock\u003e\n```\n\n### Invocation from the command line\n\nThe Plug-in extends the existing PDF and HTML transforms\n\n-   to create a PDF with highlighted code snippets run:\n\n```console\nPATH-TO-DITA-OT/bin/dita -f pdf -i document.ditamap  -o out\n```\n\n#### Result\n\n![](https://jason-fox.github.io/fox.jason.prismjs/prism-pdf.png)\n\n-   to create static HTML with highlighted code snippets run:\n\n```console\nPATH-TO-DITA-OT/bin/dita -f html5 -i document.ditamap  -o out\n```\n\n#### Result\n\n![](https://jason-fox.github.io/fox.jason.prismjs/prism-html.png)\n\n### Parameter Reference\n\n-   `prism.default` - Specifies the default Prism language\n-   `prism.use.theme` - Specifies which of the three included themes to use.\n-   `prism.css.theme` - Specifies the location of a custom color theme file relative to the output directory.\n\n### Customizing the output\n\nPrism-JS is easily extended to other languages since it purely relies on regular expressions. Additional languages are\nloaded dynamically during processing. A large number of additional languages are supported - just look at the list on\nhttps://github.com/PrismJS/prism/tree/master/components\n\n#### Altering the CSS theme colors\n\nThree included prism themes are included. Each theme supports the `prefers-color-scheme` css media query and uses CSS variables to offer separate\n_\"light\"_ and_\"dark\"_ modes.\n\n-  `default` - original [Prism.js](http://prismjs.com/) theme colors\n-  `bookstrap` - theme using [Bootstrap 5](https://getbootstrap.com/docs/5.2) CSS colors\n-  `solarized` - theme based around [solarized](https://ethanschoonover.com/solarized/)\n\nA custom theme can be also be altered by setting the `prism.css.theme` parameter, a separate\n\n#### Altering the static HTML look and feel\n\nFor more extensive modifications, extend with an additional plug-in which overrides, the default `prismjs.css.file`\nproperty and amend a copy of the `css/style.css` file to alter the look-and-feel of the rendered HTML\n\n##### `plugin.xml` Configuration\n\n```xml\n\u003cplugin id=\"com.example.prismjs-theme\"\u003e\n  \u003cfeature extension=\"ant.import\" file=\"theme.xml\"/\u003e\n  \u003crequire plugin=\"fox.jason.extend.css\"/\u003e\n  \u003crequire plugin=\"fox.jason.prismjs\"/\u003e\n  \u003cfeature extension=\"extend.css.process.pre\" value=\"prismjs.override.css\"/\u003e\n\u003c/plugin\u003e\n```\n\n##### ANT Build file: `theme.xml`\n\n```xml\n\u003cproject name=\"com.example.prismjs-theme\"\u003e\n  \u003ctarget name=\"prismjs.override.css\"\u003e\n    \u003cproperty name=\"prismjs.css.file\" value=\"${dita.plugin.com.example.prismjs-theme.dir}/resource/style.css\"/\u003e\n  \u003c/target\u003e\n\u003c/project\u003e\n```\n\nA working example can be found in the\n[Dark Theme CSS DITA-OT plug-in](https://github.com/jason-fox/fox.jason.prismjs.dark-theme)\n\n#### Altering the PDF look and feel\n\nThe `cfg/fo/attrs/prismjs-attr.xsl` provides the colors for the PDF output. The names of the attributes match the CSS\nfile, copy and amend the `prismjs-attr.xsl` file in your own plug-in.\n\n##### `plugin.xml` Configuration\n\n```xml\n\u003cplugin id=\"com.example.prismjs-theme\"\u003e\n  \u003crequire plugin=\"fox.jason.prismjs\"/\u003e\n  \u003cfeature extension=\"dita.xsl.xslfo\" value=\"xsl/xslfo.xsl\" type=\"file\"/\u003e\n\u003c/plugin\u003e\n```\n\n##### `xsl/xslfo.xsl` XSL Stylesheet\n\nOverride the `\u003cxsl:template match=\"*[contains(@class,' topic/ph ') and contains(@outputclass, 'token')]\"\u003e` template as\nshown:\n\n```xml\n\u003cxsl:stylesheet xmlns:xsl=\"http://www.w3.org/1999/XSL/Transform\"\n    xmlns:xs=\"http://www.w3.org/2001/XMLSchema\"\n    xmlns:fo=\"http://www.w3.org/1999/XSL/Format\"\n    exclude-result-prefixes=\"xs\"\n    version=\"2.0\"\u003e\n\n    \u003cxsl:param name=\"PRISM-THEME\" select=\"'com.example.prismjs-theme'\"/\u003e\n\n    \u003cxsl:include href=\"../cfg/fo/attrs/prismjs-attr.xsl\"/\u003e\n\n    \u003cxsl:template match=\"*[contains(@class,' topic/ph ') and contains(@outputclass, 'token')]\"\u003e\n      \u003cfo:inline xsl:use-attribute-sets=\"__codeph__language__\"\u003e\n        \u003cxsl:call-template name=\"commonattributes\"/\u003e\n        \u003cxsl:call-template name=\"processPrismAttrSetReflection\"\u003e\n          \u003cxsl:with-param name=\"attrSet\"\n            select=\"replace(@outputclass,'token ','__token__')\"/\u003e\n          \u003cxsl:with-param name=\"path\" select=\"concat('../../', concat($PRISM-THEME, '/cfg/fo/attrs/prismjs-attr.xsl'))\"/\u003e\n        \u003c/xsl:call-template\u003e\n        \u003cxsl:apply-templates/\u003e\n      \u003c/fo:inline\u003e\n  \u003c/xsl:template\u003e\n\u003c/xsl:stylesheet\u003e\n```\n\nA working example can be found in the\n[Dark Theme CSS DITA-OT plug-in](https://github.com/jason-fox/fox.jason.prismjs.dark-theme)\n\n\u003e ![](https://jason-fox.github.io/fox.jason.prismjs/highlighted-dark.png)\n\n## License\n\n[Apache 2.0](LICENSE) © 2018 - 2024 Jason Fox\n\nThe Program includes the following additional software components which were obtained under license:\n\n-   prism.js - https://github.com/PrismJS/prism/ - **MIT license**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjason-fox%2Ffox.jason.prismjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjason-fox%2Ffox.jason.prismjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjason-fox%2Ffox.jason.prismjs/lists"}