{"_id":"@elken/gatsby-remark-prismjs","_rev":"17-d07fdc006d8f345233788f08818661ec","time":{"3.3.10":"2019-07-28T12:17:43.618Z","3.3.11":"2019-07-28T12:17:43.618Z","3.3.12":"2019-07-28T12:17:43.618Z","3.3.13":"2019-07-28T12:17:43.618Z","3.3.14":"2019-07-28T12:17:43.618Z","3.3.15":"2019-07-28T12:17:43.618Z","3.3.16":"2019-07-28T12:17:43.618Z","3.3.3":"2019-07-28T12:17:43.618Z","3.3.4":"2019-07-28T12:17:43.618Z","3.3.5":"2019-07-28T12:17:43.618Z","3.3.6":"2019-07-28T12:17:43.618Z","3.3.7":"2019-07-28T12:17:43.618Z","3.3.8":"2019-07-28T12:17:43.618Z","3.3.9":"2019-07-28T12:17:43.618Z","created":"2019-07-29T16:54:27.274Z","0.3.3":"2019-07-29T16:54:27.610Z","modified":"2022-04-05T07:12:35.416Z"},"name":"@elken/gatsby-remark-prismjs","dist-tags":{"latest":"0.3.3"},"versions":{"0.3.3":{"name":"@elken/gatsby-remark-prismjs","description":"Adds syntax highlighting to code blocks at build time using PrismJS","version":"0.3.3","author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dependencies":{"@babel/runtime":"^7.0.0","parse-numeric-range":"^0.0.2","unist-util-visit":"^1.3.0"},"devDependencies":{"@babel/cli":"^7.0.0","@babel/core":"^7.0.0","babel-preset-gatsby-package":"^0.2.2","cross-env":"^5.1.4","prismjs":"^1.15.0","remark":"^9.0.0"},"peerDependencies":{"gatsby":"^2.0.0","prismjs":"^1.15.0"},"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-prismjs#readme","keywords":["gatsby","gatsby-plugin","prismjs","remark"],"license":"MIT","main":"index.js","repository":{"type":"git","url":"git+https://github.com/gatsbyjs/gatsby.git","directory":"packages/gatsby-remark-prismjs"},"scripts":{"build":"babel src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build","watch":"babel -w src --out-dir . --ignore **/__tests__"},"engines":{"node":">=8.0.0"},"_id":"@elken/gatsby-remark-prismjs@0.3.3","_nodeVersion":"12.7.0","_npmVersion":"6.10.0","dist":{"integrity":"sha512-svZ3D5iRmoaN1C8/JlI0xCmFGPQbShhc36HVF2Ricu7ZDRSWudBYLmzhox8P9cKN2RIuH9hhK7vQNXU9tctekQ==","shasum":"66f35967bb1ee3d0b9bb038133b1504924e4be17","tarball":"https://registry.npmjs.org/@elken/gatsby-remark-prismjs/-/gatsby-remark-prismjs-0.3.3.tgz","fileCount":13,"unpackedSize":46191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdPyTECRA9TVsSAnZWagAAeQYQAJBkPyH5axX2MxDGQtRV\ndCUOZaXLUiMLs4O3xGf+8qCuy+OZO0CrUoIYCdFTOlz5Tcn4RO0yuzxi13Cj\nGH5M+jFr3H2w+WnulAV6QimKZoYTvHMtMvlBn8NSutuhcTN7NxUU2nIufpZO\nIGDnPRkj7iyZAQ/uJHNT7wdXnOuDrmWm2OswhvrT0bWXABbu3x5bZU9KqQS3\nZhvXQk3QtqLAgASUUqM+aVNv2huL2P/WxNydUHvxfTV0M6UQC9I1OZ25exow\nw8jQ6gZtfovTGdq6lvBFJ6ti0VQGuiKnkyqiUXZD/VucBsYwsjeZJkqFxQLZ\npkUW0yURQaQviMvnDLNGF/0IuBQ7bf6kpjQxeAuiWtrdjsoCjUwLDB+a538K\n6BzJ2C0XNq4tlEmwlYSf8Ml0EfwlaqvAjiEtrMMP9fzF3VtTgG3UN9vYE6Rd\nOKoOoCpuJWJyIdDnEnTZOPo4SK/DkxOngPz7pA1tT+mygxM1s0rY0N9yv6E/\n1E69mowGysgulX/xZuQDaDtPTV0GmQ6cGoN3AemeAYaUwSl9flQlLWJxKfDy\nqEYe+csedsj6xcX3apwgvyp3oc6h4yfau9AGZHJ3TDRFKVCaCer/VVkJqS3v\noLX80HOsRSVCkjWfORIqBMk9GuH+VNxNkue5b5HSBNE4bgqEeinNbXTotSGz\n9EZL\r\n=AOA8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCSrNQXsanMR2+oY8mxyi/ZPW+KEmnuWARdSGraK4jODAIhAIBcu77WqcrrKVtFObkBCmqquQpebETwb+Rutt4zsEpg"}]},"maintainers":[{"name":"elken","email":"elken@mykolab.com"}],"_npmUser":{"name":"elken","email":"elken@mykolab.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-remark-prismjs_0.3.3_1564419267481_0.6495681438782648"},"_hasShrinkwrap":false}},"maintainers":[{"name":"elken","email":"elken@mykolab.com"}],"description":"Adds syntax highlighting to code blocks at build time using PrismJS","homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-prismjs#readme","keywords":["gatsby","gatsby-plugin","prismjs","remark"],"repository":{"type":"git","url":"git+https://github.com/gatsbyjs/gatsby.git","directory":"packages/gatsby-remark-prismjs"},"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"license":"MIT","readme":"# gatsby-remark-prismjs\n\nAdds syntax highlighting to code blocks in markdown files using\n[PrismJS](http://prismjs.com/).\n\n## Install\n\n`npm install --save gatsby-transformer-remark gatsby-remark-prismjs prismjs`\n\n## How to use\n\n```javascript\n// In your gatsby-config.js\nplugins: [\n  {\n    resolve: `gatsby-transformer-remark`,\n    options: {\n      plugins: [\n        {\n          resolve: `gatsby-remark-prismjs`,\n          options: {\n            // Class prefix for <pre> tags containing syntax highlighting;\n            // defaults to 'language-' (eg <pre class=\"language-js\">).\n            // If your site loads Prism into the browser at runtime,\n            // (eg for use with libraries like react-live),\n            // you may use this to prevent Prism from re-processing syntax.\n            // This is an uncommon use-case though;\n            // If you're unsure, it's best to use the default value.\n            classPrefix: \"language-\",\n            // This is used to allow setting a language for inline code\n            // (i.e. single backticks) by creating a separator.\n            // This separator is a string and will do no white-space\n            // stripping.\n            // A suggested value for English speakers is the non-ascii\n            // character '›'.\n            inlineCodeMarker: null,\n            // This lets you set up language aliases.  For example,\n            // setting this to '{ sh: \"bash\" }' will let you use\n            // the language \"sh\" which will highlight using the\n            // bash highlighter.\n            aliases: {},\n            // This toggles the display of line numbers globally alongside the code.\n            // To use it, add the following line in src/layouts/index.js\n            // right after importing the prism color scheme:\n            //  `require(\"prismjs/plugins/line-numbers/prism-line-numbers.css\");`\n            // Defaults to false.\n            // If you wish to only show line numbers on certain code blocks,\n            // leave false and use the {numberLines: true} syntax below\n            showLineNumbers: false,\n            // If setting this to true, the parser won't handle and highlight inline\n            // code used in markdown i.e. single backtick code like `this`.\n            noInlineHighlight: false,\n            // This adds a new language definition to Prism or extend an already\n            // existing language definition. More details on this option can be\n            // found under the header \"Add new language definition or extend an\n            // existing language\" below.\n            languageExtensions: [\n              {\n                language: \"superscript\",\n                extend: \"javascript\",\n                definition: {\n                  superscript_types: /(SuperType)/,\n                },\n                insertBefore: {\n                  function: {\n                    superscript_keywords: /(superif|superelse)/,\n                  },\n                },\n              },\n            ],\n            // Customize the prompt used in shell output\n            // Leave empty to hide prompts\n            prompt: {\n              user: \"root\",\n              host: \"localhost\",\n            },\n          },\n        },\n      ],\n    },\n  },\n]\n```\n\n### Include CSS\n\n#### Required: Pick a PrismJS theme or create your own\n\nPrismJS ships with a number of [themes][5] (previewable on the [PrismJS\nwebsite][6]) that you can easily include in your Gatsby site, or you can build\nyour own by copying and modifying an example (which is what we've done for\n[gatsbyjs.org](https://gatsbyjs.org)).\n\nTo load a theme, just require its CSS file in your `gatsby-browser.js` file, e.g.\n\n```javascript\n// gatsby-browser.js\nrequire(\"prismjs/themes/prism-solarizedlight.css\")\n```\n\n#### Optional: Add line highlighting styles\n\nIf you want to highlight lines of code, you also need to add some additional CSS\nthat targets our _custom line highlighting implementation_ (which slightly\ndiffers from PrismJS's own plugin for that – more on that later).\n\nFor line highlights similar to PrismJS's, try:\n\n```css\n.gatsby-highlight-code-line {\n  background-color: #feb;\n  display: block;\n  margin-right: -1em;\n  margin-left: -1em;\n  padding-right: 1em;\n  padding-left: 0.75em;\n  border-left: 0.25em solid #f99;\n}\n```\n\nThis should work out quite nicely for the \"Solarized Light\" PrismJS theme we\njust added in the previous part. However, you will notice that when a\nhighlighted line runs wider than the surrounding code block container (causing a\nhorizontal scrollbar), its background won't be drawn for the initially hidden,\noverflowing part. :(\n\nWe saw others fix that problem and decided to do so, too. Just add the following\nCSS along your PrismJS theme and the styles for `.gatsby-highlight-code-line`:\n\n```css\n/**\n * Add back the container background-color, border-radius, padding, margin\n * and overflow that we removed from <pre>.\n */\n.gatsby-highlight {\n  background-color: #fdf6e3;\n  border-radius: 0.3em;\n  margin: 0.5em 0;\n  padding: 1em;\n  overflow: auto;\n}\n\n/**\n * Remove the default PrismJS theme background-color, border-radius, margin,\n * padding and overflow.\n * 1. Make the element just wide enough to fit its content.\n * 2. Always fill the visible space in .gatsby-highlight.\n * 3. Adjust the position of the line numbers\n */\n.gatsby-highlight pre[class*=\"language-\"] {\n  background-color: transparent;\n  margin: 0;\n  padding: 0;\n  overflow: initial;\n  float: left; /* 1 */\n  min-width: 100%; /* 2 */\n}\n```\n\n#### Optional: Add line numbering\n\nIf you want to add line numbering alongside your code, you need to\nimport the corresponding CSS file from PrismJS, right after importing your\ncolorscheme in `gatsby-browser.js`:\n\n```javascript\n// gatsby-browser.js\nrequire(\"prismjs/plugins/line-numbers/prism-line-numbers.css\")\n```\n\nThen add in the corresponding CSS:\n\n```css\n/**\n * If you already use line highlighting\n */\n\n/* Adjust the position of the line numbers */\n.gatsby-highlight pre[class*=\"language-\"].line-numbers {\n  padding-left: 2.8em;\n}\n\n/**\n * If you only want to use line numbering\n */\n\n.gatsby-highlight {\n  background-color: #fdf6e3;\n  border-radius: 0.3em;\n  margin: 0.5em 0;\n  padding: 1em;\n  overflow: auto;\n}\n\n.gatsby-highlight pre[class*=\"language-\"].line-numbers {\n  padding: 0;\n  padding-left: 2.8em;\n  overflow: initial;\n}\n```\n\n#### Optional: Add shell prompt\n\nIf you want a fancy prompt on anything with `shell` or `bash`, you need to import\nthe following CSS file in `gatsby-browser.js`:\n\n```javascript\n// gatsby-browser.js\nrequire(\"prismjs/plugins/command-line/prism-command-line.css\")\n```\n\nIf you want to change the resulting prompt, use the following CSS:\n\n```css\n.command-line-prompt > span:before {\n  color: #999;\n  content: \" \";\n  display: block;\n  padding-right: 0.8em;\n}\n\n/* Prompt for all users */\n.command-line-prompt > span[data-user]:before {\n  content: \"[\" attr(data-user) \"@\" attr(data-host) \"] $\";\n}\n\n/* Prompt for root */\n.command-line-prompt > span[data-user=\"root\"]:before {\n  content: \"[\" attr(data-user) \"@\" attr(data-host) \"] #\";\n}\n\n.command-line-prompt > span[data-prompt]:before {\n  content: attr(data-prompt);\n}\n```\n\n### Usage in Markdown\n\nThis is some beautiful code:\n\n    ```javascript\n    // In your gatsby-config.js\n    plugins: [\n      {\n        resolve: `gatsby-transformer-remark`,\n        options: {\n          plugins: [\n            `gatsby-remark-prismjs`,\n          ]\n        }\n      }\n    ]\n    ```\n\n### Line numbering\n\nTo see the line numbers alongside your code, you can use the `numberLines` option:\n\n    ```javascript{numberLines: true}\n    // In your gatsby-config.js\n    plugins: [\n      {\n        resolve: `gatsby-transformer-remark`,\n        options: {\n          plugins: [\n            `gatsby-remark-prismjs`,\n          ]\n        }\n      }\n    ]\n    ```\n\nYou can also start numbering at any index you wish (here, numbering\nwill start at index 5):\n\n    ```javascript{numberLines: 5}\n    // In your gatsby-config.js\n    plugins: [\n      {\n        resolve: `gatsby-transformer-remark`,\n        options: {\n          plugins: [\n            `gatsby-remark-prismjs`,\n          ]\n        }\n      }\n    ]\n    ```\n\n### Line highlighting\n\nYou can also add line highlighting. It adds a span around lines of code with a\nspecial class `.gatsby-highlight-code-line` that you can target with styles. See\nthis README for more info.\n\nTo highlight lines, you can use one of the following directives as comments in your\ncode:\n\n- `highlight-line` highlights the current line;\n- `highlight-next-line` highlights the next line;\n- `highlight-start` highlights the lines until the matching `hightlight-end`;\n- `highlight-range{1, 4-6}` will highlight the next line, and the fourth, fifth and sixth lines.\n\n````\n```jsx\nclass FlavorForm extends React.Component { // highlight-line\n  constructor(props) {\n    super(props);\n    this.state = {value: 'coconut'};\n\n    this.handleChange = this.handleChange.bind(this);\n    this.handleSubmit = this.handleSubmit.bind(this);\n  }\n\n  handleChange(event) {\n    // highlight-next-line\n    this.setState({value: event.target.value});\n  }\n\n  // highlight-start\n  handleSubmit(event) {\n    alert('Your favorite flavor is: ' + this.state.value);\n    event.preventDefault();\n  }\n  // highlight-end\n\n  render() {\n    return (\n      { /* highlight-range{1,4-9,12} */ }\n      <form onSubmit={this.handleSubmit}>\n        <label>\n          Pick your favorite flavor:\n          <select value={this.state.value} onChange={this.handleChange}>\n            <option value=\"grapefruit\">Grapefruit</option>\n            <option value=\"lime\">Lime</option>\n            <option value=\"coconut\">Coconut</option>\n            <option value=\"mango\">Mango</option>\n          </select>\n        </label>\n        <input type=\"submit\" value=\"Submit\" />\n      </form>\n    );\n  }\n}\n```\n````\n\nYou can also specify the highlighted lines outside of the code block.\nIn the following code snippet, lines 1 and 4 through 6 will get the line\nhighlighting. The line range parsing is done with\n<https://www.npmjs.com/package/parse-numeric-range>.\n\n````\n```javascript{1,4-6}\n// In your gatsby-config.js\nplugins: [\n  {\n    resolve: `gatsby-transformer-remark`,\n    options: {\n      plugins: [\n        `gatsby-remark-prismjs`,\n      ]\n    }\n  }\n]\n```\n````\n\n### Shell prompt\n\nTo show fancy prompts next to shell commands (only triggers on `shell` and `bash` languages), set the `prompt` object in\n`gatsby-config.js`.\n\nBy default, every line gets a prompt appended to the start, this behaviour can be changed by specififying `{outputLines: <range>}`\nto the language.\n\n### Line hiding\n\nAs well as highlighting lines, it's possible to _hide_ lines from the rendered output. Often this is handy when using `gatsby-remark-prismjs` along with [`gatsby-remark-embed-snippet`](https://www.gatsbyjs.org/packages/gatsby-remark-embed-snippet/).\n\nAs with highlighting lines, you can control which lines to hide by adding directives as comments in your source code.\n\nThe available directives are:\n\n- `hide-line` hides the current line;\n- `hide-next-line` hides the next line;\n- `hide-start` hides the lines until the matching `hide-end`;\n- `hide-range{1, 4-6}` will hide the next line, and the fourth, fifth and sixth lines.\n\nThe hide-line directives will always be hidden too. Check out [the using-remark example site](https://using-remark.gatsbyjs.org/embed-snippets/) to see how this looks on a live site.\n\n### Inline code blocks\n\nIn addition to fenced code blocks, inline code blocks will be passed through\nPrismJS as well.\n\nIf you set the `inlineCodeMarker`, then you can also specify a format style.\n\nHere's an example of how to use this if the `inlineCodeMarker` was set to `±`:\n\n    I can highlight `css±.some-class { background-color: red }` with CSS syntax.\n\nThis will be rendered in a `<code class=language-css>` with just the (syntax\nhighlighted) text of `.some-class { background-color: red }`\n\n### Disabling syntax highlighting\n\nIf you need to prevent any escaping or highlighting, you can use the `none`\nlanguage; the inner contents will not be changed at all.\n\n### Add new language definition or extend an existing language\n\nYou can provide a language extension by giving a single object or an array of\nlanguage extension objects as the `languageExtensions` option.\n\nA language extension object looks like this:\n\n```javascript\nlanguageExtensions: [\n  {\n    language: \"superscript\",\n    extend: \"javascript\",\n    definition: {\n      superscript_types: /(SuperType)/,\n    },\n    insertBefore: {\n      function: {\n        superscript_keywords: /(superif|superelse)/,\n      },\n    },\n  },\n]\n```\n\nused options:\n\n- `language` (optional) The name of the new language.\n- `extend` (optional) The language you wish to extend.\n- `definition` (optional) This is the Prism language definition.\n- `insertBefore` (optional) Is used to define where in the language definition we want to insert our extension.\n\nMore information of the format can be found here:\nhttps://prismjs.com/extending.html\n\nNote:\n\n- One of the parameters `language` and `extend` is needed.\n- If only `language` is given, a new language will be defined from scratch.\n- If only `extend` is given, an extension will be made to the given language.\n- If both `language` and `extend` is given, a new language that extends the `extend` language will\n  be defined.\n\nIn case a language is extended, note that the definitions will not be merged.\nIf the extended language definition and the given definition contains the same\ntoken, the original pattern will be overwritten.\n\nOne of the parameters `definition` and `insertBefore` needs to be defined.\n`insertBefore` needs to be combined with `definition` or `extend` (otherwise\nthere will not be any language definition tokens to insert before).\n\nIn addition to this extension parameters the css also needs to be updated to\nget a style for the new tokens. Prism will wrap the matched tokens with a\n`span` element and give it the classes `token` and the token name you defined.\nIn the example above we would match `superif` and `superelse`. In the html\nit would result in the following when a match is found:\n\n```html\n<span class=\"token superscript_keywords\">superif</span>\n```\n\n## Implementation notes\n\n### Line highlighting\n\nPlease note that we do _not_ use PrismJS's\n[line highlighting plugin](http://prismjs.com/plugins/line-highlight/). Here's\nwhy:\n\n- [PrismJS plugins][3] assume you're running things client side, but we are\n  _build-time folks_.\n- PrismJS's line highlighting plugin [implementation][1] does not allow for\n  solid background colors or 100% wide backgrounds that are drawn beyond the\n  _visible part_ of the container when content is overflowing.\n\nOur approach follows the [Pygments-based][2] implementation of the [React\nTutorial/Documentation][4] for line highlights:\n\n- It uses a wrapper element `<div class=\"gatsby-highlight\">` around the\n  PrismJS-formatted `<pre><code>`-blocks.\n- Highlighted lines are wrapped in `<span class=\"gatsby-highlight-code-line\">`.\n- We insert a linebreak before the closing tag of `.gatsby-highlight-code-line`\n  so it ends up at the start of the following line.\n\nWith all of this in place, we can apply `float:left; min-width:100%` to `<pre>`,\nthrow our overflow and background on `.gatsby-highlight`, and use\n`display:block` on `.gatsby-highlight-code-line` – all of this coming together\nto facilitate the desired line highlight behavior.\n\n### Line numbering\n\nBecause [the line numbering PrismJS plugin][7] runs client-side, a few adaptations were required to make it work:\n\n- A class `.line-numbers` is dynamically added to the `<pre>` element.\n- A new node `<span class=\"line-numbers-rows\">` is added right before the closing `</pre>`\n  containing as many empty `<span>`s as there are lines.\n\nSee the [client-side PrismJS implementation][8] for reference.\n\n[1]: https://github.com/PrismJS/prism/tree/8eb0ab6f76484ca47fa7acbf77657fab17b03ca7/plugins/line-highlight\n[2]: https://github.com/facebook/react/blob/00ba97a354e841701b4b83983c3a3904895e7b87/docs/_config.yml#L10\n[3]: http://prismjs.com/#plugins\n[4]: https://facebook.github.io/react/tutorial/tutorial.html\n[5]: https://github.com/PrismJS/prism/tree/1d5047df37aacc900f8270b1c6215028f6988eb1/themes\n[6]: http://prismjs.com/\n[7]: https://prismjs.com/plugins/line-numbers/\n[8]: https://github.com/PrismJS/prism/blob/master/plugins/line-numbers/prism-line-numbers.js#L69-L115\n","readmeFilename":"README.md"}