Nuns Playing Monopoly

    @boydaihungst/vue-doc-preview

    0.3.3 • Public • Published

    vue-doc-preview

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

    English Readme | 中文说明书

    Live Demo

    Use

    import

    First, add this package from yarn or npm.

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

    Then, import this component in .vue file.

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

    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.

    Example

    <VueDocPreview value="# VueDocPreview\n**Markdown Test**```" type="markdown" />
    <VueDocPreview value="newteach.pbworks.com%2Ff%2Fele%2Bnewsletter.docx" type="office" />
    <VueDocPreview value="Normal Text" type="text" />
    <VueDocPreview value="function () {\n  console.log('VueDocPreview')\n}" type="code" code="javascript"/>

    Config

    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 ''
    requestConfig axios config Object {}

    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'
            }
          }
        }
      }
    }

    Development

    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.

    License

    MIT

    Install

    npm i @boydaihungst/vue-doc-preview

    DownloadsWeekly Downloads

    3

    Version

    0.3.3

    License

    MIT

    Unpacked Size

    3.79 MB

    Total Files

    38

    Last publish

    Collaborators

    • boydaihungst