Merge pull request #33 from johnnyhuy/feature/add-highlight-js

feat: added code highlighting

packages/ggsmark/__tests__/index.spec.js

@@ -98,8 +98,8 @@ describe('should have github-like markdown', () => {
 
     // Assert
     expect(result).toBe(dedent`
-    <pre><code class="language-ruby">require 'redcarpet'
-    markdown = Redcarpet.new("Hello World!")
+    <pre><code class="hljs language-ruby"><span class="hljs-keyword">require</span> <span class="hljs-string">'redcarpet'</span>
+    markdown = Redcarpet.new(<span class="hljs-string">"Hello World!"</span>)
     puts markdown.to_html
     </code></pre>
     `)
@@ -457,3 +457,31 @@ describe('render twitch video blocks', () => {
     `)
   })
 })
+
+describe('render code blocks highlighted', () => {
+  test('should highlight javascript', () => {
+    // Arrange
+    let string = dedent`
+    \`\`\`javascript
+    let dog = true
+
+    if (dog) {
+      console.log('woof')
+    }
+    \`\`\`
+    `
+
+    // Act
+    let result = ggsmark(string, { twitchParents: ['ggs.sx'] })
+
+    // Assert
+    expect(result).toBe(dedent`
+    <pre><code class="hljs language-javascript"><span class="hljs-keyword">let</span> dog = <span class="hljs-literal">true</span>
+
+    <span class="hljs-keyword">if</span> (dog) {
+      <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'woof'</span>)
+    }
+    </code></pre>
+    `)
+  })
+})

packages/ggsmark/package.json

@@ -9,6 +9,7 @@
     "deepmerge": "^4.2.2",
     "hast-util-sanitize": "^3.0.0",
     "regenerator-runtime": "^0.13.7",
+    "rehype-highlight": "^4.0.0",
     "rehype-sanitize": "^4.0.0",
     "rehype-stringify": "^8.0.0",
     "remark-color-text": "^0.3.11",

packages/ggsmark/src/index.js

@@ -9,6 +9,7 @@ import iframe from 'remark-iframes'
 import align from 'remark-text-alignment'
 import color from 'remark-color-text'
 import spoilers from 'remark-spoilers'
+import highlight from 'rehype-highlight'
 
 // Don't use remark-html otherwise we can't customize HTML
 import stringify from 'rehype-stringify'
@@ -181,6 +182,7 @@ export default (text, options = {}) => {
     })
     .use(align)
     .use(rehype)
+    .use(highlight)
     .use(stringify)
     .use(color)
     .use(spoilers)