Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
gatsby-rehype-prismjs
Advanced tools
Readme
Adds syntax highlighting to code tags in HTML fragments using PrismJS. This package is inspired by gatsby-remark-prismjs, the difference being that the content source is HTML instead of remark.
This plugin is part of the rehype collection and intended to be used with gatsby-transformer-rehype.
yarn add gatsby-transformer-rehype gatsby-rehype-prismjs prismjs
// In your gatsby-config.js
plugins: [
{
resolve: `gatsby-transformer-rehype`,
options: {
plugins: [
{
resolve: `gatsby-rehype-prismjs`,
options: {
// All code blocks will be wrapped in an additional <div>
// containter to allow for better styling. This might break
// your current theme. You might therefore have to provide
// additional styling classes (below is just an example).
divClassNames: "kg-card kg-code-card",
// Class prefix for <pre> tags containing syntax highlighting;
// defaults to 'language-' (e.g. <pre class="language-js">).
// If your site loads Prism into the browser at runtime,
// (e.g. for use with libraries like react-live),
// you may use this to prevent Prism from re-processing syntax.
// This is an uncommon use-case though;
// If you're unsure, it's best to use the default value.
classPrefix: "language-",
// This is used to allow setting a language for inline code
// (i.e. single backticks) by creating a separator.
// This separator is a string and will do no white-space
// stripping.
// A suggested value for English speakers is the non-ascii
// character '›'.
inlineCodeMarker: null,
// This lets you set up language aliases. For example,
// setting this to '{ sh: "bash" }' will let you use
// the language "sh" which will highlight using the
// bash highlighter.
aliases: {},
// If setting this to false, the parser handles and highlights inline
// code, i.e. single backtick code like `this`.
noInlineHighlight: true,
// By default the HTML entities <>&'" are escaped.
// Add additional HTML escapes by providing a mapping
// of HTML entities and their escape value IE: { '}': '{' }
escapeEntities: {},
},
},
],
},
},
]
If you are using this plugin together with gatsby-theme-try-ghost, a default prism theme is already installed for you. Installing a CSS theme is only required, if used with other projects or if you want to change or customize the theme.
PrismJS ships with a number of themes that you can easily include in your Gatsby site. You can find these themes in node_modules/prismjs/themes/
. To load a theme, you can require its CSS file in gatsby-browser.js
, e.g.
// gatsby-browser.js
require("prismjs/themes/prism-solarizedlight.css")
If your base theme is gatsby-theme-try-ghost, do not put the CSS file into gatsby-browser.js
as it has unwanted side effects. Rather provide the CSS file in a specific location, so gatsby-theme-try-ghost
can easily find it. Create a file with name prism.css
and put it in the following location, so the default file is shadowed:
// in your base directory
└── gatsby-config.js
└── src/
└── gatsby-theme-try-ghost
└── styles
└── prism.css
The standard theme that ships with gatsby-theme-try-ghost is already dark mode enabled. If you are using the standard themes, you should add some additional CSS for dark mode support.
Syntax highlighting is applied to HTML <code>
blocks that are enclosed by a parent <pre>
blocks.
<pre>
<code class="language-javascript">
var app = express();
</code>
</pre>
In addition to fenced code blocks, inline code blocks will be passed through PrismJS as well. If you set the inlineCodeMarker
, then you can also specify a format style.
Here's an example of how to use this if the inlineCodeMarker
was set to ±
:
I can highlight css±.some-class { background-color: red }
with CSS syntax.
This will be rendered in a <code class=language-css>
with just the (syntax highlighted) text of .some-class { background-color: red }
If you want to disable syntax highlighting in specific code blocks, use the none
language.
PRs are welcome! Consider contributing to this project if you are missing feature that is also useful for others. Explore this guide, to get some more ideas.
Copyright (c) 2020 styxlab - Released under the MIT license.
FAQs
Adds syntax highlighting to HTML using PrismJS at build time.
The npm package gatsby-rehype-prismjs receives a total of 36 weekly downloads. As such, gatsby-rehype-prismjs popularity was classified as not popular.
We found that gatsby-rehype-prismjs demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.