Node's Pastoral Musicians


    0.3.2 • Public • Published


    A vue document preview component, this component will display the contents of the document on the page.

    English Readme | 中文说明书

    Live Demo



    First, add this package from yarn or npm.

    yarn add vue-doc-preview
    npm i vue-doc-preview --save

    Then, import this component in .vue file.

      <VueDocPreview :value="docValue" :type="docType" />
    import VueDocPreview from 'vue-doc-preview'
    export default {
      components: {

    You also can open demo.vue(which in src) to learn how to use this component, but it is introduced directly to the component from the source code.


    <VueDocPreview value="# VueDocPreview\n**Markdown Test**```" type="markdown" />
    <VueDocPreview value="" type="office" />
    <VueDocPreview value="Normal Text" type="text" />
    <VueDocPreview value="function () {\n  console.log('VueDocPreview')\n}" type="code" code="javascript"/>


    prop description type default
    value document contents or office document's url String ''
    type document type (Now supported types are 'markdown'、'office'、'text' of 'code') String 'md'
    language code language (It takes effect only when the type is 'code') String ''
    height when height > 100 it means that the component's height is hight+'px', otherwise it means that the component's height is hight+'%' Number 90
    mdStyle markdown view custom style (It takes effect only when the type is 'markdown' or 'code') Object null
    textStyle text view custom style (It takes effect only when the type is 'text') Object null
    url document's url, but it only takes effect only when we don't set value (this property can also be used in office documents) String ''

    Supported document types and their suffix(language)

    • markdown: md
    • office: docx, pptx, xlsx
    • text: txt
    • code: javascript(js)、html、css、java、json、typescript(ts)、cpp、xml、bash、less、nginx、php、powershell、python、scss、shell、sql、yaml、ini

    Custom style

    Now, we can customize markdown view style by setting mdStyle in props.

    These tags can be customized: pre, code, ul, ol, li, hr, blockquote, img, a, table, tr, th, td.

    In this example we will customize the style of code block in markdown view.

    // template
    <VueDocPreview value="# VueDocPreview" type="markdown" :mdStyle="mdStyle" />
    // script
    export default {
      data: function() {
        return {
          mdStyle: {
            pre: {
              'background-color': 'rgb(187, 255, 255)'
            code: {
              'background-color': 'rgb(187, 255, 255)',
              'line-height': '20px'


    Compiles and hot-reloads for development

    yarn run serve

    Compiles and minifies for production

    yarn run build-lib

    Run test for development

    yarn run test

    Lints and fixes files

    yarn run lint

    Some tips

    1. Markdown preview use highlight.js to make code show different colors, you are able to modify src/lib/highlight.js to support more language with code highlight.
    2. You can debug the components after development by running the test environment.
    3. You can show document by a url and this component will automatically download it by the url.
    4. The priority of prop value is higher than that of prop url, if you set prop value with a nonempty value, the prop url will be ignored.




    npm i ad-vue-doc-preview

    DownloadsWeekly Downloads






    Unpacked Size

    312 kB

    Total Files


    Last publish


    • artisansdigital