add ui

ui/components/highlighter/codemirror.page.styl

@@ -0,0 +1,12 @@
+@css {
+span.cm-comment { color: #008000; }
+span.cm-keyword, span.cm-variable-3 { line-height: 1em; color: #00f; }
+span.cm-string { color: #a31515; }
+span.cm-builtin { line-height: 1em; font-weight: bold; color: #077; }
+span.cm-special { line-height: 1em; font-weight: bold; color: #0aa; }
+span.cm-variable { color: black; }
+span.cm-meta { color: #2b91af; }
+span.cm-link { color: #3a3; }
+.CodeMirror-activeline-background { background: #e8f2ff; }
+.CodeMirror-matchingbracket { outline:1px solid grey; color:black !important; }
+}

ui/components/highlighter/highlighter.page.js

@@ -0,0 +1,14 @@
+import { AutoloadPage } from 'vj/misc/PageLoader';
+
+const highlighterPage = new AutoloadPage('highlighterPage', () => {
+  import('./prismjs').then((module) => {
+    const prismjs = module.default;
+    function runHighlight($container) {
+      prismjs.highlightBlocks($container);
+    }
+    runHighlight($('body'));
+    $(document).on('vjContentNew', e => runHighlight($(e.target)));
+  });
+});
+
+export default highlighterPage;

ui/components/highlighter/highlighter.page.styl

@@ -0,0 +1,122 @@
+/*
+
+VS theme by Andrew Lock
+
+https://github.com/PrismJS/prism-themes/blob/master/themes/prism-vs.css
+
+*/
+
+pre, code
+  background: $syntax-hl-bg-color
+
+pre > code
+  background: none
+  line-height: 1.5
+
+pre
+  position: relative
+  padding: rem(5px)
+
+code
+  color: $code-color
+  font-size: rem($font-size-secondary)
+
+pre > code
+  color: black
+  text-align: left
+  white-space: pre-wrap
+  word-spacing: normal
+  word-break: normal
+  tab-size: 4
+  hyphens: none
+
+[data-syntax-hl-show-line-number] pre.line-numbers > code
+  white-space: pre
+
+.syntax-hl
+  .token
+    &.comment, &.prolog, &.doctype, &.cdata
+      color: #008000
+      font-style: italic
+    &.namespace
+      opacity: 0.7
+    &.string
+      color: #a31515
+    &.punctuation, &.operator
+      color: #393A34
+    &.url, &.symbol, &.number, &.boolean, &.inserted
+      color: #36acaa
+    &.atrule, &.keyword, &.attr-value, .language-autohotkey&.selector, .language-json&.boolean, .language-json&.number
+      color: #0000ff
+    &.function
+      color: #393A34
+    &.deleted, .language-autohotkey&.tag
+      color: #9a050f
+    &.selector, .language-autohotkey&.keyword
+      color: #00009f
+    &.important, &.bold
+      font-weight: bold
+    &.italic
+      font-style: italic
+    &.class-name, .language-json&.property
+      color: #2B91AF
+    &.tag, &.selector
+      color: #800000
+    &.attr-name, &.property, &.regex, &.entity
+      color: #ff0000
+    &.directive.tag .tag
+      background: #ffff00
+      color: #393A34
+    &.macro
+      &, .token
+        color: #2b91af
+    &.builtin
+      color: #077
+
+  .toolbar
+    position: absolute
+    white-space: no-wrap
+    right: 0
+    top: 0
+    padding: rem(5px)
+    background: rgba($syntax-hl-bg-color, 0.8)
+    font-family: $primary-font-family
+    font-size: rem($font-size-small)
+    opacity: 0
+    pointer-events: none
+    transition: opacity .1s linear
+    user-select: none
+
+  &:hover .toolbar
+    opacity: 1
+    pointer-events: all
+
+[data-syntax-hl-show-line-number]
+  pre
+    padding-left: 3.8em
+    counter-reset: linenumber
+
+  pre > code
+    position: relative
+
+  .line-numbers-rows
+    position: absolute
+    pointer-events: none
+    top: 0
+    font-size: 100%
+    left: -3.8em
+    width: 3em
+    letter-spacing: -1px
+    user-select: none
+
+    span
+      pointer-events: none
+      display: block
+      counter-increment: linenumber
+
+      &:before
+        content: counter(linenumber)
+        color: #ddd
+        display: block
+        padding-right: 0.8em
+        text-align: right

ui/components/highlighter/meta.js

@@ -0,0 +1,15 @@
+// The following content is extracted from:
+// https://github.com/codemirror/CodeMirror/blob/master/mode/meta.js
+
+export default [
+  { name: 'C', ext: ['c', 'h'] },
+  { name: 'C++', ext: ['cpp', 'c++', 'cc', 'cxx', 'hpp', 'h++', 'hh', 'hxx'] },
+  { name: 'Go', ext: ['go'] },
+  { name: 'Haskell', ext: ['hs'] },
+  { name: 'Java', ext: ['java'] },
+  { name: 'JavaScript', ext: ['js'] },
+  { name: 'Pascal', ext: ['p', 'pas'] },
+  { name: 'PHP', ext: ['php', 'php3', 'php4', 'php5', 'php7', 'phtml'] },
+  { name: 'Python', ext: ['BUILD', 'bzl', 'py', 'pyw'] },
+  { name: 'Rust', ext: ['rs'] },
+];

ui/components/highlighter/prismjs.js

@@ -0,0 +1,72 @@
+/*
+
+To add a new language to highlight:
+1. Add language in babel in package.json
+2. Add new import statement in `components/cmeditor/vjcmeditor.js`
+3. Add new import statement in `components/scratchpad/ScratchpadEditorContainer.js`
+4. Add new meta data in `components/highlighter/meta.js`
+
+ */
+
+import Prism from 'prismjs';
+
+import Clipboard from 'clipboard';
+import Notification from 'vj/components/notification';
+import i18n from 'vj/utils/i18n';
+
+import languageMeta from './meta';
+
+const languageExtMap = {};
+
+// Map possible language names to Prism language name
+languageMeta.forEach((meta) => {
+  for (let i = 0; i < meta.ext.length; ++i) {
+    if (Prism.languages[meta.ext[i]] !== undefined) {
+      // eslint-disable-next-line no-param-reassign
+      meta.target = meta.ext[i];
+      break;
+    }
+  }
+  meta.ext.forEach((ext) => {
+    languageExtMap[ext] = meta.target;
+  });
+});
+
+// Copy to Clipboard
+Prism.plugins.toolbar.registerButton('copy-to-clipboard', (env) => {
+  const linkCopy = document.createElement('a');
+  linkCopy.href = 'javascript:;'; // eslint-disable-line no-script-url
+  linkCopy.textContent = 'Copy';
+  const clip = new Clipboard(linkCopy, { text: () => env.code });
+  clip.on('success', () => {
+    Notification.success(i18n('Code copied to clipboard!'), 1000);
+  });
+  clip.on('error', () => {
+    Notification.error(i18n('Copy failed :('));
+  });
+  return linkCopy;
+});
+
+const prismjsApiWrap = {
+  highlightBlocks: ($dom) => {
+    $dom.find('pre code').get().forEach((code) => {
+      const $pre = $(code).parent();
+      $pre.addClass('syntax-hl');
+      if ($pre.closest('[data-syntax-hl-show-line-number]')) {
+        $pre.addClass('line-numbers');
+      }
+      // try to map the language name
+      const language = $(code).attr('class');
+      const m = (language || '').trim().match(/^language-(.+)$/);
+      if (m && m[1]) {
+        const languageName = m[1].toLowerCase();
+        if (languageExtMap[languageName]) {
+          $(code).attr('class', `language-${languageExtMap[languageName]}`);
+        }
+      }
+      Prism.highlightElement(code);
+    });
+  },
+};
+
+export default prismjsApiWrap;