gatsby-remark-embed-snippet
Embeds the contents of specified files within Prism-formatted HTML blocks.
Overview
Embedding Files
For example, given the following project directory structure:
./examples/
├── sample-javascript-file.js
├── sample-html-file.html
The following markdown syntax could be used to embed the contents of these files:
# Sample JavaScript `embed:sample-javascript-file.js` # Sample HTML `embed:sample-html-file.html`
The resulting HTML for the above markdown would look something like this:
Sample JavaScript <!-- Embedded content here ... --> Sample HTML <!-- Embedded content here ... -->
Highlighting Lines
You can also specify specific lines for Prism to highlight using
highlight-line
and highlight-next-line
comments. You can also specify a
range of lines to highlight, relative to a highlight-range
comment.
JavaScript example
;; const name = "Brian"; // highlight-line ReactDOM;
CSS example
HTML example
highlight me <!-- highlight-line --> <!-- highlight-next-line --> And me
YAML example
foo: "highlighted" # highlight-line bar: "not highlighted"# highlight-range{1-2} baz: "highlighted"quz: "highlighted"
Installation
npm install --save gatsby-remark-embed-snippet
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.
// In your gatsby-config.jsmoduleexports = plugins: resolve: `gatsby-transformer-remark` options: plugins: resolve: `gatsby-remark-prismjs` 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-" 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: `/examples/` ;