首页 > 其他分享 >Marked.js - HTML 中直接解析显示 Markdown

Marked.js - HTML 中直接解析显示 Markdown

时间:2023-01-12 00:56:59浏览次数:50  
标签:Markdown Marked js width HTML 解析

What

Marked.js 是一个 Markdown 解析和编译器,可以在 JavaScript 中将 Markdown 转为 HTML。结合 HTML DOM,可以实现在 HTML 中直接解析显示 Markdown。

How To Use

<textarea> 中编写 Markdown:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <title>Marked.js</title>
</head>
<body>
  <div id="$m" class="markdown-body"></div>
  <textarea id="$t" style="display:none">
*Write* your **Markdown** here.
  </textarea>
  <script>$m.innerHTML = marked.parse($t.value);</script>
</body>
</html>

用浏览器直接打开效果如下:

1

More

github-markdown-css:仿 GitHub Markdown 样式:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width initial-scale=1">
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.1.0/github-markdown-light.min.css">
  <style>
@media (max-width: 767px) { body { padding: 15px; } }
body { box-sizing: border-box;
       min-width: 200px;
       max-width: 980px;
       margin: 0 auto;
       padding: 45px; }
  </style>
  <title>Marked.js</title>
</head>
<body>
  <div id="$m" class="markdown-body"></div>
  <textarea id="$t" style="display:none">
# Hello World
*Write* `your` **Markdown** here.
  </textarea>
  <script>$m.innerHTML = marked.parse($t.value);</script>
</body>
</html>

2

标签:Markdown,Marked,js,width,HTML,解析
From: https://www.cnblogs.com/uxod/p/17045276.html

相关文章

  • 【HTML基础篇003】前端基础之CSS选择器大全
    ✨一、CSS的基本介绍CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染)。✨二、CSS......
  • Vue.js 双向数据绑定原理
    Vue双向数据绑定原理涉及到Vue中的响应式系统和模板编译。在Vue中,响应式系统是通过Object.defineProperty或者Proxy来实现的。当Vue创建一个Vue实例时,它会遍......
  • vue.js 虚拟DOM
    Vue.js使用虚拟DOM来优化更新流程。虚拟DOM是一个JavaScript对象,它可以描述一个真实的DOM结构,并在数据发生变化时重新渲染。当Vue组件的数据发生变化时,Vue会......
  • React核心概念与JSX
    React概况React是一个只用来写HTML的UI页面的JS库,在MVC设计模式中它只相当于View,故:它并不是一个框架(MVC架构角色设计)。React组件内数据改动会自动更新到屏幕上。React项......
  • 利用Java+Html+Jsp实现简单的MVC分层项目->实现表的增删改查
    graphTDView-->ServiceService-->ControllerService-->ViewController-->Service准备工作:无骨架创建一个maven项目,配置文件目录【增加webapp目录,在webapp下面一级添......
  • 前端知识点整理第二天(伪类和伪元素/html5语义化)
    SEO,也就是搜索引擎优化的逻辑,其实是非常简单的。这就像是在大学里的学生会主席,你要让投票者给你更多的选票。那么,你需要先「自我优化」,无论是外表还是能力;此外,你还需获得......
  • Vue.js 响应式原理
    Vue.js是一个渐进式的JavaScript框架,它使用了响应式系统来维护应用程序的状态。响应式系统是Vue.js的核心部分,它使得应用程序能够自动地更新视图,当数据发生变化时。在Vue.......
  • 10分钟做好 Bootstrap Blazor 的表格组件导出 Excel/Word/Html/Pdf
    上篇:BootstrapBlazor实战通用导入导出服务(Table组件)1.新建工程新建工程b14tabledotnetnewblazorserver-ob14table将项目添加到解决方案中:dotnetslnadd......
  • js整除、不能整除
    能被四整除if((value%4==0)不能被100整除if((value%100!=0) ......
  • JS获取图片(选择图片并显示)
    $('.a').change(function(e){var_URL=window.URL||window.webkitURL;varfile,img;if((file=this.files[0])){img=newImage();i......