您的位置:首页 > 汽车 > 时评 > MarkdownEditor 配置以及使用

MarkdownEditor 配置以及使用

2024/11/17 20:31:30 来源:https://blog.csdn.net/LIQIANGEASTSUN/article/details/142004087  浏览:    关键词:MarkdownEditor 配置以及使用

MarkdownEditor 配置以及使用

MarkdownEditor是一款基于浏览器的 Markdown 编辑器,虽然他是独立软件,但该软件内嵌一个浏览器。功能非常简单实用、反应速度很快,号称是Markdown领域的NotePad(记事本)。


MarkdownEditor还有拼写检查功能。
MarkdownEditor有两个版本,都是国人开发的,都是开源免费的。
MarkdownEditor是独立的软件、也有在线Web集成版。


https://jbt.github.io/markdown-editor/

下面以网页版为例
打开链接,界面如下

在这里插入图片描述

功能区域
在这里插入图片描述

网页版只提供这几个按钮功能

从左到右的功能依次如下

打开本地存储的 .md 文件,选择一个本地 .md 打开以后,尽量刷新一下界面,避免界面不自动刷新

编辑后下载到本地保存为 .md 文件

网页编辑的时候保存,不会保存到 .md

分享,将这个编辑分享为一个链接,别人可以通过这个链接预览

白天/黑夜 模式,就是网页背景是白色或黑色

预览模式

拼写检查,还不知道会检查哪些




打开本地 .md 文件,选择一个路径下的 .m
注意:只是编辑模式下保存,不会保存到 .md,一定要及时点击下载按钮,以.md格式保存下载到本地
在这里插入图片描述


如果要在自己电脑配置 MarkdownEditor,点击网页版界面左上角的 # Markdown Editor 打开 Markdown Editor 在 GitHub 上的源码

在这里插入图片描述

在这里插入图片描述

下载或者克隆到自己电脑上,然后打开根目录,有个名为 index.html,双击打开就是 Markdown Editor 编辑器
在这里插入图片描述

可以在自己电脑上起一个服务,打开这个 index.html

编辑
注意:下面所有编辑符号都是英文输入法

1.标题

标题按照 # 多一个 # 标题等级现将一级
左侧是编辑,右侧是预览
在这里插入图片描述

2.换行

<br>

3.插入代码

开始标志 ```语言缩写结束标志 ```语言缩写 标记代码块是 什么语言如 
C# 开头         ```cpp
Java 开头       ```java
JavaScript 开头 ```javascript
Lua 开头        ```lua

在这里插入图片描述

4.插入图片

(4.1)插入图片链接

![风景](https://q6.itc.cn/q_70/images03/20240126/4eaa7950e4214e8e83965f851318a03d.jpeg)格式:![Alt text](URL)  -> 感叹号 ! 开始,大括号[图片描述](图片网址)

(4.2)插入本地图片

![截图](ABC/ABC.png)

我通过网页版发现这里写绝对路径或者 .md 文件的相对路径都无法正常显示,如下
在这里插入图片描述
有分享解决说是 需要与 .md 文件夹的相对路径,感觉需要使用安装版本的 MarkdownEditor,我没有测试
注意:原本也不建议使用本地图片,因为 MarkdownEditor 编辑时插入本地图片确实是方便了,但是当需要把 .md 分享给别人的时候,就是灾难了,这个编辑器不会把图片打包一起存储,所以 转发的 .md 文件是不包含图片资源的,分享给别人也看不到图片

(4.2.1)需要使用本地图片,但是没有网络服务器可以上传图片,解决方案
将图片转化为 base64 编码
随便找个在线图片转base64编码网页
https://www.jyshare.com/front-end/59/
在这里插入图片描述
图片拖拽上去,复制代码

![图片描述](图片base64编码)

如下:缺点:不美观,因为图片的base64编码很长很长
在这里插入图片描述

5.字体

斜体

*需要加粗的文字*

加粗

**需要加粗的文字**

斜体并且加粗

***需要加粗的文字***

首行缩进

行首输入 -- ,也就是 两个 -

– 开始写文章

分割线

行首输入 --- , 也就是 三个 -

— 开始写文章

6.引用

在需要添加引用的文字前边加 >

这里是引用
第二行也是引用

7.插入链接

[百度](https://www.baidu.com/)

百度

8.列表

(8.1) 无需列表
在列表前 加 * 或者 + 或者 -
注意符号和文字中间最好加一个空格
如下

* 列表A
* 列表B
* 列表C

展示如下

  • 列表A
  • 列表B
  • 列表C

(8.1)有序列表
在文字前加 数字和英文点

1. 列表1
2. 列表2
  1. 列表1
  2. 列表2

9.表格

添加表格如下
添加一个 两行、四列的表格
| 姓名 |张三  |李四|王五|
|:--:|:--|--:|:--:|
| A | B |C|D|

表格显示如下

姓名张三李四王五
ABCD

居中方式

下面格式控制居中格式
|:--:|:--|--:|:--:||:--:| 表示居中
|:--|  表示居左
|--:|  表示居右

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com