Colorize SQL w/ highlight.js

Former-commit-id: 0efb4504

fda-ui/components/query/QueryBuilder.vue

@@ -24,7 +24,10 @@
       </v-col>
     </v-row>
     <QBFilter v-if="table" v-model="clauses" :columns="selectItems && selectItems.map(s => s.name)" />
-    <pre v-if="query.formatted" v-text="query.formatted" />
+    <highlightjs
+      v-if="query.formatted"
+      autodetect
+      :code="query.formatted" />
   </div>
 </template>
 
@@ -102,12 +105,11 @@ export default {
 }
 </script>
 
-<style scoped>
-/* .select {
-   width: 200px;
-   } */
-pre {
-  background-color: #eee;
-  padding: 8px;
+<style lang="scss" scoped>
+/* these are taked from solarized-light (plugins/vendors.js), to override the
+main.scss file from vuetify, because it paints it red */
+::v-deep code {
+  background: #fdf6e3;
+  color: #657b83;
 }
 </style>

fda-ui/nuxt.config.js

@@ -36,7 +36,7 @@ export default {
   // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
   plugins: [
     { src: '~/plugins/toast', ssr: false }, // only client side
-    { src: '~/plugins/vuex-persist', ssr: false } // only client side
+    { src: '~/plugins/vendors', ssr: false } // only client side
     // { src: '~/plugins/mock' }
   ],
 

fda-ui/package.json

@@ -18,12 +18,14 @@
   },
   "dependencies": {
     "@babel/plugin-transform-runtime": "^7.13.9",
+    "@highlightjs/vue-plugin": "^1.0.2",
     "@mdi/js": "^5.8.55",
     "@nuxtjs/axios": "^5.12.2",
     "@nuxtjs/proxy": "^2.1.0",
     "axios-mock-adapter": "^1.19.0",
     "core-js": "^3.6.5",
     "date-fns": "^2.16.1",
+    "highlight.js": "^10.7.2",
     "is-docker": "^2.2.1",
     "knex": "^0.95.6",
     "multer": "^1.4.2",

fda-ui/plugins/vuex-persist.js → fda-ui/plugins/vendors.js

@@ -5,3 +5,14 @@
 //     storage: window.sessionStorage
 //   }).plugin(store)
 // }
+
+import Vue from 'vue'
+import hljs from 'highlight.js/lib/core'
+import sql from 'highlight.js/lib/languages/sql'
+import hljsVuePlugin from '@highlightjs/vue-plugin'
+import 'highlight.js/styles/solarized-light.css'
+// import 'highlight.js/styles/default.css'
+
+hljs.registerLanguage('sql', sql)
+
+Vue.use(hljsVuePlugin)

fda-ui/yarn.lock

@@ -1378,6 +1378,13 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@highlightjs/vue-plugin@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@highlightjs/vue-plugin/-/vue-plugin-1.0.2.tgz#b63cc02b9f89803698166335e2c62028b52b3c26"
+  integrity sha512-4VVPeUZL6/NZ7J6/23RQIYLm9HR9rnOdz+cxx7/ISgtMVaf0vHAAwgHKmB54GNs5VvJlWMnKOuiLVcy30elz8g==
+  dependencies:
+    highlight.js "^10.7.2"
+
 "@intlify/vue-i18n-extensions@^1.0.1":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@intlify/vue-i18n-extensions/-/vue-i18n-extensions-1.0.2.tgz"
@@ -5608,6 +5615,11 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
+highlight.js@^10.7.2:
+  version "10.7.2"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.2.tgz#89319b861edc66c48854ed1e6da21ea89f847360"
+  integrity sha512-oFLl873u4usRM9K63j4ME9u3etNF0PLiJhSQ8rdfuL51Wn3zkD6drf9ZW0dOzjnZI22YYG24z30JcmfCZjMgYg==
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz"