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

feat(gatsby-remark-embed-snippet): apply gatsby-remark-prismjs configuration to embedded snippets #13973

Merged
merged 8 commits into from
Jun 14, 2019
Prev Previous commit
Next Next commit
update README
  • Loading branch information
timhagn committed May 11, 2019
commit 1d93724d7673bbfe448066e09e837d2d795ba97c
38 changes: 28 additions & 10 deletions packages/gatsby-remark-embed-snippet/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,11 @@ function App() {

## How to use

**Important**: This module must appear before `gatsby-remark-prismjs` in your plugins array, or the markup will have already been transformed into a code block and this plugin will fail to detect it and inline the file.
**Important**: This module must appear before `gatsby-remark-prismjs` in your
plugins array, or the markup will have already been transformed into a code
block and this plugin will fail to detect it and inline the file.
For further information about its options, visit `gatsby-remark-prismjs`'s
timhagn marked this conversation as resolved.
Show resolved Hide resolved
[README](https://www.gatsbyjs.org/packages/gatsby-remark-prismjs/).

```js
// In your gatsby-config.js
Expand All @@ -177,15 +181,6 @@ module.exports = {
{
resolve: "gatsby-remark-embed-snippet",
options: {
// Class prefix for <pre> tags containing syntax highlighting;
// defaults to 'language-' (eg <pre class="language-js">).
// If your site loads Prism into the browser at runtime,
// (eg 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-",

// Example code links are relative to this dir.
// eg examples/path/to/file.js
directory: `${__dirname}/examples/`,
Expand All @@ -202,6 +197,29 @@ module.exports = {
// 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: {},
// This toggles the display of line numbers globally alongside the code.
// To use it, add the following line in gatsby-browser.js
// right after importing the prism color scheme:
// `require("prismjs/plugins/line-numbers/prism-line-numbers.css");`
// Defaults to false.
// If you wish to only show line numbers on certain code blocks,
// leave false and use the {numberLines: true} syntax.
showLineNumbers: false,
// If setting this to true, the parser won't handle and highlight inline
// code used in markdown i.e. single backtick code like `this`.
noInlineHighlight: false,
},
},
],
Expand Down