zoukankan      html  css  js  c++  java
  • 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会有缺陷,还是第一种自带转化的比较好用!!

     写的不足欢迎吐槽...

  • 相关阅读:
    电商零售数仓建模之平台01:平台业务模型
    js自动补零
    Git
    C# HttpClient 请求认证、数据传输笔记
    悲/乐观并发控制的区别
    Win10安装node.js始终出现2503错误解决方法
    行首和行尾快捷键
    IP地址分类和私有地址
    source面板看不到js的调试方法
    js常用类型判断
  • 原文地址:https://www.cnblogs.com/0314dxj/p/12093581.html
Copyright © 2011-2022 走看看