• markdown的使用


    markdown是什么?

      Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。Markdown具有一系列衍生版本,用于扩展Markdown的功能(如表格、脚注、内嵌HTML等等),这些功能原初的Markdown尚不具备,它们能让Markdown转换成更多的格式,例如LaTeX,Docbook。Markdown增强版中比较有名的有Markdown Extra、MultiMarkdown、 Maruku等。这些衍生版本要么基于工具,如Pandoc;要么基于网站,如GitHub和Wikipedia,在语法上基本兼容,但在一些语法和渲染效果上有改动。

    使用markdown

      效果:

        

    这里把地址放上来,喜欢看文档的同学可以去看官方文档

    1.vue中使用markdown:

     1.安装:

    $ npm install mavon-editor --save

     2.引入:

    import {mavonEditor} from "mavon-editor";
    import "mavon-editor/dist/css/index.css";
    
    module.exports = {
      components:{
        mavonEditor
      },
      ......
    }

     3.使用:

    <mavonEditor v-model="content" ref="md" @imgAdd="$imgAdd"  @change="cahnge"/>
    
    
    module.exports = {
      components:{
        mavonEditor
      },
     methods: {
      // 将图片上传到服务器,返回地址替换到md中
          $imgAdd(pos, $file){
              let formdata = new FormData();
    
              this.$upload.post('/上传接口地址', formdata).then(res => {
                  console.log(res.data);
                  this.$refs.md.$img2Url(pos, res.data);
              }).catch(err => {
                   console.log(err)
              })
         },
      change(value, render){
        // render为解析后的结果
        this.html = render;
      }
     }
    }

     4.显示在页面在:

    <div v-html="html"><div>

    注意:如果你提交的不是本项目使用的,是给第三方使用的,用接口请求得来数据库的数据,即使你将内容显示出来也没有效果,如下图:

      

      markdown编辑器里面样式时有作用,但是你显示在页面上还是没有效果,显示的效果还是不居中的,有类名,没有样式。即使你安装了markdown引入了样式

    import "mavon-editor/dist/css/index.css";

     页面上还是没有效果,这就是markdown的一个缺陷,在外部的div标签加一个类名,这样就可以了。

    <div class="markdown-body" v-html="html"><div>

    2.利用showdown将markdown转化为html

     1.安装:

    $ npm install showdown --save

     2.使用:

    <div v-html="sonversion(html)"></div>

    // html为后端传来带有markdown语法的字段

    <script>
      
      impoer showdown form 'showdown'
      var converter = new Showdown.converter();
      module.exports = {
       methods: {
        conversion(value){
          return converter.makeHtml(value);
        }
       }
    }
    </script>

     这样显示在页面上就可以了,不过这样写有些样式会没有效果,使用showdown会有缺陷,还是第一种自带转化的比较好用!!

     写的不足欢迎吐槽...

  • 相关阅读:
    lipo命令
    Eclipse安装ADT插件
    编译vo-aacenc遇到的问题
    双MIC安卓手机录音问题
    天天动听MP3解码器性能提升50%
    Sublime Text 2结合VS2010配置C C++编译
    讯飞语音语义接口测试
    讯飞语音接口注册
    iOS阶段学习第31天笔记(UINavigationBar介绍)
    iOS App上架AppStore 会遇到的坑
  • 原文地址:https://www.cnblogs.com/0314dxj/p/12093581.html
走看看 - 开发者的网上家园