Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
mmattel opened this issue Aug 10, 2023 · 0 comments
Open

Comments

@mmattel
Copy link
Collaborator

mmattel commented Aug 10, 2023

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>

...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant