Add autolinker plugins ( #9 )

CHANGELOG.md

@@ -1,3 +1,13 @@
+## 0.5.0 (2022-12-18)
+
+### ✨ Features
+
+  * Add autolinker plugins
+
+Credits
+
+* [@Bunlong](https://github.com/Bunlong)
+
 ## 0.4.0 (2022-12-17)
 
 ### ✨ Features

README.md

@@ -38,13 +38,11 @@ export default function App() {
   const { Code } = usePrism()
 
   return (
-    <>
-      <Code language='javascript'>
+    <Code language='javascript'>
       {`<div className="example">
   {Math.random()}
 </div>`}
-      </Code>
-    </>
+    </Code>
   )
 }
 ```
@@ -68,13 +66,9 @@ function App() {
 
   return (
     <>
-      <button onClick={() => setCount(count + 1)}>
-        Click me
-      </button>
+      <button onClick={() => setCount(count + 1)}>Click me</button>
       <p>You clicked {count} times</p>
-      <Code language='javascript'>
-        {`<p>You clicked ${count} times<p>`}
-      </Code>
+      <Code language='javascript'>{`<p>You clicked ${count} times<p>`}</Code>
     </>
   )
 }
@@ -777,13 +771,11 @@ export default function App() {
   const { Code } = usePrism()
 
   return (
-    <>
-      <Code language='javascript' lineNumbers={true}>
+    <Code language='javascript' lineNumbers={true}>
       {`<div className="example">
   {Math.random()}
 </div>`}
-      </Code>
-    </>
+    </Code>
   )
 }
 ```
@@ -807,22 +799,48 @@ export default function App() {
   const { Code } = usePrism()
 
   return (
-    <>
-      <Code language='javascript'>
+    <Code language='javascript'>
       {`<div className="example">
-  {Math.random()}
+{Math.random()}
 </div>`}
-      </Code>
-    </>
+    </Code>
   )
 }
 ```
 
+### Autolinker
+
+Converts URLs and emails in code to clickable links. Parses Markdown links in comments.
+
+```javascript
+import { usePrism } from 'next-prism'
+
+// Import a theme.css
+import 'next-prism/themes/tomorrow.css'
+
+// Import autolinker source
+import 'next-prism/plugins/autolinker/autolinker'
+// Import autolinker.css
+import 'next-prism/plugins/autolinker/autolinker.css'
+
+function App() {
+  const { Code } = usePrism()
+
+  return (
+    <Code language="javascript">
+      {`<div className="example">
+  <a href="https://github.com/Bunlong/next-prism">next-prism</a>
+</div>`}
+    </Code>
+  );
+}
+```
+
 ## 📜 Changelog
 
-Latest version 0.4.0 (2022-12-17):
+Latest version 0.5.0 (2022-12-18):
 
-  * Add show-invisibles plugins
+  * Add autolinker plugins
 
 Details changes for each release are documented in the [CHANGELOG.md](https://github.com/Bunlong/next-prism/blob/master/CHANGELOG.md).
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-prism",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "A lightweight, robust, and elegant syntax highlighting component for your next React apps.",
   "author": "Bunlong <bunlong.van@gmail.com>",
   "license": "MIT",

plugins/autolinker/autolinker.css

@@ -0,0 +1,3 @@
+.token a {
+	color: inherit;
+}

plugins/autolinker/autolinker.js

@@ -0,0 +1,76 @@
+(function () {
+
+	if (typeof Prism === 'undefined') {
+		return;
+	}
+
+	var url = /\b([a-z]{3,7}:\/\/|tel:)[\w\-+%~/.:=&!$'()*,;@]+(?:\?[\w\-+%~/.:=?&!$'()*,;@]*)?(?:#[\w\-+%~/.:#=?&!$'()*,;@]*)?/;
+	var email = /\b\S+@[\w.]+[a-z]{2}/;
+	var linkMd = /\[([^\]]+)\]\(([^)]+)\)/;
+
+	// Tokens that may contain URLs and emails
+	var candidates = ['comment', 'url', 'attr-value', 'string'];
+
+	Prism.plugins.autolinker = {
+		processGrammar: function (grammar) {
+			// Abort if grammar has already been processed
+			if (!grammar || grammar['url-link']) {
+				return;
+			}
+			Prism.languages.DFS(grammar, function (key, def, type) {
+				if (candidates.indexOf(type) > -1 && !Array.isArray(def)) {
+					if (!def.pattern) {
+						def = this[key] = {
+							pattern: def
+						};
+					}
+
+					def.inside = def.inside || {};
+
+					if (type == 'comment') {
+						def.inside['md-link'] = linkMd;
+					}
+					if (type == 'attr-value') {
+						Prism.languages.insertBefore('inside', 'punctuation', { 'url-link': url }, def);
+					} else {
+						def.inside['url-link'] = url;
+					}
+
+					def.inside['email-link'] = email;
+				}
+			});
+			grammar['url-link'] = url;
+			grammar['email-link'] = email;
+		}
+	};
+
+	Prism.hooks.add('before-highlight', function (env) {
+		Prism.plugins.autolinker.processGrammar(env.grammar);
+	});
+
+	Prism.hooks.add('wrap', function (env) {
+		if (/-link$/.test(env.type)) {
+			env.tag = 'a';
+
+			var href = env.content;
+
+			if (env.type == 'email-link' && href.indexOf('mailto:') != 0) {
+				href = 'mailto:' + href;
+			} else if (env.type == 'md-link') {
+				// Markdown
+				var match = env.content.match(linkMd);
+
+				href = match[2];
+				env.content = match[1];
+			}
+
+			env.attributes.href = href;
+
+			// Silently catch any error thrown by decodeURIComponent (#1186)
+			try {
+				env.content = decodeURIComponent(env.content);
+			} catch (e) { /* noop */ }
+		}
+	});
+
+}());

supports/create-react-app/src/App.js

@@ -1,29 +1,19 @@
-import { useState, useEffect } from 'react';
 import { usePrism } from 'next-prism';
 
 import 'next-prism/themes/tomorrow.css';
 
-import 'next-prism/plugins/show-invisibles/show-invisibles.css';
-import 'next-prism/plugins/show-invisibles/show-invisibles';
+import 'next-prism/plugins/autolinker/autolinker';
+import 'next-prism/plugins/autolinker/autolinker.css';
 
 function App() {
-  const [count, setCount] = useState(0);
-  const { Code, highlightAll } = usePrism();
-
-  useEffect(() => {
-    highlightAll();
-  }, [count]);
+  const { Code } = usePrism();
 
   return (
-    <>
-      <button onClick={() => setCount(count + 1)}>
-        Click me
-      </button>
-      <p>You clicked {count} times</p>
-      <Code language='javascript'>
-        {`<p>You clicked ${count} times<p>`}
-      </Code>
-    </>
+    <Code language="javascript">
+      {`<div className="example">
+  <a href="https://github.com/Bunlong/next-prism">next-prism</a>
+</div>`}
+    </Code>
   );
 }