https://github.com/jason-fox/fox.jason.prismjs.dark-theme
Extension of the DITA-OT Prism-JS plug-in to amend the look-and-feel of highlighted code
https://github.com/jason-fox/fox.jason.prismjs.dark-theme
css-theme dita-ot dita-ot-html-plugin dita-ot-pdf-plugin dita-ot-plugin html-css prismjs
Last synced: 5 months ago
JSON representation
Extension of the DITA-OT Prism-JS plug-in to amend the look-and-feel of highlighted code
- Host: GitHub
- URL: https://github.com/jason-fox/fox.jason.prismjs.dark-theme
- Owner: jason-fox
- License: apache-2.0
- Created: 2019-08-25T09:31:39.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-01-29T12:33:36.000Z (over 4 years ago)
- Last Synced: 2025-02-04T13:26:58.948Z (over 1 year ago)
- Topics: css-theme, dita-ot, dita-ot-html-plugin, dita-ot-pdf-plugin, dita-ot-plugin, html-css, prismjs
- Language: XSLT
- Homepage: https://jason-fox.github.io/dita-ot-plugins/prismjs
- Size: 29.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Dark Theme CSS for DITA-OT [
](https://prismjsdita-ot.rtfd.io/)
[](http://www.apache.org/licenses/LICENSE-2.0)
[](http://www.dita-ot.org/3.7)
> This repository is now archived since the [default-theme.css](https://github.com/jason-fox/fox.jason.prismjs/blob/master/css/default-theme.css)
> is capable of handling Light and Dark modes.
This is a CSS Theme [DITA-OT Plug-in](https://www.dita-ot.org/plugins) to amend the look-and-feel of highlighted
`` elements. It extends the existing
[DITA-OT Prism-JS plug-in](https://github.com/jason-fox/fox.jason.prismjs) to amend the CSS colors to align with the
[Dark Theme](https://github.com/PrismJS/prism/blob/master/themes/prism-dark.css) from [Prism](https://prismjs.com/). It
can be used as a template for switching to other themes.
> 
Table of Contents
- [Install](#install)
- [Installing DITA-OT](#installing-dita-ot)
- [Installing the Plug-in](#installing-the-plug-in)
- [Usage](#usage)
- [License](#license)
## Install
The DITA-OT Dark Theme CSS plug-in has been tested against [DITA-OT 3.x](http://www.dita-ot.org/download). 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](https://github.com/jason-fox/fox.jason.prismjs)
CSS theme
- Full installation instructions for downloading DITA-OT can be found
[here](https://www.dita-ot.org/3.7/topics/installing-client.html).
1. Download the `dita-ot-3.7.zip` package from the project website at
[dita-ot.org/download](https://www.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.
```console
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:
```console
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.:
```console
PATH_TO_DITA_OT/bin/dita -f html5 -o out -i document.ditamap
```
Each HTML output file will include an additional line in the ``
```html
...
```
`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:
- https://github.com/PrismJS/prism/tree/master/themes
- https://github.com/PrismJS/prism-themes/tree/master/themes
### 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](LICENSE) © 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**