vue-doc-preview

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

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

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.
You can debug the components after development by running the test environment.
You can show document by a url and this component will automatically download it by the url.
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

cainsyake / vue-doc-preview

readme