✨ Site > File > Viewer > Add syntaxic coloration

site/src/components/file-icon/script.js

@@ -2,13 +2,6 @@ export default
 {
     name: 'file-icon',
 
-    data()
-    {
-        return {
-            test: require('./icons/' + 'apache' + '.svg')
-        }
-    },
-
     props:
     {
         extension: { type: String, default: '' }

site/src/components/viewer/index.vue

@@ -1,3 +1,3 @@
 <template src="./template.html"></template>
 <script src="./script.js"></script>
-<style src="./style.styl" lang="stylus" scoped></style>
+<style src="./style.styl" lang="stylus"></style>

site/src/components/viewer/script.js

@@ -1,3 +1,8 @@
+import Vue from 'vue'
+import VueHighlightJS from 'vue-highlightjs'
+
+Vue.use(VueHighlightJS)
+
 export default
 {
     name: 'viewer',
@@ -12,5 +17,23 @@ export default
         {
             return this.$store.state.files.currentVersion
         }
+    },
+
+    methods:
+    {
+        onCodeKeyDown(event)
+        {
+            if(!event.metaKey && !event.ctrlKey)
+            {
+                event.preventDefault()
+            }
+            else
+            {
+                if(event.keyCode === 88 || event.keyCode === 86)
+                {
+                    event.preventDefault()
+                }
+            }
+        }
     }
 }

site/src/components/viewer/style.styl

@@ -4,4 +4,72 @@
     right 0
     width 75%
     height 100%
-    background rgba(0, 0, 255, 0.3)
+    background rgba(0, 0, 255, 0.3)
+
+.hljs-title
+    color red
+
+.hljs
+    display block
+    overflow-x auto
+    padding 0.5em
+    color #abb2bf
+    background #2d2d49
+
+.hljs-comment
+.hljs-quote
+    color #5c6370
+    font-style italic
+
+.hljs-doctag
+.hljs-keyword
+.hljs-formula
+    color #c678dd
+
+.hljs-section
+.hljs-name
+.hljs-selector-tag
+.hljs-deletion
+.hljs-subst
+    color #e06c75
+
+.hljs-literal
+    color #56b6c2
+
+.hljs-string
+.hljs-regexp
+.hljs-addition
+.hljs-attribute
+.hljs-meta-string
+    color #98c379
+
+.hljs-built_in
+.hljs-class .hljs-title
+    color #e6c07b
+
+.hljs-attr
+.hljs-variable
+.hljs-template-variable
+.hljs-type
+.hljs-selector-class
+.hljs-selector-attr
+.hljs-selector-pseudo
+.hljs-number
+    color #d19a66
+
+.hljs-symbol
+.hljs-bullet
+.hljs-link
+.hljs-meta
+.hljs-selector-id
+.hljs-title
+    color #61aeee
+
+.hljs-emphasis
+    font-style italic
+
+.hljs-strong
+    font-weight bold
+
+.hljs-link
+    text-decoration underline

site/src/components/viewer/template.html

@@ -1,3 +1,3 @@
 <div class="viewer" v-if="version">
-    <pre><code>{{ version.content }}</code></pre>
+    <pre v-highlightjs="version.content" contenteditable @keydown="onCodeKeyDown($event)"><code></code></pre>
 </div>