From 582706af2714f6aef812f359fc63c4dd0216e9e4 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Wed, 12 Jul 2017 16:27:36 -0700 Subject: [PATCH 1/5] Replace class=language-* with data-language=* to avoid potential Prism bug --- packages/gatsby-remark-prismjs/src/index.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/gatsby-remark-prismjs/src/index.js b/packages/gatsby-remark-prismjs/src/index.js index 175f37474914b..62f50a9837fd9 100644 --- a/packages/gatsby-remark-prismjs/src/index.js +++ b/packages/gatsby-remark-prismjs/src/index.js @@ -23,9 +23,14 @@ module.exports = ({ markdownAST }) => { // Replace the node with the markup we need to make // 100% width highlighted code lines work + // We use `data-language=*` rather than class="language-*" to avoid + // breaking line highlights if Prism is required by any other code. + // The language attribute enables custom user-styling without + // causing Prism to re-process our already-highlighted markup. + // @see https://github.com/gatsbyjs/gatsby/issues/1486 node.type = `html` node.value = `
- 
${highlightCode(
+      
${highlightCode(
       language,
       node.value,
       highlightLines

From c28fe1eeaee1fab49856ae9516fc9c72e2f6ad69 Mon Sep 17 00:00:00 2001
From: Brian Vaughn 
Date: Wed, 12 Jul 2017 19:14:33 -0700
Subject: [PATCH 2/5] Remark Prism plugin now accepts useDataAttribute option
 Default behavior remains as before, to use a class='language-*' prefix. New
 behavior allows for a data-language=* alternate. Snapshot tests added.

---
 packages/gatsby-remark-prismjs/package.json   |  3 +-
 .../src/__tests__/__snapshots__/index.js.snap | 89 +++++++++++++++++++
 .../src/__tests__/index.js                    | 18 ++++
 packages/gatsby-remark-prismjs/src/index.js   | 20 +++--
 4 files changed, 121 insertions(+), 9 deletions(-)
 create mode 100644 packages/gatsby-remark-prismjs/src/__tests__/__snapshots__/index.js.snap
 create mode 100644 packages/gatsby-remark-prismjs/src/__tests__/index.js

diff --git a/packages/gatsby-remark-prismjs/package.json b/packages/gatsby-remark-prismjs/package.json
index d0bdb9fbaaa60..22de6066d5e42 100644
--- a/packages/gatsby-remark-prismjs/package.json
+++ b/packages/gatsby-remark-prismjs/package.json
@@ -9,7 +9,8 @@
     "unist-util-visit": "^1.1.1"
   },
   "devDependencies": {
-    "babel-cli": "^6.24.1"
+    "babel-cli": "^6.24.1",
+    "remark": "^7.0.1"
   },
   "keywords": [
     "gatsby",
diff --git a/packages/gatsby-remark-prismjs/src/__tests__/__snapshots__/index.js.snap b/packages/gatsby-remark-prismjs/src/__tests__/__snapshots__/index.js.snap
new file mode 100644
index 0000000000000..6a06e12dcc423
--- /dev/null
+++ b/packages/gatsby-remark-prismjs/src/__tests__/__snapshots__/index.js.snap
@@ -0,0 +1,89 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`remark prism plugin generates a 
 tag with a data attribute if configured to do so 1`] = `
+Object {
+  "children": Array [
+    Object {
+      "lang": "js",
+      "position": Position {
+        "end": Object {
+          "column": 4,
+          "line": 3,
+          "offset": 17,
+        },
+        "indent": Array [
+          1,
+          1,
+        ],
+        "start": Object {
+          "column": 1,
+          "line": 1,
+          "offset": 0,
+        },
+      },
+      "type": "html",
+      "value": "

+      
// Fake
+

+      
",
+    },
+  ],
+  "position": Object {
+    "end": Object {
+      "column": 4,
+      "line": 3,
+      "offset": 17,
+    },
+    "start": Object {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "type": "root",
+}
+`;
+
+exports[`remark prism plugin generates a 
 tag with a language class by default 1`] = `
+Object {
+  "children": Array [
+    Object {
+      "lang": "js",
+      "position": Position {
+        "end": Object {
+          "column": 4,
+          "line": 3,
+          "offset": 17,
+        },
+        "indent": Array [
+          1,
+          1,
+        ],
+        "start": Object {
+          "column": 1,
+          "line": 1,
+          "offset": 0,
+        },
+      },
+      "type": "html",
+      "value": "

+      
// Fake
+

+      
",
+    },
+  ],
+  "position": Object {
+    "end": Object {
+      "column": 4,
+      "line": 3,
+      "offset": 17,
+    },
+    "start": Object {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "type": "root",
+}
+`;
diff --git a/packages/gatsby-remark-prismjs/src/__tests__/index.js b/packages/gatsby-remark-prismjs/src/__tests__/index.js
new file mode 100644
index 0000000000000..339f932b16236
--- /dev/null
+++ b/packages/gatsby-remark-prismjs/src/__tests__/index.js
@@ -0,0 +1,18 @@
+const remark = require(`remark`)
+const plugin = require(`../index`)
+
+describe(`remark prism plugin`, () => {
+  it(`generates a 
 tag with a language class by default`, () => {
+    const code = '```js\n// Fake\n```'
+    const markdownAST = remark.parse(code)
+    plugin({ markdownAST })
+    expect(markdownAST).toMatchSnapshot()
+  })
+
+  it(`generates a 
 tag with a data attribute if configured to do so`, () => {
+    const code = '```js\n// Fake\n```'
+    const markdownAST = remark.parse(code)
+    plugin({ markdownAST }, { useDataAttribute: true})
+    expect(markdownAST).toMatchSnapshot()
+  })
+})
diff --git a/packages/gatsby-remark-prismjs/src/index.js b/packages/gatsby-remark-prismjs/src/index.js
index 62f50a9837fd9..9b6b7203c2c93 100644
--- a/packages/gatsby-remark-prismjs/src/index.js
+++ b/packages/gatsby-remark-prismjs/src/index.js
@@ -3,7 +3,7 @@ const visit = require(`unist-util-visit`)
 const parseLineNumberRange = require(`./parse-line-number-range`)
 const highlightCode = require(`./highlight-code`)
 
-module.exports = ({ markdownAST }) => {
+module.exports = ({ markdownAST }, { useDataAttribute = false } = {}) => {
   visit(markdownAST, `code`, node => {
     let language = node.lang
     let { splitLanguage, highlightLines } = parseLineNumberRange(language)
@@ -15,22 +15,26 @@ module.exports = ({ markdownAST }) => {
     // outcome without any additional CSS.
     //
     // @see https://github.com/PrismJS/prism/blob/1d5047df37aacc900f8270b1c6215028f6988eb1/themes/prism.css#L49-L54
-    let preCssClassLanguage = `none`
+    let languageName = `none`
     if (language) {
       language = language.toLowerCase()
-      preCssClassLanguage = language
+      languageName = language
     }
 
-    // Replace the node with the markup we need to make
-    // 100% width highlighted code lines work
-    // We use `data-language=*` rather than class="language-*" to avoid
-    // breaking line highlights if Prism is required by any other code.
+    // Use a data attribute rather than a class name to avoid breaking
+    // line highlights if Prism is required by any other code.
     // The language attribute enables custom user-styling without
     // causing Prism to re-process our already-highlighted markup.
     // @see https://github.com/gatsbyjs/gatsby/issues/1486
+    const languageFlag = useDataAttribute
+      ? `data-language="${languageName}"`
+      : `class="language-${languageName}"`
+
+    // Replace the node with the markup we need to make
+    // 100% width highlighted code lines work
     node.type = `html`
     node.value = `

-      
${highlightCode(
+      
${highlightCode(
       language,
       node.value,
       highlightLines

From 4e09661f8d13fb14d04e0801efe7269a30913bcd Mon Sep 17 00:00:00 2001
From: Brian Vaughn 
Date: Wed, 12 Jul 2017 19:30:20 -0700
Subject: [PATCH 3/5] Alternate, custom-class-prefix approach to fixing
 Prism+ReactLive bug

---
 .../src/__tests__/__snapshots__/index.js.snap      |  6 +++---
 .../gatsby-remark-prismjs/src/__tests__/index.js   |  6 +++---
 packages/gatsby-remark-prismjs/src/index.js        | 14 ++++++--------
 3 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/packages/gatsby-remark-prismjs/src/__tests__/__snapshots__/index.js.snap b/packages/gatsby-remark-prismjs/src/__tests__/__snapshots__/index.js.snap
index 6a06e12dcc423..5b2e7c22e5abb 100644
--- a/packages/gatsby-remark-prismjs/src/__tests__/__snapshots__/index.js.snap
+++ b/packages/gatsby-remark-prismjs/src/__tests__/__snapshots__/index.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`remark prism plugin generates a 
 tag with a data attribute if configured to do so 1`] = `
+exports[`remark prism plugin generates a 
 tag with a custom class prefix if configured 1`] = `
 Object {
   "children": Array [
     Object {
@@ -23,7 +23,7 @@ Object {
       },
       "type": "html",
       "value": "

-      
// Fake
+      
// Fake
 

       
",
     },
@@ -44,7 +44,7 @@ Object {
 }
 `;
 
-exports[`remark prism plugin generates a 
 tag with a language class by default 1`] = `
+exports[`remark prism plugin generates a 
 tag with class="language-*" prefix by default 1`] = `
 Object {
   "children": Array [
     Object {
diff --git a/packages/gatsby-remark-prismjs/src/__tests__/index.js b/packages/gatsby-remark-prismjs/src/__tests__/index.js
index 339f932b16236..ffe04b638c80a 100644
--- a/packages/gatsby-remark-prismjs/src/__tests__/index.js
+++ b/packages/gatsby-remark-prismjs/src/__tests__/index.js
@@ -2,17 +2,17 @@ const remark = require(`remark`)
 const plugin = require(`../index`)
 
 describe(`remark prism plugin`, () => {
-  it(`generates a 
 tag with a language class by default`, () => {
+  it(`generates a 
 tag with class="language-*" prefix by default`, () => {
     const code = '```js\n// Fake\n```'
     const markdownAST = remark.parse(code)
     plugin({ markdownAST })
     expect(markdownAST).toMatchSnapshot()
   })
 
-  it(`generates a 
 tag with a data attribute if configured to do so`, () => {
+  it(`generates a 
 tag with a custom class prefix if configured`, () => {
     const code = '```js\n// Fake\n```'
     const markdownAST = remark.parse(code)
-    plugin({ markdownAST }, { useDataAttribute: true})
+    plugin({ markdownAST }, { classPrefix: 'custom-' })
     expect(markdownAST).toMatchSnapshot()
   })
 })
diff --git a/packages/gatsby-remark-prismjs/src/index.js b/packages/gatsby-remark-prismjs/src/index.js
index 9b6b7203c2c93..29cdfa266e3f9 100644
--- a/packages/gatsby-remark-prismjs/src/index.js
+++ b/packages/gatsby-remark-prismjs/src/index.js
@@ -3,7 +3,7 @@ const visit = require(`unist-util-visit`)
 const parseLineNumberRange = require(`./parse-line-number-range`)
 const highlightCode = require(`./highlight-code`)
 
-module.exports = ({ markdownAST }, { useDataAttribute = false } = {}) => {
+module.exports = ({ markdownAST }, { classPrefix = 'language-' } = {}) => {
   visit(markdownAST, `code`, node => {
     let language = node.lang
     let { splitLanguage, highlightLines } = parseLineNumberRange(language)
@@ -21,20 +21,18 @@ module.exports = ({ markdownAST }, { useDataAttribute = false } = {}) => {
       languageName = language
     }
 
-    // Use a data attribute rather than a class name to avoid breaking
+    // Allow users to specify a custom class prefix to avoid breaking
     // line highlights if Prism is required by any other code.
-    // The language attribute enables custom user-styling without
-    // causing Prism to re-process our already-highlighted markup.
+    // This supports custom user styling without causing Prism to
+    // re-process our already-highlighted markup.
     // @see https://github.com/gatsbyjs/gatsby/issues/1486
-    const languageFlag = useDataAttribute
-      ? `data-language="${languageName}"`
-      : `class="language-${languageName}"`
+    const className = `${classPrefix}${languageName}`
 
     // Replace the node with the markup we need to make
     // 100% width highlighted code lines work
     node.type = `html`
     node.value = `

-      
${highlightCode(
+      
${highlightCode(
       language,
       node.value,
       highlightLines

From 13e48f9b37c8a6bf54852545972560d13679570c Mon Sep 17 00:00:00 2001
From: Brian Vaughn 
Date: Thu, 13 Jul 2017 08:33:50 -0700
Subject: [PATCH 4/5] Added README note about new plugin option

---
 packages/gatsby-remark-prismjs/README.md | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/gatsby-remark-prismjs/README.md b/packages/gatsby-remark-prismjs/README.md
index b8f69c0bfe823..c69249e5b85a6 100644
--- a/packages/gatsby-remark-prismjs/README.md
+++ b/packages/gatsby-remark-prismjs/README.md
@@ -16,7 +16,16 @@ plugins: [
     resolve: `gatsby-transformer-remark`,
     options: {
       plugins: [
-        `gatsby-remark-prismjs`,
+        {
+          resolve: `gatsby-remark-prismjs`,
+          options: {
+            // Class prefix for 
 tags containing syntax highlighting;
+            // Defaults to 'language-'.
+            // If you use Prism directly within your site,
+            // you may use this to prevent Prism from re-processing syntax.
+            classPrefix: 'language-',
+          },
+        },
       ]
     }
   }

From d30d1c6f4bd98b90cc1b3ea82e9c43211f246819 Mon Sep 17 00:00:00 2001
From: Brian Vaughn 
Date: Thu, 13 Jul 2017 12:30:24 -0700
Subject: [PATCH 5/5] Provided more context for the remark prism docs comment

---
 packages/gatsby-remark-prismjs/README.md | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/gatsby-remark-prismjs/README.md b/packages/gatsby-remark-prismjs/README.md
index c69249e5b85a6..d572012e37089 100644
--- a/packages/gatsby-remark-prismjs/README.md
+++ b/packages/gatsby-remark-prismjs/README.md
@@ -20,9 +20,12 @@ plugins: [
           resolve: `gatsby-remark-prismjs`,
           options: {
             // Class prefix for 
 tags containing syntax highlighting;
-            // Defaults to 'language-'.
-            // If you use Prism directly within your site,
+            // defaults to 'language-' (eg 
).
+            // 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-',
           },
         },