Skip to content

Latest commit

 

History

History
108 lines (72 loc) · 4 KB

README.md

File metadata and controls

108 lines (72 loc) · 4 KB
Raw

Dark Theme CSS for DITA-OT

license DITA-OT 3.7 Quality Gate Status

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

Install

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.

Installing DITA-OT

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.

    1. Download the dita-ot-3.7.zip package from the project website at dita-ot.org/download
    2. Extract the contents of the package to the directory where you want to install DITA-OT.
    3. Optional: Add the absolute path for the bin directory to the PATH system variable.

    This defines the necessary environment variable to run the dita command from the command line.

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

Installing the Plug-in

  • 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.zip

The dita command line tool requires no additional configuration.

Usage

Run any HTML dita transform e.g.:

PATH_TO_DITA_OT/bin/dita -f html5 -o out -i document.ditamap

Each 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.

Altering the static HTML look and feel

Amend the resource/prism-dark.css file to alter the look-and-feel of the rendered HTML

Additional themes are available here:

Altering the PDF look and feel

The cfg/fo/attrs/prismjs-attr.xsl provides the colors for the PDF output. The names of the attributes match the CSS file.

License

Apache 2.0 © 2019 - 2022 Jason Fox

The Program includes the following additional software components which were obtained under license: