initial commit

Author: joshgoebel

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -0,0 +1,40 @@
+# Highlight.js plugin for Vue.js
+
+This plugin provides a `highlightjs` component for use
+in your templates:
+
+```html
+  <div id="app">
+    <!-- bind to a data property named `code` -->
+    <highlightjs autodetect :code="code" />
+    <!-- or literal code works as well -->
+    <highlightjs language='javascript' code="var x = 5;" />
+  </div>
+```
+
+## Using the pre-built libraries
+
+```html
+<link rel="stylesheet" href="/path/to/styles/default.css">
+<script src="/path/to/highlight.min.js"></script>
+<script src="/path/to/highlight-vue.min.js"></script>
+```
+
+Then simply register the plugin with Vue:
+
+```js
+Vue.use(hljsVuePlugin());
+```
+
+
+## Using ES6 modules / bundling
+
+```js
+import hljs from 'highlight.js/lib/core';
+import javascript from 'highlight.js/lib/languages/javascript';
+import vuePlugin from "@highlightjs/vue-plugin";
+
+hljs.registerLanguage('javascript', javascript);
+
+Vue.use(vuePlugin());
+```

dist/highlightjs-vue.min.js

@@ -0,0 +1,86 @@
+var hljsVuePlugin = (function (highlightjs) {
+  'use strict';
+
+  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+  var highlightjs__default = /*#__PURE__*/_interopDefaultLegacy(highlightjs);
+
+  function escapeHTML(value) {
+    return value
+      .replace(/&/g, '&')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#x27;');
+  }
+
+  function hasValueOrEmptyAttribute(value) {
+    return Boolean(value || value === "");
+  }
+
+  function BuildVuePlugin(hljs=highlightjs__default['default']) {
+    const Component = {
+      props: ["language", "code", "autodetect"],
+      data: function() {
+        return {
+          detectedLanguage: "",
+          unknownLanguage: false
+        };
+      },
+      computed: {
+        className() {
+          if (this.unknownLanguage) return "";
+
+          return "hljs " + this.detectedLanguage;
+        },
+        highlighted() {
+          // no idea what language to use, return raw code
+          if (!this.autoDetect && !hljs.getLanguage(this.language)) {
+            console.warn(`The language "${this.language}" you specified could not be found.`);
+            this.unknownLanguage = true;
+            return escapeHTML(this.code);
+          }
+
+          let result = {};
+          if (this.autoDetect) {
+            result = hljs.highlightAuto(this.code);
+            this.detectedLanguage = result.language;
+          } else {
+            result = hljs.highlight(this.language, this.code, this.ignoreIllegals);
+            this.detectedLanguage = this.language;
+          }
+          return result.value;
+        },
+        autoDetect() {
+          return !this.language || hasValueOrEmptyAttribute(this.autodetect);
+        },
+        ignoreIllegals() {
+          return true;
+        }
+      },
+      // this avoids needing to use a whole Vue compilation pipeline just
+      // to build Highlight.js
+      render(createElement) {
+        return createElement("pre", {}, [
+          createElement("code", {
+            class: this.className,
+            domProps: { innerHTML: this.highlighted }
+          })
+        ]);
+      }
+      // template: `<pre><code :class="className" v-html="highlighted"></code></pre>`
+    };
+
+    const VuePlugin = {
+      install(Vue) {
+        Vue.component('highlightjs', Component);
+      },
+      component: Component
+    };
+
+    return VuePlugin;
+  }
+
+  return BuildVuePlugin;
+
+}(hljs));