{"_id":"@egonr/rehype-prism-plus","_rev":"1-ffc7d600c70e6e656580e3e8bf5e05f7","name":"@egonr/rehype-prism-plus","dist-tags":{"latest":"2.0.1"},"versions":{"2.0.0":{"name":"@egonr/rehype-prism-plus","version":"2.0.0","description":"rehype plugin to highlight code blocks in HTML with Prism (via refractor) with line highlighting and line numbers","source":"index.js","main":"./dist/index.es.js","module":"./dist/index.es.js","types":"./dist/index.d.ts","type":"module","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.es.js"},"./common":{"types":"./dist/common.d.ts","default":"./dist/common.es.js"},"./all":{"types":"./dist/all.d.ts","default":"./dist/all.es.js"},"./generator":{"types":"./dist/generator.d.ts","default":"./dist/generator.es.js"}},"typesVersions":{"*":{".":["./dist/index"],"common":["./dist/common"],"all":["./dist/all"],"generator":["./dist/generator"]}},"scripts":{"build":"tsc -b && microbundle src/index.js src/common.js src/all.js src/generator.js --format esm","tsc":"tsc --watch","lint":"eslint .","prettier":"prettier --write '*.js'","test":"uvu"},"repository":{"type":"git","url":"git+https://github.com/timlrx/rehype-prism-plus.git"},"keywords":["rehype","rehype-plugin","syntax-highlighting","prism","mdx","jsx"],"author":{"name":"Timothy Lin","email":"timothy0336@hotmail.com","url":"https://timlrx.com"},"license":"MIT","bugs":{"url":"https://github.com/timlrx/rehype-prism-plus/issues"},"homepage":"https://github.com/timlrx/rehype-prism-plus#readme","dependencies":{"hast-util-to-string":"^3.0.0","parse-numeric-range":"^1.3.0","refractor":"^4.8.0","rehype-parse":"^9.0.0","unist-util-filter":"^5.0.0","unist-util-visit":"^5.0.0"},"devDependencies":{"dedent":"^0.7.0","eslint":"^8.43.0","eslint-config-prettier":"^8.3.0","eslint-plugin-node":"^11.1.0","husky":"^8.0.0","lint-staged":"^11.1.2","microbundle":"^0.15.1","prettier":"^2.8.8","rehype":"^13.0.1","remark":"^15.0.1","remark-rehype":"^11.0.0","typescript":"5.1.3","unified":"^11.0.4","uvu":"^0.5.1"},"prettier":{"printWidth":100,"tabWidth":2,"useTabs":false,"singleQuote":true,"bracketSpacing":true,"semi":false,"trailingComma":"es5"},"lint-staged":{"*.+(js|jsx|ts|tsx)":["eslint --fix"],"*.+(js|jsx|ts|tsx|json|css|md|mdx)":["prettier --write"]},"_id":"@egonr/rehype-prism-plus@2.0.0","gitHead":"add39a20d47f899aec744c556b8f3bbc35602464","_nodeVersion":"21.6.1","_npmVersion":"10.2.4","dist":{"integrity":"sha512-9kwEh7jwpxRUL0W37z6BxZyvmyFueyWIX+mmOmRgUTBJOG1fzwGwfjIiS+TArwUg8zmI14MpF1nw4yRK0BFEyw==","shasum":"2f70c2d5785c1e51656ee27893afa485fd78c3d1","tarball":"https://registry.npmjs.org/@egonr/rehype-prism-plus/-/rehype-prism-plus-2.0.0.tgz","fileCount":3,"unpackedSize":11414,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGAeYc2NQL2L1cOk02kaaPtD0pDxjXGaP/PxlalL1jVwIgYlGHU9x/ZpwjjIRpiiVpx2xMGez3d+ra9CZucHuSAis="}]},"_npmUser":{"name":"egonr","email":"e.rabeder@gmail.com"},"directories":{},"maintainers":[{"name":"egonr","email":"e.rabeder@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rehype-prism-plus_2.0.0_1711143193652_0.05302151767386243"},"_hasShrinkwrap":false},"2.0.1":{"name":"@egonr/rehype-prism-plus","version":"2.0.1","description":"rehype plugin to highlight code blocks in HTML with Prism (via refractor) with line highlighting and line numbers","source":"index.js","main":"./dist/index.es.js","module":"./dist/index.es.js","types":"./dist/index.d.ts","type":"module","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.es.js"},"./common":{"types":"./dist/common.d.ts","default":"./dist/common.es.js"},"./all":{"types":"./dist/all.d.ts","default":"./dist/all.es.js"},"./generator":{"types":"./dist/generator.d.ts","default":"./dist/generator.es.js"}},"typesVersions":{"*":{".":["./dist/index"],"common":["./dist/common"],"all":["./dist/all"],"generator":["./dist/generator"]}},"scripts":{"build":"tsc -b && microbundle src/index.js src/common.js src/all.js src/generator.js --format esm","tsc":"tsc --watch","lint":"eslint .","prettier":"prettier --write '*.js'","test":"uvu"},"repository":{"type":"git","url":"git+https://github.com/egonr/rehype-prism-plus.git"},"keywords":["rehype","rehype-plugin","syntax-highlighting","prism","mdx","jsx"],"author":{"name":"Timothy Lin","email":"timothy0336@hotmail.com","url":"https://timlrx.com"},"license":"MIT","homepage":"https://github.com/egonr/rehype-prism-plus#readme","dependencies":{"hast-util-to-string":"^3.0.0","parse-numeric-range":"^1.3.0","refractor":"^4.8.0","rehype-parse":"^9.0.0","unist-util-filter":"^5.0.0","unist-util-visit":"^5.0.0"},"devDependencies":{"dedent":"^0.7.0","eslint":"^8.43.0","eslint-config-prettier":"^8.3.0","eslint-plugin-node":"^11.1.0","husky":"^8.0.0","lint-staged":"^11.1.2","microbundle":"^0.15.1","prettier":"^2.8.8","rehype":"^13.0.1","remark":"^15.0.1","remark-rehype":"^11.0.0","typescript":"5.1.3","unified":"^11.0.4","uvu":"^0.5.1"},"prettier":{"printWidth":100,"tabWidth":2,"useTabs":false,"singleQuote":true,"bracketSpacing":true,"semi":false,"trailingComma":"es5"},"lint-staged":{"*.+(js|jsx|ts|tsx)":["eslint --fix"],"*.+(js|jsx|ts|tsx|json|css|md|mdx)":["prettier --write"]},"_id":"@egonr/rehype-prism-plus@2.0.1","gitHead":"add39a20d47f899aec744c556b8f3bbc35602464","bugs":{"url":"https://github.com/egonr/rehype-prism-plus/issues"},"_nodeVersion":"21.6.1","_npmVersion":"10.2.4","dist":{"integrity":"sha512-3SacHHfwh5+2h7E6z5pg9r79xPa10eLWqK/ffP8UKnc+ZQ9Tz3O9P7V8+w53g6D3crd+4BG+iBTAAGl5isnEjQ==","shasum":"203e47d703556f02ab492c1060b0eeb05ab74e29","tarball":"https://registry.npmjs.org/@egonr/rehype-prism-plus/-/rehype-prism-plus-2.0.1.tgz","fileCount":15,"unpackedSize":115833,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHfrC4OcRQ+k48zgUF9Ri4aUWhzmtgPYHJfFSpBSdJsUAiEAvKwumgnDeGbuA71zLApBXIuRj/yVsvDX4xxTvkJfjhA="}]},"_npmUser":{"name":"egonr","email":"e.rabeder@gmail.com"},"directories":{},"maintainers":[{"name":"egonr","email":"e.rabeder@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rehype-prism-plus_2.0.1_1711143631749_0.7260571172871673"},"_hasShrinkwrap":false}},"time":{"created":"2024-03-22T21:33:13.553Z","2.0.0":"2024-03-22T21:33:13.804Z","modified":"2024-03-22T21:40:32.637Z","2.0.1":"2024-03-22T21:40:32.031Z"},"maintainers":[{"name":"egonr","email":"e.rabeder@gmail.com"}],"description":"rehype plugin to highlight code blocks in HTML with Prism (via refractor) with line highlighting and line numbers","homepage":"https://github.com/egonr/rehype-prism-plus#readme","keywords":["rehype","rehype-plugin","syntax-highlighting","prism","mdx","jsx"],"repository":{"type":"git","url":"git+https://github.com/egonr/rehype-prism-plus.git"},"author":{"name":"Timothy Lin","email":"timothy0336@hotmail.com","url":"https://timlrx.com"},"bugs":{"url":"https://github.com/egonr/rehype-prism-plus/issues"},"license":"MIT","readme":"# rehype-prism-plus\n\n![sample-code-block-output](sample-code-block.png)\n\n[rehype] plugin to highlight code blocks in HTML with [Prism] (via [refractor]) with additional line highlighting and line numbers functionalities.\n\nInspired by and uses a compatible API as [@mapbox/rehype-prism](https://github.com/mapbox/rehype-prism) with additional support for line-highlighting, line numbers and diff code blocks.\n\nTested to work with [xdm] and mdx v2 libraries such as [mdx-bundler]. If you are using mdx v1 libraries such as [next-mdx-remote], you will need to patch it with the `fixMetaPlugin` discussed in this [issue](https://github.com/timlrx/rehype-prism-plus/issues/20), before `rehype-prism-plus`.\n\nAn [appropriate stylesheet](#styling) should be loaded to style the language tokens, format line numbers and highlight lines. You can specify language for diff code blocks by using diff-[language] to enable syntax highlighting in diffs.\n\n## Installation\n\nThis package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c):\nNode 12+ is needed to use it and it must be `import`ed instead of `require`d.\n\n```\nnpm install rehype-prism-plus\n```\n\n## Usage\n\nThe following import paths are supported:\n\n- `rehype-prism-plus/generator`, generator function. Can be used to generate a rehype prism plugin that works on your desired languages.\n- `rehype-prism-plus/common`, [rehype plugin]. Supports the languages in `refractor/lib/common.js`.\n- `rehype-prism-plus/all`, [rehype plugin]. Works with all [language supported by refractor].\n- `rehype-prism-plus`, re-exports the above 3 packages with `rehype-prism-plus/all` as the default export.\n\nSome examples of how you might use the rehype plugin:\n\n```js\nimport rehype from 'rehype'\nimport rehypePrism from 'rehype-prism-plus'\n\nrehype().use(rehypePrism).process(/* some html */)\n```\n\nHere's an example of syntax highlighting in Markdown, with [xdm]\n\n```js\nimport { compile } from 'xdm'\nimport rehypePrism from 'rehype-prism-plus'\n\nasync function main(code) {\n  console.log(String(await compile(code, { rehypePlugins: [rehypePrism] })))\n}\n\nmain(`~~~js\nconsole.log(1)\n~~~`)\n```\n\n## Sample markdown to HTML output\n\nInput:\n\n````md\n```js {1,3-4} showLineNumbers\nfunction fancyAlert(arg) {\n  if (arg) {\n    $.facebox({ div: '#foo' })\n  }\n}\n```\n````\n\nHTML Output:\n\n```html\n<code class=\"language-js\">\n  <div class=\"code-line line-number highlight-line\" line=\"1\">\n    <span class=\"keyword\">function</span>\n    <span class=\"function\">fancyAlert</span><span class=\"punctuation\">(</span\n    ><span class=\"\">arg</span><span class=\"punctuation\">)</span>\n    <span class=\"punctuation\">{</span>\n  </div>\n  <div class=\"code-line line-number highlight-line\" line=\"2\">\n    <span class=\"keyword\">if</span>\n    <span class=\"punctuation\">(</span>arg<span class=\"punctuation\">)</span>\n    <span class=\"punctuation\">{</span>\n  </div>\n  <div class=\"code-line line-number\" line=\"3\">\n    $<span class=\"punctuation\">.</span><span class=\"function\">facebox</span\n    ><span class=\"punctuation\">(</span><span class=\"punctuation\">{</span> div<span class=\"\">:</span>\n    <span class=\"string\">'#foo'</span>\n    <span class=\"punctuation\">}</span><span class=\"punctuation\">)</span>\n  </div>\n  <div class=\"code-line line-number\" line=\"4\">\n    <span class=\"punctuation\">}</span>\n  </div>\n  <div class=\"code-line line-number\" line=\"5\">\n    <span class=\"punctuation\">}</span>\n  </div></code\n>\n```\n\n## Generating\n\nTo customise the languages for your own prism plugin:\n\n```js\nimport { refractor } from 'refractor/lib/core.js'\nimport markdown from 'refractor/lang/markdown.js'\nimport rehypePrismGenerator from 'rehype-prism-plus/generator'\n\nrefractor.register(markdown)\nconst myPrismPlugin = rehypePrismGenerator(refractor)\n```\n\n## Styling\n\nTo style the language tokens, you can just copy them from any prismjs compatible ones. Here's a list of [themes](https://github.com/PrismJS/prism-themes).\n\nIn addition, the following styles should be added for line highlighting and line numbers to work correctly:\n\n```css\npre {\n  overflow-x: auto;\n}\n\n/**\n * Inspired by gatsby remark prism - https://www.gatsbyjs.com/plugins/gatsby-remark-prismjs/\n * 1. Make the element just wide enough to fit its content.\n * 2. Always fill the visible space in .code-highlight.\n */\n.code-highlight {\n  float: left; /* 1 */\n  min-width: 100%; /* 2 */\n}\n\n.code-line {\n  display: block;\n  padding-left: 16px;\n  padding-right: 16px;\n  margin-left: -16px;\n  margin-right: -16px;\n  border-left: 4px solid rgba(0, 0, 0, 0); /* Set placeholder for highlight accent border color to transparent */\n}\n\n.code-line.inserted {\n  background-color: rgba(16, 185, 129, 0.2); /* Set inserted line (+) color */\n}\n\n.code-line.deleted {\n  background-color: rgba(239, 68, 68, 0.2); /* Set deleted line (-) color */\n}\n\n.highlight-line {\n  margin-left: -16px;\n  margin-right: -16px;\n  background-color: rgba(55, 65, 81, 0.5); /* Set highlight bg color */\n  border-left: 4px solid rgb(59, 130, 246); /* Set highlight accent border color */\n}\n\n.line-number::before {\n  display: inline-block;\n  width: 1rem;\n  text-align: right;\n  margin-right: 16px;\n  margin-left: -8px;\n  color: rgb(156, 163, 175); /* Line number color */\n  content: attr(line);\n}\n```\n\nHere's the styled output using the prism-night-owl theme:\n\n![sample-code-block-output](sample-code-block.png)\n\nFor more information on styling of language tokens, consult [refractor] and [Prism].\n\n## API\n\n`rehype().use(rehypePrism, [options])`\n\nSyntax highlights `pre > code`.\nUnder the hood, it uses [refractor], which is a virtual version of [Prism].\n\nThe code language is configured by setting a `language-{name}` class on the `<code>` element.\nYou can use any [language supported by refractor].\n\nIf no `language-{name}` class is found on a `<code>` element, it will be skipped.\n\n### options\n\n#### options.ignoreMissing\n\nType: `boolean`.\nDefault: `false`.\n\nBy default, if `{name}` does not correspond to a [language supported by refractor] an error will be thrown.\n\nIf you would like to silently skip `<code>` elements with invalid languages or support line numbers and line highlighting for code blocks without a specified language, set this option to `true`.\n\n#### options.defaultLanguage\n\nType: `string`.\nDefault: ``.\n\nUses the specified language as the default if none is specified. Takes precedence over `ignoreMissing`.\n\nNote: The language must be first registered with [refractor].\n\n#### options.showLineNumbers\n\nType: `boolean`.\nDefault: `false`.\n\nBy default, line numbers will only be displayed for code block cells with a meta property that includes 'showLineNumbers'. To control the starting line number use `showLineNumbers=X`, where `X` is the starting line number as a meta property for the code block.\n\nIf you would like to show line numbers for all code blocks, without specifying the meta property, set this to `true`.\n\n**Note**: This will wrongly assign a language class and the class might appear as `language-{1,3}` or `language-showLineNumbers`, but allow the language highlighting and line number function to work. An possible approach would be to add a placeholder like `unknown` so the `div` will have `class=\"language-unknown\"`\n\n[rehype]: https://github.com/wooorm/rehype\n[prism]: http://prismjs.com/\n[refractor]: https://github.com/wooorm/refractor\n[rehype plugin]: https://github.com/rehypejs/rehype/blob/master/doc/plugins.md#using-plugins\n[xdm]: https://github.com/wooorm/xdm\n[mdx-bundler]: https://github.com/kentcdodds/mdx-bundler\n[next-mdx-remote]: https://github.com/hashicorp/next-mdx-remote\n[language supported by refractor]: https://github.com/wooorm/refractor#syntaxes\n","readmeFilename":"README.md"}