【Markdown几个常用技巧】图文全面详解,论怎么让笔记更加美观

发布时间:2023-03-27 18:00


文章目录

    • 前言
    • 一、文字
      • 1.1 形态
      • 1.2 字体
      • 1.3 颜色
      • 1.4 大小
      • 1.5 特殊符号
    • 二、结构
      • 2.1 标题
      • 2.2 代码块
      • 2.3 引用
      • 2.4 分割线
      • 2.5 列表
      • 2.6 表格
      • 2.7 目录
      • 2.8 链接
    • 三、图片
      • 3.1 设置图片大小
      • 3.2 设置图片居中

\"【Markdown几个常用技巧】图文全面详解,论怎么让笔记更加美观_第1张图片\"

前言

注意:本文主要基于CSDN的markdown编辑器讲解
Markdown通过简单标记语法,使普通文本内容具有一定格式,但其本身并不支持修改字体、字号等功能,衍生版本CSDN-markdown编辑器添加这部分内容

一、文字

1.1 形态

斜体:
\"在这里插入图片描述\"
加粗:
\"在这里插入图片描述\"
高亮标记:
\"在这里插入图片描述\"
删除线:
\"在这里插入图片描述\"


1.2 字体

使用HTML标签设置字体

输入:

<font face=\"华文彩云\" 笔记<font>

效果呈现:

笔记

喜欢什么字体可以直接电脑中查询或者上百度喔


1.3 颜色

也是用内嵌HTML实现

输入

<font color=red> 红色</font>
<font color=blue> 蓝色</font>
<font color=green> 绿色</font>

效果呈现:
红色
蓝色
绿色


1.4 大小

输入:

<font size=5> 尺寸为五</font>

效果呈现:

尺寸为五

❗️以上依靠HTML便签的效果是可以叠加的

如:

<font face=\"华文新魏\" size=5 color=blue> markdown</font>

markdown

1.5 特殊符号

看到别人用的✫、、是不是很好玩
这些都可以在Unicode字符百科找到哦


二、结构

2.1 标题

\"【Markdown几个常用技巧】图文全面详解,论怎么让笔记更加美观_第2张图片\"

2.2 代码块

这个功能对于程序员绝对是必不可少的

输入:
\"【Markdown几个常用技巧】图文全面详解,论怎么让笔记更加美观_第3张图片\"
效果呈现:

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

2.3 引用

直接在文本行最前面加“>\"
效果:


2.4 分割线

可以使文章结构更加清晰

输入:

---

即可得到一条分割线


2.5 列表

无序列表:
可用快捷键——

ctrl+shift+U

或输入:

-(加空格)

实现:

  • 知识点

有序列表:

可用快捷键——

ctrl+shift+O

或输入:

某个数字加空格 1 

效果:

  1. 知识一
  2. 知识二

2.6 表格

输入:

项目 | 费用
---------|-----
晚餐|$100
打车|$30
可乐|$3

效果呈现:

项目 费用
晚餐 $100
打车 $30
可乐 $3

2.7 目录

输入

@[TOC]

即可预览到由标题组成的目录


2.8 链接

  • 行内式
[link](https://www.csdn.net/)
  • 锚点
    其实就是HTML页内超链接,在CSDN-markdown编辑器的实现
    点击某个文字,页面滑动到你想去的地方

    实现:

在想去的地方新增一行
<span id=\"一个标识\"> </span>
\"index\"
点击的文字扩上中括号并且后面则加入(#index)

如下所示:
跳转到目录


三、图片

3.1 设置图片大小

HTML格式:

<img src=\"图片的路径\" width=\"249\" height=\"249\">

一般改变宽度和长度的其中一个即可,不然比例不对可能会出现变样

\"【Markdown几个常用技巧】图文全面详解,论怎么让笔记更加美观_第4张图片\" \"【Markdown几个常用技巧】图文全面详解,论怎么让笔记更加美观_第5张图片\"

3.2 设置图片居中

实现:

<div align=center>
<img src=\"图片路径\" width=\"200\"></div>
\"【Markdown几个常用技巧】图文全面详解,论怎么让笔记更加美观_第6张图片\"

各位看官觉得还不错可以点赞关注一下吗,我是前端小刘不怕牛牛,期待与您共同进步

\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号