简单的Markdown解析器

最新推荐文章于 2024-05-30 09:33:17 发布
最新推荐文章于 2024-05-30 09:33:17 发布
阅读量1.5k 收藏 1
点赞数 1
分类专栏： 小工具 文章标签： javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46361270/article/details/124026432
版权

什么是markdown?

markdown是一种可以使用普通文本编辑器编写的标记语言。它可以通过简单的标记语法使普通文本内容具有一定的格式。Markdown的语法简洁明了、学习容易，而且功能比纯文本更强，因此有很多人用它写博客。

marked解析markdown文本

简单的解析器，如图

解析后的样子

<!doctype html>
<html>

<head>
  <meta charset="utf-8" />
  <title>markdown</title>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/marked/0.8.1/marked.min.js"></script>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .container {
      width: 100%;
      height: 100vh;
      display: flex;
    }

    .left,
    .right {
      width: 50vw;
      height: 100vh;
      overflow-y: scroll;
    }

    .line {
      border-left: 1px solid #cccccc;
    }

    .textarea {
      width: 100%;
      height: 100%;
      border: none;
      border: none;
      outline: none;
      resize: none;
      background: #f2f2f2;
      font-size: 16px;
      text-indent: 2px;
      padding: 20px 0;
    }

    blockquote {
      background: #f2f2f2;
      padding: 20px;
      margin: 20px;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      padding-left: 20px;
      padding-top: 20px;
    }

    a {
      padding: 20px 0;
    }

    pre {
      margin: 10px;
      padding: 20px;
    }

    ::-webkit-scrollbar {
      width: 0 !important
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="left">
      <textarea class="textarea"></textarea>
    </div>
    <div class="line"></div>
    <div class="right">
    </div>
  </div>
  <script>
    $(function () {
      $(`body`).delegate('textarea', 'propetychange input', function () {
        $('.right').html(marked.parse($(this).val()));
        //hljs.highlightAll();
      })
      $('.textarea').scroll(function () {
        $('.right').scrollTop($(this).scrollTop());
        $('.right').scrollLeft($(this).scrollLeft());
      });
      $('.right').scroll(function () {
        $('.textarea').scrollTop($(this).scrollTop());
        $('.textarea').scrollLeft($(this).scrollLeft());
      });
    })
  </script>
</body>

</html>

扩展成高亮展示

引用
<link rel="stylesheet" href="http://yandex.st/highlightjs/8.0/styles/solarized_dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>

调用 hljs.highlightAll();

新时代_打工人
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Markdown简易解析器.zip
02-22
简单UI设计，基本Markdown转化格式。使用原生Js实现，适合借鉴做法。设计的知识点有：文件读写，正则表达式，html，css等一些基本知识，适合入门js的新手学习(滑稽)。
高颜值markdown解析器：粘贴复制代码即可用（不用编译打包）
weixin_39651356的博客
10-31 1152
高颜值markdown解析器：粘贴复制代码即可用（不用编译打包）
推荐一款超凡的Markdown解析器——kramed
最新发布
gitblog_00031的博客
05-30 295
推荐一款超凡的Markdown解析器——kramed 项目地址:https://gitcode.com/GitbookIO/kramed 在数字时代，Markdown已成为编写文档和笔记的首选语言，其简洁的语法使得我们可以快速编写结构化的文本。而今天，我要向大家推荐一个强大且高效的Markdown解析器——kramed，它能让你的Markdown体验提升到新的层次。 1、项目介绍 kramed是一...
探索 nvParse：一个强大的 Markdown 解析器与渲染库
gitblog_00008的博客
04-16 307
探索 nvParse：一个强大的 Markdown 解析器与渲染库 项目地址:https://gitcode.com/antonmks/nvParse 在数字化文档的世界里，Markdown 已经成为了编写简洁、可读性高的文本的首选语言。然而，不同的环境和平台可能对 Markdown 的解析有不同的标准，这可能导致一致性和兼容性的挑战。幸运的是，nvParse 项目提供了一个解决方案，它是一个高效...
markdown 换行_markdown-it 原理浅析
weixin_40007016的博客
12-01 566
前言最近使用 markdown-it 比较多，也开发了一些插件，在这个过程中对源码进行了研读，最终写了这篇文章。需要了解细节的读者可以自行阅读文档。此文分为两个部分：原理剖析和原理应用（编写插件）。markdown-it 原理输入一串 markdown 代码，最后得到一串 html 代码，整体流程如下：我们以一个简单的例子来解释整个流程：​# 我是一个例子​ -> ​<h1>我是...
markdown：功能齐全的markdown解析器和编译器，以TypeScript编写
02-04
@ ts-stack / markdown 用TypeScript编写的功能齐全的markdown解析器和编译器。 这是marked的流行库的分支（从chjj / release-0.3.7，2017年12月1日合并合并请求＃961）。 郎 目录 安装 npm install @ts-stack/markdown --save 用法 最少使用量： import { Marked } from '@ts-stack/markdown' ; console . log ( Marked . parse ( 'I am using __markdown__.' ) ) ; // Outputs
html换行符_将markdown编译为html
weixin_39615219的博客
11-29 291
缘起IT人写技术文档，例如我自己写博客，用的最多的就是 markdown. 但是在浏览器中看到的这些博客都是以 html 的格式展示在人们的面前的. 所以一个自然的问题就是markdown怎么变成html的?分析背景众所周知，markdown和html都是全球通用的标记语言，那么从一种语言要转换为另一种语言不就是编译吗? 这学期刚好学了编译原理. 正好用上.ps：这里墙裂向大家安利一下...
marksimple：PHP中的简单Markdown解析器
02-05
标记简单 一个简单的Markdown解析器，简短且仅包含我当前需要的规则。 该函数基于正则表达式，可以增强自定义规则。 是的，我知道，它提供了许多解决同一目标的开放项目。 但是，编写我的自定义解析器很有趣，只需...
Laravel开发-markdown Markdown 解析器
08-28
在Laravel中，Markdown解析器通常与Blade模板引擎一起使用，Blade是Laravel提供的一个强大的、灵活的模板系统。通过在Blade模板中使用`@markdown`指令，我们可以直接在视图中嵌入Markdown内容，而无需额外的预处理...
一个简单的markdown解析器，能够将markdown解析为html 使用最基本的正则表达式来解析并处理文本.zip
03-18
一个简单的markdown解析器，能够将markdown解析为html。项目主要用于入门学习，使用最基本的正则表达式来解析并处理文本，而不是常规的AST方法.zip 一个简单的markdown解析器，能够将markdown解析为html。项目主要...
是npm的官方markdown解析器
08-07
marky-markdown 是 npm 的官方 markdown 解析器，基于 NodeJS 编写，旨在用 GitHub-style markdown 进行奇偶校验。它由一个最好的 CommonMark markdown 解析器——markdown-it 构建。
markdown：Go的markdown解析器和HTML渲染器
02-04
API文件： ：顶级软件包 ：定义解析的markdown文档的抽象语法树 ：解析器渲染器用户数一些使用此软件包的工具： ：终端的markdown渲染器 ：提供markdown文件的Web服务器 ：生成静态网站的内容管理系统 ：从yaml文件...
解析markdown_正则表达式之简易markdown文件解析器
weixin_34320235的博客
12-27 484
使用正则表达式也可以写一个简单的markdown解析器 一般的markdown表达式是这样# 这是一个markdown表达式 ## 这是一个markdown表达式一行一个markdown表达式，所以可以使用split('n')将markdown内容分割为一个数组，数组的都每一项都是一个markdown表达式 然后再对每一行表达式进行解析，假如匹配到了如下表达式# 这是一个markdown表达式 #...
Qt 如何读取编辑保存显示 MarkDown文件
前行之路还需前行
10-25 4358
简述 MarkDown 是一种轻量级、纯文本格式语法的语言，使用场景非常丰富，而且非常方便。CSDN的文章编辑就是使用的MarkDown语法，再比如github以及我日常使用的有道云笔记中都可以使用此语法去编辑文章。了解MarkDown语法有助于我们快速编辑对应格式的文章，也可以借助于对应的工具。CSDN、有道笔记也都有自己编辑文章的工具，操作起来也很方便。但是不同的是，他们都支持基本的Mark...
python解析markdown_一个纯python、快速、可扩展的Markdown解释器
weixin_29266007的博客
12-29 1864
Python部落(python.freelycode.com)组织翻译，禁止转载，欢迎转发。mistletoemistletoe是一个纯Python的Markdown解释器，设计成为快速、模块化和完全可定制的。mistletoe不单单是一个Markdown-to-HTML转译器。从一开始，就设计成将Markdown解析为抽象语法树(AST)。你可以为不同的输出格式置换渲染器，而不用触碰任何核心组件...
android 富文本支持gif,RichText: Android平台下的富文本解析器，支持Html和Markdown
weixin_34765773的博客
05-27 550
RichTextAndroid平台下的富文本解析器流式操作低侵入性依赖少，只依赖了disklrucache和support v4支持Html和Markdown格式文本支持图片点击和长按事件链接点击事件和长按事件支持设置加载中和加载错误时的图片支持自定义超链接的点击回调支持修正图片宽高支持GIF图片支持Base64编码、本地图片和Assets目录图片自持自定义图片加载器、图片加载器支持内存和磁盘双缓...
利用marked.js写个简单Markdown编辑器(1)
热门推荐
GISXX
05-29 1万+
Markdown的语法简洁明了、学习容易，而且功能比纯文本更强，因此有很多人用它写博客。 最近想自己动手写一个博客系统，然后查了下博客系统一般构造，发现目前大部分博客把Markdown作为博客的标配了。网上有很多markdown的解析插件，我一开始用的事markdown-js.js，但这个插件实在太坑了，代码块和表格都不能很好的处理；然后又用了strapdown.js，只能说这个插件太好了，它会给
自己写一个网页版的Markdown实时编辑器
weixin_34082789的博客
06-12 387
这几天忙着使用Python+Django+sqlite 搭建自己的博客系统，但是单纯的使用H5的TextArea，简直太挫了有木有。所以，就想模仿一下人家内嵌到网页上的Markdown编辑器，从而让自己的博客系统更加美观一点。 准备 需要什么 Markdown“解释器”：便于处理文本输入以及实时预览 Bootstrap模板 ...
用c++写一个markdown解析器
08-03
可以使用C语言来编写一个简单的Markdown解析器。以下是一个例子： ```c #include #include #include typedef struct { char* input; char* output; } Markdown; void parseMarkdown(Markdown* md) { // ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

新时代_打工人

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值