Fix syntax highlighting (#1142)

* Fix syntax highlighting

* Fix webpack ignore plugin

.gitattributes

@@ -6,6 +6,9 @@
 *.md diff=markdown
 *.php diff=php
 
+public/*.css binary
+public/*.js binary
+
 /.github export-ignore
 /art export-ignore
 /tests export-ignore

package.json

@@ -12,7 +12,7 @@
     "devDependencies": {
         "axios": "^0.21",
         "bootstrap": "^4.5.0",
-        "highlight.js": "^10.4.1",
+        "highlight.js": "^11.3.1",
         "jquery": "^3.5",
         "laravel-mix": "^6.0.6",
         "lodash": "^4.17.19",

resources/js/components/ExceptionCodePreview.vue

@@ -1,14 +1,29 @@
 <script type="text/ecmascript-6">
+    import hljs from 'highlight.js/lib/core';
+    import php from 'highlight.js/lib/languages/php';
+
+    hljs.registerLanguage('php', php);
+
     export default {
         props: ['lines', 'highlightedLine'],
+
+        methods: {
+            highlight(line, number){
+                if (number == this.highlightedLine) {
+                    return line;
+                }
+
+                return hljs.highlight(line, { language: 'php' }).value;
+            }
+        }
     }
 </script>
 
 <template>
     <pre class="code-bg px-4 mb-0 text-white">
         <p v-for="(line, number) in lines"
            class="mb-0"
-           :class="{'highlight': number == highlightedLine}"><span class="mr-4">{{number}}</span> <span>{{line}}</span></p>
+           :class="{'highlight': number == highlightedLine}"><span class="mr-4">{{number}}</span> <span v-html="highlight(line, number)" /></p>
     </pre>
 </template>
 

resources/js/screens/queries/preview.vue

@@ -1,14 +1,15 @@
 <script type="text/ecmascript-6">
-    import hljs from 'highlight.js/lib/highlight';
+    import hljs from 'highlight.js/lib/core';
     import sql from 'highlight.js/lib/languages/sql';
     import { format } from 'sql-formatter';
 
+    hljs.registerLanguage('sql', sql);
+
     export default {
         methods: {
             highlightSQL() {
                 this.$nextTick(() => {
-                    hljs.registerLanguage('sql', sql);
-                    hljs.highlightBlock(this.$refs.sqlcode);
+                    hljs.highlightElement(this.$refs.sqlcode);
                 });
             },
             formatSql(sql) {

resources/sass/base.scss

@@ -1,5 +1,5 @@
-@import 'syntaxhighlight';
 @import 'node_modules/bootstrap/scss/bootstrap';
+@import 'syntaxhighlight';
 
 body {
     padding-bottom: 20px;

resources/sass/syntaxhighlight.scss

@@ -1,6 +1,5 @@
 .vjs-tree {
-    // Fallback for missing fonts from vue-json-pretty on Ubuntu
-    font-family: Monaco, Menlo, Consolas, Bitstream Vera Sans Mono, monospace !important;
+    font-family: $font-family-monospace;
 
     .vjs-tree__content {
         border-left: 1px dotted rgba(204, 204, 204, 0.28) !important;
@@ -15,9 +14,7 @@
         position: absolute;
         left: -30px;
     }
-    .vjs-value__null {
-        color: #a291f5 !important;
-    }
+    .vjs-value__null,
     .vjs-value__number,
     .vjs-value__boolean {
         color: #a291f5 !important;
@@ -29,17 +26,30 @@
 
 .hljs-keyword,
 .hljs-selector-tag,
-.hljs-addition {
-    color: #8bd72f;
+.hljs-addition,
+.hljs-attr {
+    color: #13ce66;
 }
 
 .hljs-string,
-.hljs-meta .hljs-meta-string,
-.hljs-doctag,
-.hljs-regexp {
+.hljs-meta,
+.hljs-name,
+.hljs-type,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-variable,
+.hljs-template-tag,
+.hljs-template-variable {
     color: #dacb4d;
 }
 
+.hljs-comment,
+.hljs-quote,
+.hljs-deletion {
+    color: #bfcbd9;
+}
+
+.hljs-title,
 .hljs-number,
 .hljs-literal {
     color: #a291f5 !important;

webpack.mix.js

@@ -35,5 +35,8 @@ mix.options({
                 '@': path.resolve(__dirname, 'resources/js/'),
             },
         },
-        plugins: [new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)],
+        plugins: [new webpack.IgnorePlugin({
+            resourceRegExp: /^\.\/locale$/,
+            contextRegExp: /moment$/,
+        })],
     });