Markdown转html在网页上显示

1.需要安装的内容

npm install showdown

showdown 详解

npm install showdown-katex

showdown-katex npm详解

npm install github-markdown-css

github-markdown-css npm详解

2.使用

<template><div style="padding:20px;"><divv-html="html"class="markdown-body"style="border:1px solid #d1d5da;"></div></div>
</template>
<script>
import showdown from "showdown";
import showdownKatex from "showdown-katex";
// import 'github-markdown-css/github-markdown.css' // 无法自定义
import "../assets/styles/github-markdown.css"; // 将安装的github-markdown-css的github-markdown.css保存，自定义修改
export default {name: "",data() {return {html: "",};},mounted() {let converter = new showdown.Converter({extensions: [showdownKatex({displayMode: true,throwOnError: false, // allows katex to fail silentlyerrorColor: "#ff0000",delimiters: [{ left: "$$", right: "$$", display: false },{ left: "~", right: "~", display: false, asciimath: true },],}),],tables: true,});let md = `# 1.类
## 1.2 继承
### 1.2.1 ES6 之前的继承
- 1.在子类中通过 call/apply 方法借助父类的构造函数
> **2.将子类的原型对象设置为父类的实例对象**### 1.2.2 ES6 的继承
- **1.在子类后面添加 extends 并指定父类的名称**
- **2.在子类的 constructor 构造函数中通过 super 方法借助父类的构造函数**`;let text = md.toString();console.log("text", text);this.html = converter.makeHtml(text);},
};
</script><style scoped>
.markdown-body {box-sizing: border-box;min-width: 200px;max-width: 980px;margin: 0 auto;padding: 45px;
}@media (max-width: 767px) {.markdown-body {padding: 15px;}
}
</style>

3.效果图

Markdown转html在网页上显示相关推荐

3D模型在网页上显示
3D模型在网页上显示,这绝对是未来的趋势,也是热门.一部"阿凡达"让电影节发生了一次地震,让人们感到3D的时代到来.那么我们IT界呢?如果各位因工作时间繁忙,或者嫌上海世博会人山人 ...
图片的base64编码实现以及网页上显示
生成.解析base64编码的图片 //图片转化成base64字符串 public static String GetImageStr(<span style="font-family: ...
php导入qq数据txt代码,/谁有能都实现将excel文件导入到数据中，并在php网页上显示的源码啊，有的发送1091932879@qq.com,谢谢!...
PHP网页怎么导入Excel的数据参码如下: // 1.引用ExcelReader类文 require_once 'Excel/reader.php'; // 2.实例化读取Excel类 $data ...
html英文日期js,JS网页上显示中英文版日期时间(根据电脑上的时间)
JS网页上显示中英文版日期时间(根据电脑上的时间) <script language="javascript"> function shownowtime() { va ...
设计一个jsp页面，要求在网页上显示当前日期和时间，如果时间在6:00~12:00,输出“上午好”:如果时间在12:00 18:00, 输出“下午好”:
设计一个jsp页面,要求在网页上显示当前日期和时间,如果时间在6:00~12:00,输出"上午好":如果时间在12:00 18:00, 输出"下午好":如果时间 ...
html中加入emjio表情,html网页上显示emoji表情
前言做项目涉及表情在网页上显示.稍微研究了一下实现方案,整体思路不复杂,就是稍微涉及到一些新概念和新方法. 精灵图精灵图又称雪碧图,简单来说就是一种把很多小图片拼成一张大图的图片形式.下图就是表情 ...
在centos上安装httpd,并实现html文件和cgi文件在网页上显示，搭建静态web网页
在centos上安装httpd,并实现html文件和cgi文件在网页上显示简介 Apache-httpd的简介 Apache-httpd的安装 html文件和cgi文件的编写网页访问html和cg ...
使用JSP代码编写index.jsp文件在网页上显示数据库数据
使用JSP代码编写index.jsp文件在网页上显示数据库数据在index.jsp文件上使用JSP代码编写可以在网页上以表格的形式显示数据库内的数据需要创建一个项目因为需要用到关于JDBC的 ...
Python将图片转化为base64编码以及如何在html网页上显示
1.Python将图片转化为base64编码 test.py # -*- coding: utf-8 -*- import base64 #这一段代码时间图片转化为base64 with open(& ...

Markdown转html在网页上显示

Markdown转html在网页上显示

1.需要安装的内容

2.使用

3.效果图

Markdown转html在网页上显示相关推荐

最新文章

热门文章