Skip to content

How to integrate prismjs as replacement for highlightjs (code highlighter) #692

@mmattel

Description

@mmattel

See: https://antora.zulipchat.com/#narrow/stream/282400-users/topic/pygments.20issue.20to.20watch

...
Here's a sample Prism.js vendor wrapper.:

;(function () {
  var Prism = require('prismjs')
  window.Prism = Prism
  require('prismjs/components/prism-clike')
  require('prismjs/components/prism-markup')
  require('prismjs/components/prism-css')
  require('prismjs/components/prism-javascript')
  require('prismjs/components/prism-bash')
  require('prismjs/plugins/keep-markup/prism-keep-markup.min')
  require('prismjs/plugins/line-numbers/prism-line-numbers.min')
})()

Add or remove require statements to adjust the language+plugin support required in your UI.
Those paths exist in your project's node_modules folder when prsimjs is installed.

To use this file, follow these steps:

  1. In your supplemental-ui folder, create the js folder.
  2. In the js folder, create the vendor folder.
  3. In the vendor folder, create the file prism.bundle.js.
  4. In the supplemental-ui/partials folder, make sure you have a copy of the
    head-styles.hbs and footer-scripts.hbs partials from the Antora Default UI.
  5. In the supplemental-ui/css folder, add a copy of the PrismJS theme that you want to use, from
    node_modules/prismjs/themes.
  6. In the supplemental-ui/partials/head-styles.hbs file, add the line:
    <link rel="stylesheet" href="{{{uiRootPath}}}/css/prism.css">.
  7. In the supplemental-ui/partials/footer-scripts.hbs file, add the line:
    <script async src="{{{uiRootPath}}}/js/vendor/prism.js"></script>

...

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions