wangchuan95 / vue-code-preview

vue-code-preview

A vue code viewer component based on Prettier and Highlight.js plugin for Vue.js v2.

Installation

npm install vue-code-preview
# or
yarn add vue-code-preview

Usage

Import

import VueCodePreview from 'vue-code-preview';
import 'highlight.js/styles/dark.css'; // import a style file

Vue.component('VueCodePreview', VueCodePreview);

Example

<VueCodePreview value="<h1>Hello World</h1>" />

<VueCodePreview :value="code" parser="vue" :options="{ printWidth: 180 }" />

export default {
  data() {
    return {
      code: `
      <template>
        <h1>Hello World!</h1>
      </template>

      <script>
      export default {
        name: 'HelloWorld',
      };
      <\/script>
      `,
    };
  },
};

Props

prop	description	type	default
value	source code	String	''
parser	Prettier Parser	String	'vue'
options	Prettier Options	Object	{ printWidth: 80, tabWidth: 2, useTabs: false, endOfLine: 'auto', singleQuote: false, semi: true, trailingComma: 'all', bracketSpacing: true }
language	Highlight.js plugin	String	''
autodetect	Highlight.js plugin	Boolean	true

License

MIT