Add readme-syntax-highlighter package and use in ApiExplorer

Author: Dom Harrington

packages/api-explorer-ui/__tests__/lib/generate-code-snippets.test.js

@@ -13,6 +13,6 @@ test('should generate a HTML snippet for each lang', () => {
 
   Object.keys(snippets).forEach((lang) => {
     expect(typeof snippets[lang]).toBe('string');
-    // expect(snippets[lang]).toEqual(expect.stringMatching(/cm-s-tomorrow-night/));
+    expect(snippets[lang]).toEqual(expect.stringMatching(/cm-s-tomorrow-night/));
   });
 });

packages/api-explorer-ui/src/CodeSample.jsx

@@ -34,6 +34,7 @@ function CodeSample({ oas, setLanguage, path, method }) {
                     <li key={lang}>
                       <a
                         role="link"
+                        href="#"
                         className={`hub-lang-switch-${lang}`}
                         onClick={setLanguage.bind(null, lang)}
                       >{lang}</a>
@@ -73,9 +74,11 @@ function CodeSample({ oas, setLanguage, path, method }) {
             <i className="icon icon-sync icon-spin" ng-show="codeLoading" />
             {
               Object.keys(snippets).map(lang => (
-                <pre key={lang} className={`tomorrow-night hub-lang hub-lang-${lang}`}>
-                  {snippets[lang]}
-                </pre>
+                <pre
+                  key={lang}
+                  className={`tomorrow-night hub-lang hub-lang-${lang}`}
+                  dangerouslySetInnerHTML={{ __html: snippets[lang] }}
+                />
               ))
             }
           </div>

packages/api-explorer-ui/src/lib/generate-code-snippets.js

@@ -1,5 +1,6 @@
 const HTTPSnippet = require('httpsnippet');
 const generateHar = require('./oas-to-har');
+const syntaxHighlighter = require('readme-syntax-highlighter');
 
 const supportedLanguages = {
   node: {
@@ -64,8 +65,9 @@ module.exports = (oas, path, method, languages) => {
   const snippet = new HTTPSnippet(har);
 
   return languages.reduce((snippets, lang) => {
+    const language = supportedLanguages[lang];
     return Object.assign(snippets, {
-      [lang]: snippet.convert(...supportedLanguages[lang].httpsnippet),
+      [lang]: syntaxHighlighter(snippet.convert(...language.httpsnippet), language.highlight),
     });
   }, {});
 };

packages/readme-syntax-highlighter/.editorconfig

@@ -0,0 +1,11 @@
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[*js]
+charset = utf-8
+indent_style = space
+trim_trailing_whitespace = true

packages/readme-syntax-highlighter/.eslintignore

@@ -0,0 +1,2 @@
+**/node_modules
+coverage

packages/readme-syntax-highlighter/.eslintrc

@@ -0,0 +1,6 @@
+{
+  "extends": "airbnb-base",
+  "rules": {
+
+  }
+}

packages/readme-syntax-highlighter/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+coverage

packages/readme-syntax-highlighter/.jsinspectrc

@@ -0,0 +1,7 @@
+{
+  "threshold": 30,
+  "identifiers": true,
+  "ignore": "test",
+  "reporter": "default",
+  "suppress": 100
+}

packages/readme-syntax-highlighter/.travis.yml

@@ -0,0 +1,5 @@
+language: node_js
+sudo: false
+node_js:
+  - 6.0
+  - 8.0

packages/readme-syntax-highlighter/LICENSE

@@ -0,0 +1,13 @@
+Copyright (c) 2017, Dom Harrington <dom@harrington-mail.com>
+
+Permission to use, copy, modify, and/or distribute this software for any purpose
+with or without fee is hereby granted, provided that the above copyright notice
+and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
+OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+THIS SOFTWARE.

packages/readme-syntax-highlighter/README.md

@@ -0,0 +1,21 @@
+# readme-syntax-highlighter
+
+Syntax highlighter used on ReadMe.io
+
+[![build status](https://secure.travis-ci.org/readme/readme-syntax-highlighter.svg)](http://travis-ci.org/readme/readme-syntax-highlighter)
+[![dependency status](https://david-dm.org/readme/readme-syntax-highlighter.svg)](https://david-dm.org/readme/readme-syntax-highlighter)
+
+## Installation
+
+```
+npm install --save readme-syntax-highlighter
+```
+
+## Usage
+
+## Credits
+[Dom Harrington](https://github.com/readme/)
+
+## License
+
+ISC

packages/readme-syntax-highlighter/codemirror.js

@@ -0,0 +1,44 @@
+const CodeMirror = require('codemirror');
+require('codemirror/addon/runmode/runmode');
+require('codemirror/mode/meta.js');
+
+require('codemirror/mode/shell/shell');
+require('codemirror/mode/javascript/javascript');
+require('codemirror/mode/ruby/ruby');
+require('codemirror/mode/python/python');
+
+function esc(str) {
+  return str.replace(/[<&]/g, ch => (ch === '&' ? '&amp;' : '&lt;'));
+}
+
+module.exports = (code, lang) => {
+  let output = '';
+
+  // if (!CodeMirror.modes[lang]) {
+  //   require(`codemirror/mode/${lang}/${lang}.js`);
+  // }
+
+  let curStyle = null;
+  let accum = '';
+  function flush() {
+    accum = esc(accum);
+    if (curStyle) {
+      output += `<span class="${curStyle.replace(/(^|\s+)/g, '$1cm-')}">${accum}</span>`;
+    } else {
+      output += accum;
+    }
+  }
+
+  CodeMirror.runMode(code, lang, (text, style) => {
+    if (style !== curStyle) {
+      flush();
+      curStyle = style;
+      accum = text;
+    } else {
+      accum += text;
+    }
+  });
+  flush();
+
+  return output;
+};

packages/readme-syntax-highlighter/example.js

@@ -0,0 +1,67 @@
+const codemirror = require('./codemirror');
+
+function sanitizeCode(code) {
+  const entityMap = {
+    '&': '&',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;',
+    '/': '&#x2F;',
+  };
+
+  return String(code).replace(/[&<>"'/]/g, s => entityMap[s]);
+}
+
+module.exports = (code, lang/* , dark */) => {
+  if (lang === 'text') {
+    return sanitizeCode(code);
+  }
+
+  const theme = 'cm-s-tomorrow-night';
+  // let theme = 'cm-s-neo';
+  // if (dark) {
+  //   theme = 'cm-s-tomorrow-night';
+  // }
+
+  // const modes = {
+  //   html: 'htmlmixed',
+  //   json: ['javascript', 'application/ld+json'],
+  //   text: ['null', 'text/plain'],
+  //   markdown: 'gfm',
+  //   stylus: 'scss',
+  //   bash: 'shell',
+  //   mysql: 'sql',
+  //   sql: ['sql', 'text/x-sql'],
+  //   curl: 'shell',
+  //   asp: 'clike',
+  //   csharp: ['clike', 'text/x-csharp'],
+  //   cplusplus: ['clike', 'text/x-c++src'],
+  //   c: 'clike',
+  //   java: ['clike', 'text/x-java'],
+  //   scala: ['clike', 'text/x-scala'],
+  //   objectivec: ['clike', 'text/x-objectivec'],
+  //   liquid: 'htmlmixed',
+  //   scss: 'css',
+  // };
+
+  // let mode = lang;
+
+  // if (mode in modes) {
+  //   mode = modes[mode];
+  //   lang = mode;
+  //   if (_.isArray(mode)) {
+  //     lang = mode[0];
+  //     mode = mode[1];
+  //   }
+  // }
+
+  // let highlighted = ;
+
+  // // Kind of a hack, but no other way to sanitize angular code
+  // // Can't use ng-non-bindable because of jwt variables
+  // highlighted = highlighted.replace(/{{/g, '&#123;<span></span>&#123;');
+  // highlighted = highlighted.replace(/}}/g, '&#125;<span></span>&#125;');
+
+  return `<span class="${theme}">${codemirror(code, lang)}</span>`;
+};