程序员经验分享-hwhale

CSDN-markdown编辑器(含源码.md文件)

2023-05-16

说明:
CSDN新版Markdown编辑器(20190412)

这里写自定义目录标题

  • 欢迎使用Markdown编辑器
    • 新的改变
    • 功能快捷键
    • 合理的创建标题，有助于目录的生成
    • 如何改变文本的样式
    • 插入链接与图片
    • 如何插入一段漂亮的代码片
    • 生成一个适合你的列表
    • 创建一个表格
      • 设定内容居中、居左、居右
      • SmartyPants
    • 创建一个自定义列表
    • 如何创建一个注脚
    • 注释也是必不可少的
    • KaTeX数学公式
    • 新的甘特图功能，丰富你的文章
    • UML 图表
    • FLowchart流程图
    • 导出与导入
      • 导出
      • 导入
  • 附：本文.md文件源码

欢迎使用Markdown编辑器

你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

新的改变

我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：

  1. 全新的界面设计 ，将会带来全新的写作体验；
  2. 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；
  3. 增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；
  4. 全新的 KaTeX数学公式 语法；
  5. 增加了支持甘特图的mermaid语法1 功能；
  6. 增加了 多屏幕编辑 Markdown文章功能；
  7. 增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能，功能按钮位于编辑区域与预览区域中间；
  8. 增加了 检查列表 功能。

功能快捷键

撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G

合理的创建标题，有助于目录的生成

直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

删除文本

引用文本

H2O is是液体。

210 运算结果是 1024.

插入链接与图片

链接: link.

图片: Alt

带尺寸的图片: Alt

居中的图片: Alt

居中并且带尺寸的图片: Alt

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block
var foo = 'bar';

生成一个适合你的列表

  • 项目
    • 项目
      • 项目
  1. 项目1
  2. 项目2
  3. 项目3
  • 计划任务
  • 完成任务

创建一个表格

一个简单的表格是这么创建的：

项目Value
电脑$1600
手机$12
导管$1

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列第二列第三列
第一列文本居中第二列文本居右第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

TYPEASCIIHTML
Single backticks'Isn't this fun?'‘Isn’t this fun?’
Quotes"Isn't this fun?"“Isn’t this fun?”
Dashes-- is en-dash, --- is em-dash– is en-dash, — is em-dash

创建一个自定义列表

Markdown
Text-to- HTML conversion tool
Authors
John
Luke

如何创建一个注脚

一个具有注脚的文本。2

注释也是必不可少的

Markdown将文本转换为 HTML。

KaTeX数学公式

您可以使用渲染LaTeX数学表达式 KaTeX:

Gamma公式展示 Γ ( n ) = ( n − 1 ) ! ∀ n ∈ N \Gamma(n) = (n-1)!\quad\forall n\in\mathbb N Γ(n)=(n−1)!∀n∈N 是通过欧拉积分

Γ ( z ) = ∫ 0 ∞ t z − 1 e − t d t   . \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. Γ(z)=∫0∞​tz−1e−tdt.

你可以找到更多关于的信息 LaTeX 数学表达式here.

新的甘特图功能，丰富你的文章

Mon 06 Mon 13 Mon 20 已完成 进行中 计划一 计划二 现有任务 Adding GANTT diagram functionality to mermaid
  • 关于 甘特图 语法，参考 这儿,

UML 图表

可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：:

张三 李四 王五 你好！李四, 最近怎么样? 你最近怎么样，王五？ 我很好，谢谢! 我很好，谢谢! 李四想了很长时间, 文字太长了 不适合放在一行. 打量着王五... 很好... 王五, 你怎么样? 张三 李四 王五

这将产生一个流程图。:

链接
长方形
圆
圆角长方形
菱形
  • 关于 Mermaid 语法，参考 这儿,

FLowchart流程图

我们依旧会支持flowchart的流程图：

Created with Raphaël 2.2.0 开始 我的操作 确认？ 结束 yes no
  • 关于 Flowchart流程图 语法，参考 这儿.

导出与导入

导出

如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。

导入

如果你想加载一篇你写过的.md文件或者.html文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，
继续你的创作。

附：本文.md文件源码

源码

  1. mermaid语法说明 ↩︎

  2. 注脚的解释 ↩︎

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

CSDN-markdown编辑器(含源码.md文件) 的相关文章

随机推荐

  • 关于Qt中使用QFile打开文件时遇到问题的分析

    项目场景 xff1a 在文件打开的时候 xff0c 使用QFile的QIODevice的不同模式 xff0c 会出现不同的表现 xff08 这是我一个同事当时遇到的问题 xff0c 现在拿来分析分析 xff0c 以下的所有事例代码均用于示范

  • vue+vue_cli3 + typeScript + echarts热力图

    vue 43 vue cli3 43 typeScript 43 echarts热力图 准备工作 准备工作 1 申请百度地图秘钥http lbsyun baidu com apiconsole key create 注 xff1a 如果是运

  • forEach循环 当满足条件时跳出当前循环

    forEach循环 当满足条件时跳出该循环 使用try catch try this menuData forEach item any 61 gt if toPath as string indexOf item url 61 61 61

  • vue3.0 学习笔记

    vue3学习笔记 vue3 0六大亮点vue3 0 如何变快的 xff1f vue3 0六大亮点 performance xff1a 性能比vue2 0快1 2 2倍tree shaking support xff1a 按需编译 xff0c

  • 从后台读取以文件流的形式加载图片

    span class token comment html span span class token operator lt span img span class token operator span src span class t

  • element-ui el-transfer添加拖拽排序功能

    html 部分 lt el card class 61 34 box card 34 gt lt el transfer render content 61 34 renderFunc 34 v model 61 34 value 34 d

  • Mac系统装android开发环境无法创建SD卡解决方案

    无法创建SD卡是小事 xff0c 但是引起的问题却是大事 xff0c 模拟器无SD卡则android项目无法正常生成R文件 xff0c 导致HelloWorld都无法跑起来 xff0c 头大 xff0c 折腾了几天 xff0c 终于找到原因

  • audio报错DOMException: play() failed because the user didn‘t interact with the document first

    chrome66版本之后禁掉了声音的自动播放 xff0c 这句报错提示 xff0c 调用play方法之前 xff0c 请先与页面进行交互 我们自己来封装一个可以自动播放的Audio xff0c 功能包含 xff1a 自动播放 暂停 循环播放

  • iview中Table的render用法大全

    1 日期格式化 xff08 yyyy MM dd hh mm s xff09 title 34 格式化时间 34 key 34 time 34 render h params 61 gt let temp 61 39 39 if param

  • Vue添加中间层--service层

    Vue添加中间层 service层 在单页面应用中 xff0c 为了方便代码的管理 xff0c 提高可读性 xff0c 还有一个原因就是 xff0c 在项目开发工程中 xff0c 前端人员与后端开发人员的进程是不同步的 xff0c 在不同步

  • Vue is not defined

    Vue is not defined 场景再现 xff1a 在Vue的自定义组件中 xff0c 想要调用在 static serverconfig json中配置的全局地址ApiUrl 在自定义组件中 console log Vue pro

  • Vue中进行pdf的预览下载 vue-pdf

    1 使用npm 下载vue pdf npm install span class token operator span save vue span class token operator span pdf 2 封装pdf组件 span

  • C# 的基本代码规范

    个人遵守的通用 C 代码规范 xff0c 其中参考了微软的代码规范 实际上在是使用一些框架开发时 例如 ASP NET Core 也应该遵循一定的模式规范 xff0c 但是本文只讨论一些比较通用的代码规范 文章将从下面的几个方面来谈论规范

  • ubuntu 文件夹消失怎么办

    点击文件夹 xff0c 然后摁F9

  • ffmpeg花屏解决(修改源码，丢弃不完整帧和解码错误帧)

    linux下模拟丢帧的命令 因为帧之间的参考关系 实测如果是1 几乎没有完好的帧 tc只能对发出的包做处理 但它还可以做延时抖动处理 sudo tc qdisc add dev enp0s31f6 root netem loss span

  • 使用SDF对ROS-Gazebo中模型进行编辑修改

    什么是SDF文件 SDF是一种XML格式 xff0c 能够描述机器人 静态和动态物体 照明 地形甚至物理学的各方面的信息 SDF可以精确描述机器人的各类性质 xff0c 除了传统的运动学特性之外 xff0c 还可以为机器人定义传感器 表面属

  • Ubuntu16.04桌面图标消失

    项目场景 xff1a 提示 xff1a 这里简述项目相关背景 xff1a 例如 xff1a Ubuntu16 04用了挺久 问题描述 xff1a 提示 xff1a 这里描述项目中遇到的问题 xff1a Ubuntu16 04重启后 xff0

  • uni-app 半屏地图拖拽滚动底部半屏，仿高德搜索拖拽

    lt template gt lt view class 61 34 event help details 34 gt lt view class 61 34 back last page 34 style 61 34 39 top 39

  • 1、 Seata快速开始

    一 seata服务搭建 第一步 xff1a 下载seata安装包 我们通过https github com alibaba spring cloud alibaba wiki E7 89 88 E6 9C AC E8 AF B4 E6 98

  • CSDN-markdown编辑器(含源码.md文件)

    说明 CSDN新版Markdown编辑器 20190412 这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题 xff0c 有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适

热门标签