1.4.7 • Published 3 years ago

@twoke/markdown v1.4.7

Weekly downloads
-
License
MIT
Repository
-
Last release
3 years ago

快速上手

引入 @twoke/markdown

1、安装脚手架工具

npm install -g @vue/cli
# OR
yarn global add @vue/cli

2、创建一个项目

vue create markdown-demo

3、使用组件

npm i -D @twoke/markdown

完整引入

import Vue from 'vue'
import App from './App.vue'
import Markdown from '@twoke/markdown'
import '@twoke/markdown/lib/style/index.css'
Vue.config.productionTip = false

Vue.use(Markdown)

new Vue({
  render: h => h(App),
}).$mount('#app')
<template>
  <div id="app">
    <markdown-edit v-model="value"></markdown-edit>
  </div>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    value: ''
  })
}
</script>

页面渲染效果 页面显示情况

按需引入

引入babel-plugin-component

npm i babel-plugin-component -D
 
# For babel6 
npm i babel-plugin-component@0 -D

创建babel.config.js

{
 "plugins": [
    ["component", {
      "libraryName": "@twoke/markdown",
      "libDir": "lib",
      "styleLibraryName": "style",
      "style": true,
    }, "@twoke/markdown"]
  ]
}
import Vue from 'vue'
import App from './App.vue'
import { MarkdownEdit } from '@twoke/markdown'
Vue.config.productionTip = false

Vue.use(MarkdownEdit)

new Vue({
  render: h => h(App),
}).$mount('#app')

使用

MarkdownBody 内容渲染组件

<template>
  <div>
      <textarea id="edit" v-model="content"></textarea>
      <!-- v-model 绑定markdown内容 htmlCode: 获取转化后的htmlCode 注意:需要添加sync -->
      <markdown-body v-model="content" :htmlCode.sync="currentHtmlCode"></markdown-body>
      markdown: {{content}}
      html: {{currentHtmlCode}}
  </div>
</template>

<script>
export default {
  name: 'MarkdownBodyDemo',
  data: () => ({
    currentHtmlCode: '',
    content: ''
  })
}
</script>

<style scoped>
#edit {
  outline: none;
  width: 100%;
  height: 400px;
  font-size: 18px;
}
</style>

效果图

npm.io

MarkdownEdit 编辑组件

(内嵌MarkdownBody, MarkdownToc)

<template>
    <markdown-edit v-model="content"></markdown-edit>
</template>

<script>
export default {
 data () {
    return {
        content: ''
    }
 }
}   
</script>

<style>

</style>

效果图 npm.io

npm.io

MarkdownToc 内容目录生产组件

<template>
    <div id="test-toc">
        <div id="demoBox">
            <h1>标题一</h1>
            <h2>标题二</h2>
            <h3>标题三</h3>
            <h4>标题四</h4>
            <div style="text-align:center">
                <h1>中心布局 1</h1>
                <h2>中心布局 2</h2>
                <h3>中心布局 3</h3>
                <h4>中心布局 4</h4>
            </div>
            <h1>这个名字超级长这个名字超级长这个名字超级长这个名字超级长这个名字超级长这个名字超级长这个名字超级长这个名字超级长</h1>
            <h2>标题二</h2>
        </div>
        <markdown-toc style="width: 300px;" domId="demoBox"/>
    </div>
</template>

<script>
export default {
 data () {
    return {
        domId: 'demoBox'
    }
 }
}   
</script>

<style>
#test-toc {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
</style>

效果图 npm.io

1.4.7

3 years ago

1.0.0

3 years ago

1.4.6

3 years ago

1.4.5

3 years ago

1.4.4

3 years ago

1.4.3

3 years ago

1.4.2

3 years ago

1.4.1

3 years ago

1.3.2

3 years ago

1.4.0

3 years ago

1.3.1

3 years ago

1.3.0-beta.0

3 years ago

1.2.0

3 years ago

1.1.0

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago