MarkdownEditor 配置以及使用

news2024/12/23 9:30:18

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

居中方式

下面格式控制居中格式
|:--:|:--|--:|:--:|

|:--:| 表示居中
|:--|  表示居左
|--:|  表示居右

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2114552.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

港科夜闻 | 叶玉如校长出席2024科技+新质生产力高峰论坛发表专题演讲,贡献国家科技强国战略...

关注并星标 每周阅读港科夜闻 建立新视野 开启新思维 1、叶玉如校长出席“2024科技新质生产力高峰论坛”&#xff0c;做了题为“三个创新&#xff1a;培育和发展新质生产力、贡献国家科技强国战略”的主题演讲。该论坛于9月2日在香港召开。论坛围绕夯实基础科研、推动源头创新、…

【VUE】Vue 项目基本开发结构介绍

&#x1f4dd;个人主页&#x1f339;&#xff1a;个人主页 ⏩收录专栏⏪&#xff1a;VUE &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339;&#xff0c;让我们共同进步&#xff01; 在 Vue 开发中&#xff0c;了解 Vue 项目的基本结构是进行 Vue 开发的基础…

爬虫基础知识+豆瓣电影实战

什么是爬虫 简单来说&#xff0c;爬虫就是获取网页并提取和保存信息的自动化程序&#xff0c;爬虫能够自动请求网页&#xff0c;并将所需要的数据抓取下来。通过对抓取的数据进行处理&#xff0c;从而提取出有价值的信息进行存储使用。 为什么用Python做爬虫 首先您应该…

python 中使用tkinter构建一个图片的剪切器-附源码

由于项目需要&#xff0c;需要构建一个间的软件&#xff0c;方便查看图片的剪切的位置&#xff0c;并对其中的图像进行分析&#xff0c;实现如下的功能 简单的UI加载图片剪切图片显示剪切后的图片 针对图片的内容进行识别 图片质量分析 前端的具体代码如下&#xff0c; 有需…

5.8 切换保护模式(5)

1 首先测试 了&#xff0c; 之前的代码 是 没有问题的&#xff0c;确实会 停在 汇编处。 1 首先是 设置 除了 CS 之外的寄存器 进入 32为模式 //为了使除了 cs 之外的 段选择寄存器也进入 32位模式。mov $16, %ax // 16为数据段选择子mov %ax, %dsmov %ax, %ssmov %ax, %esmov…

axure动态面板

最近转管理岗了&#xff0c;作为项目负责人&#xff0c;需要常常与客户交流沟通&#xff0c;这时候画原型的能力就是不可或缺的本领之一了&#xff0c;关于axure可能很多it行业者都不是很陌生&#xff0c;简单的功能呢大家就自行去摸索&#xff0c;我们这次从动态面板开始讲起。…

C语言进阶版第8课—指针(2)

文章目录 1. 数组名的理解2. 指针访问数组3. 一维数组传参本质4. 冒泡排序5. 二级指针6. 指针数组7. 指针数组模拟二维数组 1. 数组名的理解 sizeof&#xff08;数组名&#xff09;— 这里的数组名代表整个数组&#xff0c;计算的也是整个数组的大小&数组名 — 这里的数组名…

adb devices找不到设备

重新启动ADB服务。在命令行窗口中输入adb kill-server&#xff0c;然后再输入adb start-server&#xff0c;重新启动ADB服务 再重启插入手机连入电脑的线&#xff0c;再次启动开发模式。 在在命令行窗口中输入adb version

【大数据】深入浅出Hadoop,干货满满

【大数据】深入浅出Hadoop 文章脉络 Hadoop HDFS MapReduce YARN Hadoop集群硬件架构 假设现在有一个PB级别的数据库表要处理。 在单机情况下&#xff0c;只能升级你的内存、磁盘、CPU&#xff0c;那么这台机器就会变成 “超算”&#xff0c;成本太高&#xff0c;商业公司肯…

Java基础知识回顾-匿名内部类

文章目录 知识学习实现案例第一步、父类定义方法第二步、子类中定义匿名内部类第三步、执行方法 最近在复习Java知识点的时候&#xff0c;在看匿名内部类&#xff0c;记录下来&#xff0c;方便备查。 知识学习 匿名内部类&#xff0c;即一种特殊的局部内部类&#xff0c;不需要…

java opencv no opencv_java490 in java.library.path

java使用opencv处理图片&#xff0c;idea运行程序&#xff0c;报错异常信息&#xff1a; Exception in thread "main" java.lang.UnsatisfiedLinkError: no opencv_java490 in java.library.path: /Users/carter/Library/Java/Extensions:/Library/Java/Extensions:…

Canvas Confetti - 免费开源的五彩纸屑飞舞特效的 JS 库,多用于在网页上实现欢乐庆祝的场景

今天看科技周刊看到的一个酷炫的动效库&#xff0c;使用简单&#xff0c;视觉效果很好&#xff0c;推荐给大家。 Canvas Confetti 是一个基于 JavaScript 的特效动画库&#xff0c;可以在网页界面上轻松地实现五彩纸屑飞舞的庆祝场景特效。这个特效库封装了几种酷炫的特效&…

Linux系统之实现dhcp功能(Implementation of DHCP Function in Linux System)

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:Linux运维老纪的首页…

tabBar设置底部菜单以及选项iconfont图标

1.tabBar设置底部菜单 在官网里面可以了解到tabBar组件的一些知识和注意点&#xff1a; 需要给页面设置一个底部导航的话可以在pages.json里面设置一个tabBar标签&#xff0c;在其里面设置pagePath和text属性。 可以看的pagePath是跳转的地址&#xff0c;text是下面导航的文字…

string详解

Golang详解string 文章目录 Golang详解stringGolang中为什么string是只读的&#xff1f;stirng和[]byte的转化原理[]byte转string一定需要内存拷贝吗&#xff1f;字符串拼接性能测试 Golang中为什么string是只读的&#xff1f; 在Go语言中&#xff0c;string其实就是一个结构体…

SSM项目使用AOP技术进行日志记录

本步骤只记录完成切面所需的必要代码 本人开发中遇到的问题&#xff1a; 切面一直切不进去&#xff0c;最后发现需要在springMVC的核心配置文件中中开启注解驱动才可以&#xff0c;只在spring的核心配置文件中开启是不会在web项目中生效的。 之后按照下面的代码进行配置&…

【Python篇】PyQt5 超详细教程——由入门到精通(中篇二)

文章目录 PyQt5超详细教程前言第7部分&#xff1a;生成图表与数据可视化7.1 matplotlib 与 PyQt5 的结合7.2 在 PyQt5 中嵌入 matplotlib 图表示例 1&#xff1a;嵌入简单的 matplotlib 图表代码详解&#xff1a; 7.3 动态生成图表示例 2&#xff1a;动态更新图表代码详解&…

jmeter之TPS计算公式

需求&#xff1a; 如何确定环境当中的TPS指标 PV:&#xff08;Page View&#xff09;即页面访问量&#xff0c;每打开一次页面PV计数1&#xff0c;刷新页面也是。PV只统计页面访问次 数。 UV(Unique Visitor),唯一访问用户数&#xff0c;用来衡量真实访问网站的用户数量。 一般…

在亚马逊云科技上利用Graviton4代芯片构建高性能Java应用(上篇)

简介 在AI迅猛发展的时代&#xff0c;芯片算力对于模型性能起到了至关重要的作用。一款能够同时兼具高性能和低成本的芯片&#xff0c;能够帮助开发者快速构建性能稳定的生成式AI应用&#xff0c;同时降低开发成本。今天小李哥将介绍亚马逊推出的4代高性能计算处理器Gravition…

【Python 千题 —— 算法篇】无重复字符最长子段

Python 千题持续更新中 …… 脑图地址 &#x1f449;&#xff1a;⭐https://twilight-fanyi.gitee.io/mind-map/Python千题.html⭐ 题目背景 在编程过程中&#xff0c;处理字符串的任务时常遇到&#xff0c;其中一个经典问题是查找无重复字符的最长子串。这在很多应用场景中…