This is a CSS Theme DITA-OT Plug-in to amend the look-and-feel of highlighted
<codeblock> elements. It extends the existing
DITA-OT Prism-JS plug-in to amend the CSS colors to align with the
Dark Theme from Prism. It
can be used as a template for switching to other themes.
Table of Contents
The DITA-OT Dark Theme CSS plug-in has been tested against DITA-OT 3.x. It is recommended that you upgrade to the latest version.
The Dark Theme CSS plug-in is an override for the standard Prism-JS CSS theme
-
Full installation instructions for downloading DITA-OT can be found here.
- Download the
dita-ot-3.7.zippackage from the project website at dita-ot.org/download - Extract the contents of the package to the directory where you want to install DITA-OT.
- Optional: Add the absolute path for the
bindirectory to the PATH system variable.
This defines the necessary environment variable to run the
ditacommand from the command line. - Download the
curl -LO https://github.com/dita-ot/dita-ot/releases/download/3.7/dita-ot-3.7.zip
unzip -q dita-ot-3.7.zip
rm dita-ot-3.7.zip- Run the plug-in installation commands:
dita install https://github.com/doctales/org.doctales.xmltask/archive/master.zip
dita install https://github.com/jason-fox/fox.jason.extend.css/archive/master.zip
dita install https://github.com/jason-fox/fox.jason.prismjs/archive/master.zip
dita install https://github.com/jason-fox/fox.jason.prismjs.dark-theme/archive/master.zipThe dita command line tool requires no additional configuration.
Run any HTML dita transform e.g.:
PATH_TO_DITA_OT/bin/dita -f html5 -o out -i document.ditamapEach HTML output file will include an additional line in the <head>
<head>
...
<link rel="stylesheet" type="text/css" href="common-extended.css">
</head>common-extended.css will include the dark theme CSS.
Amend the resource/prism-dark.css file to alter the look-and-feel of the rendered HTML
Additional themes are available here:
- https://github.com/PrismJS/prism/tree/master/themes
- https://github.com/PrismJS/prism-themes/tree/master/themes
The cfg/fo/attrs/prismjs-attr.xsl provides the colors for the PDF output. The names of the attributes match the CSS
file.
Apache 2.0 © 2019 - 2022 Jason Fox
The Program includes the following additional software components which were obtained under license:
- prism.js - https://github.com/PrismJS/prism/ - MIT license
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent