闲暇时间我用Vue框架写了一个博客,编辑器是用的markdown文本的形式,介绍性+描述完全能满足我的需求,但是,如果想在线运行我markdown文本中的Vue组件代码,则无法实现了,

于是我就自己写了一个组件,可以和普通文本显示器一样,显示文本,也可以执行Vue组件代码(只要标注vue-run)。

下面是介绍:

Github代码仓库

https://github.com/zhangKunUs...

在线运行

https://zhangkunusergit.githu...

我已经把我写的组件提交到npm中,可以引入并使用了,使用方式如下:

安装

npm install vue-markdown-run --save

用法:

(1)完整引入

// 引入
import MarkdownRun from 'vue-markdown-run';
// 全局注入
Vue.use(MarkdownRun);

(2)按需引入

借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。

首先,安装 babel-plugin-component:

npm install babel-plugin-component -save-dev

然后,将 .babelrc 修改为:

{
"plugins": [
[
"component",
{
"libraryName": "vue-markdown-run",
"styleLibraryName": "theme"
}
]
]
}

接下来,如果你只需引入部分组件,写入以下内容:

import { MarkdownRun } from 'vue-markdown-run';

export default {
components: {
MarkdownRun
}
}

组件的用法

 <markdown-run
:mark="markdownTxt"
highlight-style-file-name="github"
:runClass=""
:runStyle=""
@error=""
/>

参数说明

参数 默认值 说明
:mark 必传(String) markdown文本字符串(具体要求请看下面的“markdownTxt 写法要求”)
:scope 非(Object) markdown文本中,引入的组件,如果不想全局引入,可以局部引入,用法请看上面的DEMO
highlight-style-file-name 非(String) 'github' markdown代码部分样式文件名,此处是指定引入那种样式(css)文件 详细请参考:https://highlightjs.org/stati... 中Styles
:runClass 非(String) Vue运行代码处的css样式名称
:runStyle 非(Object) Vue运行代码处的行间样式名称
@error 非(Function) 当前组件执行失败的回调函数

markdownTxt 写法要求

代码中必须指定哪个组件是需要执行的,在上面写上vue-run, 否则认为是普通文本,不予执行。
vue-run 放在语言类型后面,需要空格,例如:

```html vue-run
<template>
<div @click="go">Hello, {{name}}! 你可以点击试试</div>
</template> <script>
export default {
data() {
return {
name: 'Vue'
}
},
methods: {
go () {
alert('点击弹出, 代码vue已执行');
}
}
}
</script>
<style>
div{
background-color: red;
}
</style>

如有问题请联系

邮箱: 1766597067@qq.com

实现Vue 的 markdown 文档可以在线运行(vue-markdown-run)的更多相关文章

  1. 01将图片嵌入到Markdown文档中

    将图片内嵌入Markdown文档中 将图片嵌入Markdown文档中一直是一个比较麻烦的事情.通常的做法是将图片存入本地某个路径或者网络存储空间,使用URL链接的形式插入图片: ![image][ur ...

  2. C#解析Markdown文档,实现替换图片链接操作

    前言 又是好久没写博客了 其实也不是没写,是最近在「做一个博客」,从2月21日开始,大概一个多星期的时间,疯狂刷进度,边写代码边写了一整系列的博客开发笔记,目前为止已经写了16篇了,然后上3月之后工作 ...

  3. Markdown 文档生成工具

    之前用了很多Markdown 文档生成工具,发现有几个挺好用的,现在整理出来,方便大家快速学习. loppo: 非常简单的静态站点生成器 idoc:简单的文档生成工具 gitbook:大名鼎鼎的文档协 ...

  4. vscode使用Markdown文档编写

    首先安装vscode工具,具体的使用可以参考之前的博文:<Visual Studio Code教程:基础使用和自定义设置> VScode已经默认集成markdown文档编辑插件.可以新建一 ...

  5. 将Swagger2文档导出为HTML或markdown等格式离线阅读

    网上有很多<使用swagger2构建API文档>的文章,该文档是一个在线文档,需要使用HTTP访问.但是在我们日常使用swagger接口文档的时候,有的时候需要接口文档离线访问,如将文档导 ...

  6. 无需编译、快速生成 Vue 风格的文档网站

    无需编译.快速生成 Vue 风格的文档网站 https://docsify.js.org/#/#coverpage https://github.com/QingWei-Li/docsify/

  7. Java实现office文档与pdf文档的在线预览功能

    最近项目有个需求要java实现office文档与pdf文档的在线预览功能,刚刚接到的时候就觉得有点难,以自己的水平难以在三四天做完.压力略大.后面查找百度资料.以及在同事与网友的帮助下,四天多把它做完 ...

  8. 使用Python从Markdown文档中自动生成标题导航

    概述 知识与思路 代码实现 概述 Markdown 很适合于技术写作,因为技术写作并不需要花哨的排版和内容, 只要内容生动而严谨,文笔朴实而优美. 为了编写对读者更友好的文章,有必要生成文章的标题导航 ...

  9. Linux(Ubuntu)使用日记------markdown文档转化为word文档

    Linux(Ubuntu)使用日记------markdown文档转化为word文档

随机推荐

  1. PHP RBAC权限管理 基于角色的访问控制演示

    RBAC rbac:Role Based Access Controll,基于角色的访问控制. 今天理一理RBAC,话不多说,直接切入主题 功能需求: 权限管理(无限极) 角色管理(可以分配权限) 管 ...

  2. 【cocos2d-x 手游研发----界面UI设计】

    简单探讨一下如何在cocos2d-x的游戏引擎里面去制作各做交互UI界面,常见的UI如下: 人物头像,血条值,经验条,技能按钮,以及各种玩家交互的界面按钮:背包,人物属性,门派,等: 类似上面的图示交 ...

  3. BroadcastReceive的使用

    一.注册方式 intent.setAction("BC_One"); 1.静态注册 <receiver  android:name = "继承BroadcastRe ...

  4. C++单继承的构造函数和析构函数调用的顺序

    1.继承构造函数调用顺序以及销毁的过程 先调用父类的构造函数,在调用子类的构造函数,析构函数调用相反.

  5. “全栈2019”Java多线程第二十章:同步方法产生死锁的例子

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...

  6. sql语句_统计总成绩最高的前2名

    有一个数据表,id user_id score 三个字段,计算总成绩最高的前两名 SELECT * FROM (SELECT user_name,SUM(score) AS score FROM us ...

  7. 为什么子元素设置margin-top会作用在父元素上?

    原因在于:CSS 外边距合并 复现: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  8. 初识storm

    storm是Twitter开发的一个开源的分布式实时计算系统,可以简单可靠的处理大量的数据流.storm有很多的应用场景,如实时分析,在线机器学习,持续计算,分布式RPC,ETL等等.storm支持水 ...

  9. 2018新年 flag 了解一下(每月初更新...)

    昨天(2018/3/2)是元宵节,这很恐怖,因为意味着 往后再也找不到这么冠冕堂皇的理由用来偷懒啦~ 嘤嘤嘤~ (我特么反手就是一拳,让你嘤嘤嘤) emm,跑题了. 正文 话说一日之计在于晨,一年之计 ...

  10. MySQL大量线程处于Opening tables的问题分析

    [作者] 王栋:携程技术保障中心数据库专家,对数据库疑难问题的排查和数据库自动化智能化运维工具的开发有强烈的兴趣. [问题描述] 最近有一台MySQL5.6.21的服务器,在应用发布后,并发线程Thr ...