diff --git a/README.md b/README.md index c7090ec579..a82c4a9441 100644 --- a/README.md +++ b/README.md @@ -147,10 +147,11 @@ div.code { ## Using with Vue.js -Simply register the plugin with Vue: +Simply build & register the plugin with Vue: ```js -Vue.use(hljs.vuePlugin); +import { buildVuePlugin } from "highlight.js/lib/vue_plugin.js"; +Vue.use(buildVuePlugin(hljs).VuePlugin); ``` And you'll be provided with a `highlightjs` component for use diff --git a/src/highlight.js b/src/highlight.js index 6c3e889fba..d81729c278 100644 --- a/src/highlight.js +++ b/src/highlight.js @@ -12,7 +12,6 @@ import * as utils from './lib/utils.js'; import * as MODES from './lib/modes.js'; import { compileLanguage } from './lib/mode_compiler.js'; import * as packageJSON from '../package.json'; -import { BuildVuePlugin } from "./plugins/vue.js"; import * as logger from "./lib/logger.js"; const escape = utils.escapeHTML; @@ -898,9 +897,7 @@ const HLJS = function(hljs) { registerAliases, autoDetection, inherit, - addPlugin, - // plugins for frameworks - vuePlugin: BuildVuePlugin(hljs).VuePlugin + addPlugin }); hljs.debugMode = function() { SAFE_MODE = false; }; diff --git a/src/plugins/vue.js b/src/plugins/vue.js index d4ffd7e05c..f52bc26f1b 100644 --- a/src/plugins/vue.js +++ b/src/plugins/vue.js @@ -5,7 +5,7 @@ function hasValueOrEmptyAttribute(value) { return Boolean(value || value === ""); } -export function BuildVuePlugin(hljs) { +export default function BuildVuePlugin(hljs) { const Component = { props: ["language", "code", "autodetect"], data: function() { diff --git a/tools/build_browser.js b/tools/build_browser.js index 1afb51e739..54901cac11 100644 --- a/tools/build_browser.js +++ b/tools/build_browser.js @@ -58,6 +58,7 @@ async function buildBrowser(options) { detailedGrammarSizes(languages); + await buildVuePluginJS({ minify: options.minify }); const size = await buildBrowserHighlightJS(languages, { minify: options.minify }); log("-----"); @@ -154,6 +155,29 @@ function installDemoStyles() { }); } +async function buildVuePluginJS({ minify }) { + log("Building vue_plugin.js."); + + const outFile = `${process.env.BUILD_DIR}/vue_plugin.js`; + const minifiedFile = outFile.replace(/js$/, "min.js"); + + const input = { ...config.rollup.browser_core.input, input: `src/plugins/vue.js`}; + const output = config.rollup.browser_core.output; + // output.footer = output.footer.replace("hljs", "hljsVue"); + let pluginSrc = await rollupCode(input, + { ...output, file: outFile, name: "hljsVue", footer: null }); + + const tasks = []; + tasks.push(fs.writeFile(outFile, pluginSrc, { encoding: "utf8" })); + + if (minify) { + const tersed = await Terser.minify(pluginSrc, config.terser); + tasks.push(fs.writeFile(minifiedFile, tersed.code, { encoding: "utf8" })); + } + + await Promise.all(tasks); +} + async function buildBrowserHighlightJS(languages, { minify }) { log("Building highlight.js."); diff --git a/tools/build_node.js b/tools/build_node.js index 90b041e5d2..6a13238687 100644 --- a/tools/build_node.js +++ b/tools/build_node.js @@ -34,6 +34,13 @@ async function buildNodeLanguage(language) { await rollupWrite(input, output); } +async function buildNodeVuePluginJS() { + const input = { ...config.rollup.node.input, input: `src/plugins/vue.js` }; + const output = { ...config.rollup.node.output, file: `${process.env.BUILD_DIR}/lib/vue_plugin.js` }; + await rollupWrite(input, output); +} + + async function buildNodeHighlightJS() { const input = { ...config.rollup.node.input, input: `src/highlight.js` }; const output = { ...config.rollup.node.output, file: `${process.env.BUILD_DIR}/lib/core.js` }; @@ -81,9 +88,11 @@ async function buildNode(options) { await buildNodeIndex(languages); await buildLanguages(languages); + await buildNodeVuePluginJS(); log("Writing highlight.js"); await buildNodeHighlightJS(); + } module.exports.build = buildNode; diff --git a/tools/developer.html b/tools/developer.html index f01722d392..00f41e3f3d 100644 --- a/tools/developer.html +++ b/tools/developer.html @@ -175,6 +175,7 @@

Markup

+ @@ -273,7 +274,8 @@

Markup

}); }()); - Vue.use(hljs.vuePlugin); + let plugin = hljsVue(hljs).VuePlugin; + Vue.use(plugin); let vue = new Vue({ el: '#app', data: { code: "", language: "" },