精华内容
下载资源
问答
  • vue-markdown 一个基于vue.js的markdown语法解析插件
  • markdown转成Vue组件

    2019-08-09 00:41:31
    markdown转成Vue组件
  • vue markdown_Vue的强大Markdown组件

    千次阅读 2020-07-27 06:38:24
    vue markdown 降价促销 (markdown-it-vue) The vue lib for markdown-it. markdown-it的Vue库。 View Demo 查看演示 Download Source 下载源 安装 (Install) npm install markdown-it-vue 支持 (Supports) ...

    vue markdown

    降价促销 (markdown-it-vue)

    The vue lib for markdown-it.

    markdown-it的Vue库。

    markdown-it-vue

    安装 (Install)

    npm install markdown-it-vue

    支持 (Supports)

    插件清单 (Plugin list)

    • markdown-it

      降价

    • markdown-it-emoji

      降价表情符号

    • markdown-it-sub

      降价促销

    • markdown-it-sup

      降价促销

    • markdown-it-footnote

      脚注降价

    • markdown-it-deflist

      markdown-it-deflist

    • markdown-it-abbr

      markdown-it-abbr

    • markdown-it-ins

      降价促销

    • markdown-it-mark

      降价标记

    • markdown-it-katex

      降价促销

    • markdown-it-task-lists

      markdown-it-task-lists

    • markdown-it-icons

      降价图标

    • markdown-it-highlight

      降价突出

    • markdown-it-latex

      降价乳胶

    • markdown-it-container

      降价容器

    • markdown-it-github-toc

      markdown-it-github-toc

    • markdown-it-source-map

      markdown-it-source-map

    用法 (Usage)

    <template>
      <div>
        <markdown-it-vue class="md-body" :content="content"/>
      </div>
    </template>
    
    <script>
    import MarkdownItVue from 'markdown-it-vue'
    import 'markdown-it-vue/dist/markdown-it-vue.css'
    export default {
      components: {
        MarkdownItVue
      },
      data () {
        return {
          content: '# your markdown content'
        }
      }
    }
    </script>

    翻译自: https://vuejsexamples.com/a-powerful-markdown-components-for-vue/

    vue markdown

    展开全文
  • markdown高亮vue vue-markdown-highlight (vue-markdown-highlight) Highlight.js syntax highlighter component for Vue. Vue的Highlight.js语法荧光笔组件。 安装 (Installation) Via NPM: Install ...

    markdown高亮vue

    vue-markdown-highlight (vue-markdown-highlight)

    Highlight.js syntax highlighter component for Vue.

    Vue的Highlight.js语法荧光笔组件。

    安装 (Installation)

    Via NPM:

    通过NPM:

    NPM

    1. Install highlight.js:

      安装Highlight.js

      npm i highlight.js
    2. Install vue-markdown-highlight:

      安装vue-markdown-highlight

      npm i vue-markdown-highlight -D

    Or [Yarn]:

    或[纱线]:

    1. Install highlight.js:

      安装Highlight.js

      yarn add highlight.js
    2. Install Vue Highlight.js:

      安装Vue Highlight.js

      yarn add vue-markdown-highlight

    用法 (Usage)

    Main file:

    主文件:

    import 'highlight.js/styles/default.css';
    import Highlight from 'vue-markdown-highlight'
    Vue.use(Highlight)

    Vue file:

    Vue文件:

    <template>
    	 <div id="app">
          <div v-html="content" v-highlight></div>
      </div>
    </template>
    
    <script>
    // JavaScript...
    </script>
    
    <style>
    /* StyleSheet... */
    </style>

    翻译自: https://vuejsexamples.com/markdown-highlight-component-for-vue/

    markdown高亮vue

    展开全文
  • 一款强大的基于Vuemarkdown编辑器插件.zip,mavonEditor - A markdown editor based on Vue that supports a variety of personalized features
  • :party_popper:通常Markdown解析器自带的基本功能; :four_leaf_clover:支持流程图,甘特图,时间表图,任务列表; :chequered_flag:支持粘贴HTML自动转换为Markdown; 插入支持插入原生Emoji,设置常用表情列表...
  • vue markdown v-markdown编辑器 (v-markdown-editor) Vue.js Markdown Editor component. Vue.js Markdown编辑器组件。 View Demo 查看演示 Download Source 下载源 安装 (Install) npm install v-markdown-...

    vue markdown

    v-markdown编辑器 (v-markdown-editor)

    Vue.js Markdown Editor component.

    Vue.js Markdown编辑器组件。

    安装 (Install)

    npm install v-markdown-editor
    import 'v-markdown-editor/dist/index.css';
    
    import Vue from 'vue'
    import Editor from 'v-markdown-editor'
    
    // global register
    Vue.use(Editor);

    要求 (Require)

    Bootstrap 4 & Fontawesome

    Bootstrap 4和Fontawesome

    (Example)

    <template>
        <div class="container">
            <markdown-editor :options="options"></markdown-editor>
        </div>
    </template>
    
    
    <script>
       
        export default {
    
            data() {
                return {
                    // default options, see more options at: http://codemirror.net/doc/manual.html#config
                    options: {                   
                        // lineNumbers: true,
                        // styleActiveLine: true,
                        // styleSelectedText: true,
                        // lineWrapping: true,
                        // indentWithTabs: true,
                        // tabSize: 2,
                        // indentUnit: 2
                    }
    
                }
    
            }
    
        }
    
    </script>

    模型 (v-model)

    <template>
        <div class="container">
            <markdown-editor v-model="value"></markdown-editor>
        </div>
    </template>
    
    
    <script>
       
        export default {
    
            data() {
                return {
                    value: 'Hello world!'
                }
    
            }
    
        }
    
    </script>

    工具列 (Toolbar)

    // full toolbar: clipboard redo undo | bold italic strikethrough heading | image link | numlist bullist code quote | preview fullscreen
    
    <template>
        <div class="container">
           <markdown-editor toolbar="bold italic heading | image link | numlist bullist code quote | preview fullscreen"></markdown-editor>
        </div>
    </template>

    自定义提交表单输入名称 (Custom submit form input name)

    <template>
        <div class="container">
           <markdown-editor name="html"></markdown-editor>
        </div>
    </template>

    翻译自: https://vuejsexamples.com/markdown-editor-component-for-vue-js/

    vue markdown

    展开全文
  • Vue编写markdown或者展示markdown

    万次阅读 多人点赞 2018-08-28 16:41:07
    之前做博客开发的时候,需要markdown的支持,找了很多资料,但是都是七拼八凑的,要么是告诉你怎么编写markdown,要么是告诉你怎么展示,我把它们总结一下。 1、介绍mavonEditor 官网:...

    之前做博客开发的时候,需要markdown的支持,找了很多资料,但是都是七拼八凑的,要么是告诉你怎么编写markdown,要么是告诉你怎么展示,我把它们总结一下。

    1、介绍mavonEditor

    官网:https://md.zhystar.com/
    github:https://github.com/hinesboy/mavonEditor


    mavonEditor是基于Vue的markdown 编辑器插件,支持自定义界面,代码高亮,图片上传,这些在github中都有写到,相关资料可以去github查看

    2、安装mavonEditor

    $ npm install mavon-editor --save 或者
    $ yarn add mavon-editor
    

    main.js

    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    Vue.use(mavonEditor)
    

    3、使用mavonEditor编辑markdown

    .vue文件中

    <template>
        <div>
            <mavon-editor v-model="value"/>
        </div>
    </template>
    
    <script>
    export default {
        data() {
            return {
                value: '',
                defaultData: "preview"
            };
        },
    };
    </script>
    

    打开页面显示可编辑的页面
    这里写图片描述

    4、使用v-html展示markdown

    
    <article v-html="value" ></article>
    
    <script>
    export default {
        data() {
            return {//value的值是经过markdown解析后的文本,可使用`@change="changeData"`在控制台打印显示
                value: `<blockquote>
    									<p>你好</p>
    									</blockquote>
    									<p><code>java</code></p>`,
                defaultData: "preview"
            };
        },
        methods: {
        }
    };
    </script>
    

    以下取自官网,查看详细信息请移步官网

    API 文档

    props

    name 名称type 类型default 默认值describe 描述
    valueString初始值
    languageStringzh-CN语言选择,暂支持 zh-CN: 中文简体 , en: 英文 , fr: 法语, pt-BR: 葡萄牙语, ru: 俄语
    fontSizeString15px编辑区域文字大小
    scrollStyleBooleantrue开启滚动条样式(暂时仅支持chrome)
    boxShadowBooleantrue开启边框阴影
    subfieldBooleantruetrue: 双栏(编辑预览同屏), false: 单栏(编辑预览分屏)
    defaultOpenStringedit: 默认展示编辑区域 , preview: 默认展示预览区域 , 其他 = edit
    placeholderString开始编辑…输入框为空时默认提示文本
    editableBooleantrue是否允许编辑
    codeStyleStringcode-githubmarkdown样式: 默认github, 可选配色方案
    toolbarsFlagBooleantrue工具栏是否显示
    navigationBooleanfalse默认展示目录
    ishljsBooleantrue代码高亮
    imageFilterfunctionnull图片过滤函数,参数为一个File Object,要求返回一个Boolean, true表示文件合法,false表示文件不合法
    imageClickfunctionnull图片点击事件,默认为预览,可覆盖
    toolbarsObject如下例工具栏
     /*
        默认工具栏按钮全部开启, 传入自定义对象
        例如: {
             bold: true, // 粗体
             italic: true,// 斜体
             header: true,// 标题
        }
        此时, 仅仅显示此三个功能键
     */
    toolbars: {
          bold: true, // 粗体
          italic: true, // 斜体
          header: true, // 标题
          underline: true, // 下划线
          strikethrough: true, // 中划线
          mark: true, // 标记
          superscript: true, // 上角标
          subscript: true, // 下角标
          quote: true, // 引用
          ol: true, // 有序列表
          ul: true, // 无序列表
          link: true, // 链接
          imagelink: true, // 图片链接
          code: true, // code
          table: true, // 表格
          fullscreen: true, // 全屏编辑
          readmodel: true, // 沉浸式阅读
          htmlcode: true, // 展示html源码
          help: true, // 帮助
          /* 1.3.5 */
          undo: true, // 上一步
          redo: true, // 下一步
          trash: true, // 清空
          save: true, // 保存(触发events中的save事件)
          /* 1.4.2 */
          navigation: true, // 导航目录
          /* 2.1.8 */
          alignleft: true, // 左对齐
          aligncenter: true, // 居中
          alignright: true, // 右对齐
          /* 2.2.1 */
          subfield: true, // 单双栏模式
          preview: true, // 预览
      }
    

    events 事件绑定

    name 方法名params 参数describe 描述
    changeString: value , String: render编辑区发生变化的回调事件(render: value 经过markdown解析后的结果)
    saveString: value , String: renderctrl + s 的回调事件(保存按键,同样触发该回调)
    fullScreenBoolean: status , String: value切换全屏编辑的回调事件(boolean: 全屏开启状态)
    readModelBoolean: status , String: value切换沉浸式阅读的回调事件(boolean: 阅读开启状态)
    htmlCodeBoolean: status , String: value查看html源码的回调事件(boolean: 源码开启状态)
    subfieldToggleBoolean: status , String: value切换单双栏编辑的回调事件(boolean: 双栏开启状态)
    previewToggleBoolean: status , String: value切换预览编辑的回调事件(boolean: 预览开启状态)
    helpToggleBoolean: status , String: value查看帮助的回调事件(boolean: 帮助开启状态)
    navigationToggleBoolean: status , String: value切换导航目录的回调事件(boolean: 导航开启状态)
    imgAddString: filename, File: imgfile图片文件添加回调事件(filename: 写在md中的文件名, File: File Object)
    imgDelString: filename图片文件删除回调事件(filename: 写在md中的文件名)

    代码高亮

    如不需要hightlight代码高亮显示,你应该设置ishljs为false

    开启代码高亮props

        // ishljs默认为true
        <mavon-editor :ishljs = "true"></mavon-editor>
    

    为优化插件体积,从v2.4.2起以下文件将默认使用cdnjs外链:

    • highlight.js
    • github-markdown-css
    • katex(v2.4.7)

    代码高亮highlight.js中的语言解析文件和代码高亮样式将在使用时按需加载.
    github-markdown-csskatex仅会在mounted时加载

    Notice:
    可选配色方案支持的语言 是从 highlight.js/9.12.0 导出的

    不使用cdn,本地按需加载点击这里…

    图片上传

    <template>
        <mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
    </template>
    exports default {
        methods: {
            // 绑定@imgAdd event
            $imgAdd(pos, $file){
                // 第一步.将图片上传到服务器.
               var formdata = new FormData();
               formdata.append('image', $file);
               axios({
                   url: 'server url',
                   method: 'post',
                   data: formdata,
                   headers: { 'Content-Type': 'multipart/form-data' },
               }).then((url) => {
                   // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
                   /**
                   * $vm 指为mavonEditor实例,可以通过如下两种方式获取
                   * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后,`$vm`为`mavonEditor`
                   * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>,`$vm`为 `this.$refs.md`
                   */
                   $vm.$img2Url(pos, url);
               })
            }
        }
    }
    

    图片上传详情点击这里…

    • 默认大小样式为 min-height: 300px , min-width: 300px 可自行覆盖
    • 基础z-index: 1500
    • 仅用作展示可以设置props: toolbarsFlag: false , subfield: false, defaultOpen: "preview"

    快捷键

    keykeycode功能
    F8119开启/关闭导航
    F9120预览/编辑切换
    F10121开启/关闭全屏
    F11122开启/关闭阅读模式
    F12123单栏/双栏切换
    TAB9缩进
    CTRL + S17 + 83触发保存
    CTRL + D17 + 68删除选中行
    CTRL + Z17 + 90上一步
    CTRL + Y17 + 89下一步
    CTRL + BreakSpace17 + 8清空编辑
    CTRL + B17 + 66加粗
    CTRL + I17 + 73斜体
    CTRL + H17 + 72# 标题
    CTRL + 117 + 97 or 49# 标题
    CTRL + 217 + 98 or 50## 标题
    CTRL + 317 + 99 or 51### 标题
    CTRL + 417 + 100 or 52#### 标题
    CTRL + 517 + 101 or 53##### 标题
    CTRL + 617 + 102 or 54###### 标题
    CTRL + U17 + 85++下划线++
    CTRL + M17 + 77标记
    CTRL + Q17 + 81> 引用
    CTRL + O17 + 791. 有序列表
    CTRL + L17 + 76链接
    CTRL + ALT + S17 + 18 + 83上角标
    CTRL + ALT + U17 + 18 + 85- 无序列表
    CTRL + ALT + C17 + 18 + 67```代码块
    CTRL + ALT + L17 + 18 + 76图片链接
    CTRL + ALT + T17 + 18 + 84表格
    CTRL + SHIFT + S17 + 16 + 83下角标
    CTRL + SHIFT + D17 + 16 + 68中划线
    CTRL + SHIFT + C17 + 16 + 67居中
    CTRL + SHIFT + L17 + 16 + 76居左
    CTRL + SHIFT + R17 + 16 + 82居右
    SHIFT + TAB16 + 9取消缩进
    展开全文
  • vue markdown 降价 (vue-markdown) A Powerful and Highspeed Markdown Parser for Vue. Vue的强大,高速Markdown解析器。 Quick start: i am a tast test. 快速开始: 我是一个TAST Supported Markdown Syntax:...
  • Vue中使用Markdown

    2021-06-26 06:05:29
    Vue中使用Markdown本篇主要讲解了在Vue项目里如何集成和使用Markdown (mavonEditor)编辑器的,以及如何接入一款非常简洁强大的 Markdown的样式 (github-markdown-css),本博客系统就是使用了 mavonEditor 和 github-...
  • vuemarkdown高亮插件

    2019-08-10 09:06:02
    vue markdown 高亮插件
  • :sparkles: vue3-markdown-it :sparkles: 一个很棒的 Vue 3 包装插件,甚至可以支持外部插件! :magnifying_glass_tilted_right: 安装 npm install vue3-markdown-it 支持的插件 -而其中,一切都开始它 - 添加...
  • vuemarkdown的使用

    2021-01-24 14:42:04
    局部引用(在要使用的vue文件中导入样式和组件) import { mavonEditor } from 'mavon-editor' import 'mavon-editor/dist/css/index.css' 注册组件 components: { mavonEditor, } 使用组件 <mavonEditor :...
  • 【步骤】1、安装插件vue-markdown-loader npm i vue-markdown-loader -D ps:这个插件是基于markdown-it的,不需要单独安装markdown-it。 2、修改vue.config.js配置文件(如果没有,在项目根目录新建一个): ...
  • Markdown在我们程序界也是一个必备的技能。 ...本文主要介绍如果在 Vue 中使用 Markdown,废话说了很多了,我们就这开始按摩。 为什么使用Marked.js库 Vue 没有像React 那么多 MD 的插件。如...
  • markdown-it的Vue库。 在线演示 安装 npm install markdown-it-vue 支持 图像大小和查看器 官方降价语法。 GFM目录 GFM风格 表情符号 仅简单 Flowcharts.js 下标/上标 信息| 错误警告信息提示 插件清单 降价 ...
  • Vue生成markdown目录索引

    千次阅读 2020-05-19 16:05:55
    本教程的代码实现参考了vue使用marked.js实现markdown转html并提取标题生成目录这篇文章,同时由于我使用Vue结合Vuetify的UI库,部分实现略有不同。 预期结果 这个是我的最终实现效果 代码实现 html部分 <...
  • markdown配置(VuePress)

    2020-12-01 08:41:09
    VuePress----markdown配置
  • Vue解析 markdown 文件

    千次阅读 2020-07-13 18:25:55
    如题,如何在Vue中解析markDown文件然后展示在网页上呢?一开始我也不太清楚,就拿着我的冲浪板在网络海洋里冲浪,但是没想到是一片珊瑚礁海域,让我心力憔悴,失去了学习的热情。 在我的不依不挠之下,终于从各种抄...
  • vue中展示markdown文件

    2021-01-18 20:10:40
    vue中展示markdown文件,使用mavon-editor的详细步骤
  • 本文的markdown语法都是适用于vuepress的,其它工具没有试过,应该大部分都可以适用。 这个博客所有文章都是通过markdown写的。 看十遍不如动手做一遍,大家可以把内容复制到自己的文档里面看下效果 ::: 常用语法 [...
  • 之前使用了mavonEditor这款Markdown编辑器进行博客文章的编写, 最近在弄把博客文章进行网页展示效果,...首先下载好mavonEditor之后,然后在vue中引用之后,接着就是对mavonEditor这个组件的属性进行设置 <mavon-ed
  • vue typescript element-ui 支持 markdown 渲染的博客前台展示
  • SpringBoot+VUE3的在线markdown文集系统
  • markdown-it-vue 是一个功能强大 markdown格式显示 Vue 组件
  • vue-markdown-loader:解析md文件的必备loader,通过npm install vue-markdown-loader -D安装 下面我们分两个场景来说明一下md文件的解析 Webpack 在项目根目录下创建build/webpack.config.js // 在webpack....
  • 分享一个用于Vuemarkdown插件

    千次阅读 2020-04-11 21:32:21
    npm install markdown-it-vue 使用 <template> <div> <markdown-it-vue class="md-body" :content="content" /> </div> </template> <script> import Mar...
  • 1.依赖showdown.js 安装 npm i showdown 配置 //引入 我的在全局引入 import showdown from 'showdown' //官方示例 ...text = '# hello, markdown!', //HTML是我们编辑后Mark...
  • Vue集成Markdown插件

    千次阅读 2017-09-05 15:48:56
    目前发现的Markdown插件有vue-markdown和mavon-editor,这里选择mavon-editor 引入依赖: 带Markdown编辑器的组件 <mavon-editor style="height: 100%"></mavon-editor> i

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,539
精华内容 5,015
关键字:

markdownvue

vue 订阅