首页 > 其他分享 >MarkDown编辑展示

MarkDown编辑展示

时间:2022-12-11 22:05:35浏览次数:30  
标签:插入 MarkDown 展示 空格 编辑 图床 添加 com 图片


本文为展示代码.

MarkDown语法讲解请看:​​MarkDown语法汇总及演示​​

@[TOC](目录)
# ==标题、区块代码:==
# 一级标签
A First Level Header
 ================
## 二级标签
A Second Level Header
---------------------
>一级标签与二级标签有两种形式.
>其中`(# 一级标签)形式的应用是:先输入#,按空格键后输入想要的内容即可`

### Header 3

> This is a blockquote.
> 区块标签,先输入>在写入内容即可
> This is the second paragraph in the blockquote.
>
> ## This is an H2 in a blockquote
# ==文字的强调:==
*斜体*
_斜体_
**加粗**
__加粗__

# ==创建一个表格:==
| 第一列       | 第二列         | 第三列        |
|-----------| -------------:|:-------------|
| 第一列文本居中 | 第二列文本居右  | 第三列文本居左 | 

>表格的创建最主要的是第二行 : |-----|-----|-----|-----| ,该处代表4列.

:---------:  居中
:----------  居左
----------:  居右
>想要内容居中还是左右,关键就是在创建表格时第二行在------的左右添加 : , 默认(不添加:的时候)表格是居中的.

# ==列表:==
>对于使用有序与无序列表来说,写上*后面需要打一个空格,再输入想要写的内容.
>无需列表的三种方式.   * , + , - ,都可以
>有序列表写对应的数字即可.

**无序列表**
* 列1
* 列2
* 列3

**加号**
+ 列1
+ 列2
+ 列3

**减号**
- 列1
- 列2
- 列3

**有序列表**
1. 列1
2. 列2
3. 列3

# ==空行:==
>想要插入多个空行,MarkDown编辑器不添加任何东西时,只能添加一个空行. 
>**两种方式:**
>1.`输入 \ 按Enter键后 在输入\ 继续按Enter键,在输入要写的内容,即可插入两个空行.`
>2.`与html相同,使用 <br> ,换行符的意思,添加后即换行.

**例如**
滴水石穿,
\
\
非一日之功!

锲而不舍<br><br>
朽木不折!

# ==添加格式化文本:==
>**输入四个空格或者一个Tab键,后再输入内容,即可按原有格式输入**

# ==段首段中缩进:==
>1.段首可以使用`&ensp;`,`&emsp;`,`&nbsp;`来产生空格.
>* &emsp; : 一个全角空格
>* &ensp;  : 一个全角空格的一半
>* &nbsp;  : 一个半角空格
>
>2.段中可以将输入法改为全角(shift+空格)后,即可在文中添加空格.半角空格输入任意个,只起到一个空格的效果.

&ensp;1+1  =   2;
&emsp;1+1
&nbsp;1+1
1&nbsp;1(`&nbsp;`)
1 1(中间为半角空格)
1&ensp;1(`&ensp;`)
1 1(中间为全角空格)
1&emsp;1(`&emsp;`)
     1+1     =        2(全为半角空格)

# ==代码块:==
>三个方式:
>1. 输入四个空格,后输入内容
>2. 一个Tab键,后输入内容
>3. 三个反引号开始,内容写完后三个反引号作为结束. 
  
**添加的什么代码就在每个开始的反引号后面填写好代码语言的名称即可.**<br>

```java
public class one {
    public static void main(String[] args) {
        System.out.println("Helllo World!");
    }
}
```

>如果在文本中添加一段代码的话,可以用一个反引号开始,写入想要的代码,在输入一个反引号作为结束.
>`throw new IndexOutOfBoundsException(outOfBoundsMsg(index));`

# ==添加链接:==
1. `[展示的名称](想要的链接)`
**示例:**
* [百度](http://www.baidu.com)
* [Google](http://www.baidu.com) * [Clearlight的博客]

2. `直接添加链接`
访问:<www.baidu.com>
www.weibo.com       

3. `给图片添加链接`
格式: `[添加的图片](网站域名)`
>*其中如何添加图片,请看<a href="#itm2" >插入图片</a> *
>了解如何插入图片后,将插入的图片剪切,复制到 [ ] 里面,后面紧跟( ),括号里面写点击图片想要跳转的网址.网址前>面需要加上`http://`+`域名`

[![百度图标](https://s2.ax1x.com/2019/03/21/A3E2Nj.png)](http://www.baidu.com)
<br><br>
# ==字体、字号与颜色:==

>直接参考文章:[微wx笑:CSDN-markdown编辑器语法——字体、字号与颜色]
>       [RGB颜色查询对照表](http://www.114la.com/other/rgb.htm)
>\
>**摘抄部分,方便本文阅读:**
>\
><font face="黑体">我是黑体字</font>
\
<font face="微软雅黑">我是微软雅黑</font>
\
<font face="STCAIYUN">我是华文彩云</font>
\
<font color=#0099ff size=7 face="黑体">color=#0099ff size=72 face="黑体"</font>
\
<font color=#00ffff size=72>color=#00ffff</font>
\
<font color=gray size=72>color=gray</font>

# ==&:==
>博客中想要将特定的&ensp;打出来,用&amp;ensp;即可在文章中显示出来.
>**格式为:&amp+想要的内容即可.**

&amp;nbsp;  : 一个半角空格的长度
# ==分割线:==
>三种方式 :
>********
>---------
>______
# ==删除线:==
>格式:`~~添加删除线的内容~~`
>例 : ~~无效的信息~~

<a id="itm2" target="_blank"></a>
# ==插入图片:==
>csdn支持直接上传图片.
>三种方式:
>* 快捷键: ctrl + shift + G
>* ![在这里插入图片描述](/i/ll/?i=20190321165458623.png)
>* 直接复制本地图片,然后在编辑处进行粘贴即可.(省去上传的步骤)
![在这里插入图片描述](/i/ll/?i=20190321165753111.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2ODUyNzgw,size_16,color_FFFFFF,t_30)

`图片URL可在网站中的图片右键复制图片地址,粘贴到上图的文本框中插入即可显示.`

**上传下面漫画图片的方式:(不会有CSDN自己的水印)
将图片上传到[路过图床](https://imgchr.com/ )后,复制图片URL链接,粘贴的插入图片的文本框中插入即可.**
![优美图片](/i/ll/?i=2019032119562715.jpg?,type_ZmFuZ3poZW5naGVpdGk,shadow_20,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2ODUyNzgw,size_16,color_FFFFFF,t_70)
**上传风景图片的方式是直接去网站中复制图片,后直接在文本框中粘贴而来.(相当于上传到CSDN服务器,故会有自己博客水印)**
![优美图片](/i/ll/?i=20190321200645782.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2ODUyNzgw,size_16,color_FFFFFF,t_70)
**上传情侣图片方式是在网站中复制图片链接后通过csdn插入图片方式,与第一种相同(不会有水印,但是当图片在原网址图片删除的话,则该图片也会丢失,故将图片保存后上传到<a href="#itm3">==保险的图床==</a>后添加图床中图片的URL)**
![情侣图片](http://i1.umei.cc/uploads/tu/201903/9999/3f158684ea.jpg)

>* <a id="itm3">图床意义</a>
  就是专门用来存放图片,同时允许你把图片对外连接的网上空间,不少图床都是免费的。
>* 图床推荐编辑
  商家在选择图床的时候,请慎重选择免费图床,毕竟众多免费图床网站注册条款里有禁止商用这一条,哪天关闭了图片外链或者商用,势必给用户带来很大的麻烦,很多免费图床总是好景不长,为什么呢?其实很简单,做相册站是要投入的,比如服务器、带宽、人员、技术投资、市场宣传等等!完全免费了,这些小站可能自己都难存活,所以总是不能长久使用!
><br>*摘自 [图床_百度百科](https://baike.baidu.com/item/%E5%9B%BE%E5%BA%8A/10721348?fr=aladdin)*

>通过以上的示例显示复制图片后,直接粘贴在编辑的地方是最简单的方式.

`另外:上传本地图片不能大于5M,调整图片大小方法参考:`
[图片太大怎么办 如何对图片进行压缩处理](https://jingyan.baidu.com/article/5225f26ba33ee7e6fa090833.html)

**注意:图片描述和图片提示的区别 
图片描述是在图片无法加载的时候显示的; 
图片提示是在鼠标移动到图片上的时候显示的;** *注意内容摘自:[CSDN-markdown编辑器插入网上或本地电脑上的图片](

# ==添加锚点,跳到指定位置:==

**锚点是是网页制作中超级链接的一种,又叫命名锚记。**
 
>使用命名锚记可以在文档中设置标记,这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接,
这些链接可快速将访问者带到指定位置。
创建到命名锚记的链接的过程分为两步。 
1、创建命名锚记 
2、创建 到该命名锚记的链接.
反正就是用于文章快速定位,点击目录便可直接跳转到指定位置的。<br> >*锚点介绍摘自:[ hugh Lee : markdown中的锚点]

>方法:
>1. 创建锚记:
         <a href="#itm" >锚</a>
>2. 创建到该锚记的链接:
         <a id="itm">锚点</a>

<br>

# ==数学公式,UML图:==
暂未用到

**未完..**
                                   **Loading......**

*****
*不亲自尝试一下,永远不能解除心中的疑虑 !*

标签:插入,MarkDown,展示,空格,编辑,图床,添加,com,图片
From: https://blog.51cto.com/u_14233037/5928727

相关文章

  • kindeditor 富文本编辑器
    原文链接:https://www.cnblogs.com/hzyhx/p/11067265.html第一步:打开网站http://kindeditor.net/demo.php第二步:点击default.html(默认模式)  第三步:建一个文件夹,--......
  • 在Docker容器中编辑文件
    Docker容器中大多数默认没有vi、vim等文本编辑工具因此可以使用Linux原生的追加指令来进行文档编辑【以编辑es配置文件举例】1.进入容器dockerexec-itelasticsear......
  • 低代码 系列 —— 可视化编辑器3
    可视化编辑器3这是可视化编辑器的最后一篇,本篇主要实现​​属性区​​​和组件的​​放大和缩小​​​,最后附上​​所有代码​​。属性区:即对编辑区的组件进行编辑,例如编辑......
  • 低代码 系列 —— 可视化编辑器3
    可视化编辑器3这是可视化编辑器的最后一篇,本篇主要实现​​属性区​​​和组件的​​放大和缩小​​​,最后附上​​所有代码​​。属性区:即对编辑区的组件进行编辑,例如编辑......
  • VsCode更换MarkDown样式到底能有多好看?
    vscode到底有多强大?先看看MarkDown笔记的预览效果这只是一种插件谁再让我用别的软vscode到底有多强大?先看看MarkDown笔记的预览效果这只是一种......
  • MarkDown学习
    标题三级标题四级标题字体HelloworldHelloworldHelloworldHelloworld!引用学习Markdown,走向人生巅峰分割线图片超链接点击跳转列表abab表格......
  • Extjs4 Tree Grid 综合示例(展开、编辑列、获取数据)
      用json数据模拟后端传回来的结果,Extjstree支持两种类型的结构,一种是带children属性的嵌套式的数据,一种是扁平的,每条记录带pid的数据,带pid的添加配置项可以自动解析......
  • markdown编辑器typora使用方法
    一、文字底色设置借助table,tr,td等表格标签的bgcolor属性来实现背景色。将那一整行看作一个表格,更改整个格子的背景色(bgcolor)。Markdown语法:<tabl><tr><tdb......
  • MarkDown 入门学习总结教程
    Webelievethatwritingisaboutcontent,aboutwhatyouwanttosay–notaboutfancyformatting.译文:我们坚信写作写的是内容,所思所想,而不是花样格式.Markdo......
  • 在vue3.0+中使用tinymce及实现多图上传,文件上传,公式编辑等功能
    vue2版本移步至https://www.cnblogs.com/huihuihero/p/13877589.htmlvue3版本中配置tinymce,相较于vue2版本区别不大,主要注意tinymce版本号。其他注意项下面提及版本号......