欢迎使用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](https://avatar.csdn.net/7/7/B/1_ralf_hx163com.jpg =30x30)

居中的图片:

居中并且带尺寸的图片: ![Alt](https://avatar.csdn.net/7/7/B/1_ralf_hx163com.jpg#pic_center =30x30)

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

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

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

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

生成一个适合你的列表

  • 项目

    • 项目

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

创建一个表格

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

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

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

使用:---------:居中

使用:----------居左

使用----------:居右

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

如何创建一个注脚

一个具有注脚的文本。[2]

注释也是必不可少的

Markdown将文本转换为 HTML

KaTeX数学公式

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

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

\[\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
\]

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

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

gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section 现有任务
已完成 :done, des1, 2014-01-06,2014-01-08
进行中 :active, des2, 2014-01-09, 3d
计划一 : des3, after des2, 5d
计划二 : des4, after des3, 5d
  • 关于 甘特图 语法,参考 这儿,

UML 图表

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

sequenceDiagram
张三 ->> 李四: 你好!李四, 最近怎么样?
李四-->>王五: 你最近怎么样,王五?
李四--x 张三: 我很好,谢谢!
李四-x 王五: 我很好,谢谢!
Note right of 王五: 李四想了很长时间, 文字太长了<br/>不适合放在一行.

李四-->>张三: 打量着王五...
张三->>王五: 很好... 王五, 你怎么样?

这将产生一个流程图。:

graph LR
A[长方形] -- 链接 --> B((圆))
A --> C(圆角长方形)
B --> D{菱形}
C --> D
  • 关于 Mermaid 语法,参考 这儿,

  1. mermaid语法说明 ↩︎

  2. 注脚的解释 ↩︎

欢迎使用Markdown编辑器的更多相关文章

  1. NiceMark——我的Markdown编辑器

    NiceMark--我的Markdown编辑器 闲来无事,写了一个Markdown编辑器.基于electron,完全采用Web前段技术(Html,css,JavaScript)实现.代码已托管在Git ...

  2. 好用的Markdown编辑器一览 readme.md 编辑查看

    https://github.com/pandao/editor.md https://pandao.github.io/editor.md/examples/index.html Editor.md ...

  3. mac好用的markdown编辑器

    在刚开始接触markdown的时候,就被吸引了.此后一直在找贴心的好用的markdown编辑器.印象笔记和马克飞象配合着用也是挺好的,唯一的缺点就是比较封闭,发个笔记的链接给同学,还得注册才能看,导致 ...

  4. 破解 Windows 下Markdown 编辑器 MarkdownPad 2

    MarkdownPad 是 Windows 平台下一款优秀的 Markdown 编辑器,本文简单介绍 Markdown 以及使用一种方法破解 MarkdownPad 使其升级到专业版.该方法仅限于教育 ...

  5. Markdown编辑器语法指南2

    人的一切痛苦, 本质上都是对自己的无能的愤怒. --王小波 1 Markdown编辑器的基本用法 1.1 代码 如果你只想高亮语句中的某个函数名或关键字,可以使用 `function_name()` ...

  6. 推荐一款Mac上好用的Markdown编辑器

    [TOC] 推荐一款Mac上好用的Markdown编辑器 正文 我算是一位Evernote的重度用户吧.之前也尝试过为知笔记,有道云笔记,微软的onenote,最后还是觉的Evernote.因为我喜欢 ...

  7. React项目(一):markdown编辑器

    在之前的React官网教程中,提到了用Remarkable为插件的markdown评论框.现在就来正儿八经地用另外一个插件marked.js做一个markdown编辑器吧! 准备工作 或许在做之前,应 ...

  8. Markdown编辑器:Typora

    现在网上的Markdown有很多,各有各的特色,同时也有各自的缺点.比如有的传图片比较麻烦,有的导出pdf需要付费,有的数学公式编辑比较麻烦等等...... 而最近接触到Typora,发现这真是一款良 ...

  9. Markdown编辑器入门

    欢迎使用博客园的Markdown编辑器 前言 今天早上起来在Ubuntu下操作,所以不能使用Windows Live Writer.所以就直接使用博客园的后台编辑器,开始以为博客园出错了,怎么编辑都没 ...

  10. markdown编辑器

    经过一番探索终于找到两个可以实时预览的markdown编辑器 一,sublime text 3 + MarkDown Editing + OmniMarkupPreviwer 安装方法网上均有,这里要 ...

随机推荐

  1. Thymeleaf 1-入门与基本概述

    一.概述 1.是什么 简单说, Thymeleaf 是一个跟 Velocity.FreeMarker 类似的模板引擎,它可以完全替代 JSP . 2.feature 1.Thymeleaf 在有网络和 ...

  2. crontab定时调度shell脚本

    本人最近要用crontab做一个定时调度任务,调一个启动脚本去执行jar包,并给main方法传一个日期参数. Linux系统:CentOS7 输入: crontab -e 在里面编写: SHELL=/ ...

  3. 当遇到npm ERR! Unexpected end of JSON input while parsing near……时的解决办法

    运行npm install时有时会遇到以下错误: npm ERR! Unexpected end of JSON input while parsing near ... 这时可以先执行下面的命令: ...

  4. jieba(结巴)常用方法

    python jieba库的基本使用   第一步:先安装jieba库 输入命令:pip install jieba jieba库常用函数: jieba库分词的三种模式: 1.精准模式:把文本精准地分开 ...

  5. 搜索引擎算法研究专题七:Hilltop算法

    搜索引擎算法研究专题七:Hilltop算法 2017年12月19日 ⁄ 搜索技术 ⁄ 共 1256字 ⁄ 字号 小 中 大 ⁄ 评论关闭   HillTop也是搜索引擎结果排序的专利,是Google工 ...

  6. Ansible安装及常用模块

    配置文件:/etc/ansible/ansible.cfg 主机列表:/etc/ansible/hosts  安装anslibe  wget -O /etc/yum.repos.d/epel.repo ...

  7. centos设置定时删除文件定时清理网站日志

    1.进入linux系统 2.在任意目录创建一个sh后缀的文件,如: 3.编辑打开该文件,如图: 4.此时按键盘上的“i”键或者“insert”键,进入编辑模式 输入: #!/bin/shfind /d ...

  8. SpringMvc中@ModelAttribute的运用

    /** * 1. 有 @ModelAttribute 标记的方法, 会在每个目标方法执行之前被 SpringMVC 调用! * 2. @ModelAttribute 注解也可以来修饰目标方法 POJO ...

  9. docker常用软件安装及使用

    linux安装docker: sudo wget -qO- https://get.docker.com | sh 启动docker: service docker start 搜索镜像: docke ...

  10. datalist的模板里的label要绑定一个函数

    列下如何在前台绑定数据时呼叫後台方法 如下GetInfoByID是后台方法,Eval("ID").ToString()是你在前台绑定数据传入的字段名 <asp:Label I ...