Skip to content

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

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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions