feat: prismjs plugins support

fix #3

.milirc.yml

@@ -1,5 +1,5 @@
 template: npm:@mtpl/component
-version: 4.1.1
+version: 4.1.4
 answers:
   travis: true
   lock: false

README.md

@@ -10,28 +10,32 @@
 
 <!-- description -->
 The unified plugin used to highlight code block in html with Prism.
-And you have the ability to control whether to copy the `language-` class to `<pre>` tag
 <!-- description -->
 
 ## Usage
 
+<!-- usage -->
 This package is ESM only: Node 12+ is needed to use it and it must be imported instead of required.
 
-<!-- usage -->
-```javascript
+
+```typescript
 import unified from 'unified'
 import rehyper from 'rehyper'
 import remarkParse from 'remark-parse'
 import remarkRehype from 'remark-rehype'
 import rehypePrism from 'rehype-prism'
 import rehypeStringify from 'rehype-stringify'
 
+// you have to load css manual
+import 'prismjs/themes/prism-coy.css'
+import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
+
 // parse markdown to html
 unified()
   .use(markdown)
   .use(remark2rehype)
   // it should be after rehype
-  .use(rehypePrism)
+  .use(rehypePrism, { plugins: ['line-numbers'] })
   .use(html)
   .parse(/* markstring string */)
 
@@ -43,15 +47,21 @@ rehyper()
 ```
 
 ## Server Side Render
-Must **disabled prism autoHighlight** before `import 'rehype-prism'`, if you use the plugin in browser. there are two way to do this:
+
+`PrismJS` will auto highlight all code at `pre code` after browser `document` loaded.
+
+**Disabled prism autoHighlight** before `import 'rehype-prism'`. there are two way to do this:
 
 * set the `window.Prism = { manual: true }`
 * use the attribute `data-manual` on the `<script>` element you used for prism.
 
   `<script src="prism.js" data-manual></script>`
 
+> Some plugins will not work（e.g. `line-number`）. Because it's only work in browser.
 
+## Load Plugins
 
+The names to use can be found [here](https://github.com/PrismJS/prism/tree/master/plugins).
 
 ## Load More Languages
 
@@ -63,6 +73,7 @@ Must **disabled prism autoHighlight** before `import 'rehype-prism'`, if you use
 * If you use [babel-plugin-prismjs](https://www.npmjs.com/package/babel-plugin-prismjs).
   `import 'prismjs'` will auto load the theme setted in babel-plugin-prismjs config.
 * Import theme css manual. e.g. `import 'prismjs/themes/prism-coy.css'`
+
 <!-- usage -->
 
 <!-- addition --><!-- addition -->

package.json

@@ -1,7 +1,6 @@
 {
   "name": "rehype-prism",
   "type": "module",
-  "module": "es/index.js",
   "main": "lib/index.js",
   "scripts": {
     "test": "ava",
@@ -24,7 +23,7 @@
     "test:update": "ava -u",
     "prebuild": "npm run clean",
     "prewatch": "npm run copyfile",
-    "watch": "NODE_ENV=development ttsc -p build/tsconfig.lib.json -w",
+    "watch": "NODE_ENV=development ttsc -w",
     "copyfile": "copyfiles -e \"@(build|es|lib|node_modules|tests|doc)/**/*.!(ts)\" -e \"@(README.md|CHANGELOG.md|ava.config.js|backers.md)\" \"**/*.!(ts)\" lib"
   },
   "description": "The unified plugin used to highlight code block in html with Prism",

src/index.ts

@@ -41,8 +41,29 @@ const visitor = (preNode: hast.Element): void => {
 }
 
 const selector = (node: hast.Element): boolean => node.tagName === 'pre'
-const rehypePrism: unified.Plugin = () => (tree: Node) => {
-  visit(tree, selector as any, visitor)
+
+
+interface Options {
+  plugins: (
+    'autolinker'| 'autoloader' | 'command-line' | 'copy-to-clipboard' |
+    'custom-class' | 'data-uri-highlight' | 'diff-highlight' |
+    'download-button' | 'file-highlight' | 'filter-highlight-all' |
+    'highlight-keywords' | 'inline-color' | 'jsonp-highlight' |
+    'keep-markup' | 'line-highlight' | 'line-numbers' | 'match-braces' |
+    'normalize-whitespace' | 'previewers' | 'remove-initial-line-feed' |
+    'show-invisibles' | 'show-language' | 'toolbar' | 'treeview' |
+    'unescaped-markup' | 'wpd'
+  )[]
+}
+
+const rehypePrism: unified.Plugin<[Options?]> = (options?: Options) => {
+  if (options && options.plugins) {
+    for (const plugin of options.plugins) {
+      require(`prismjs/plugins/line-numbers/prism-${plugin}`)
+    }
+  }
+
+  return (tree: Node) => visit(tree, selector as any, visitor)
 }
 
 export default rehypePrism

tests/tsconfig.json

@@ -1,6 +1,4 @@
 {
   "extends": "../tsconfig.json",
-  "compilerOptions": {
-  },
   "include": ["./**/*.ts"]
 }