工具--Typora详解

2023-10-30

工具–Typora详解

零、文章目录

一、MarkDown

1、MarkDown是什么

  • Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。

  • Markdown 语言在 2004 由约翰·格鲁伯(英语:John Gruber)创建。

  • Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。

  • Markdown 编写的文档后缀为 .md, .markdown

常用markdown编辑器,种类繁多,自己选择自己喜欢的产品

  • Typora
  • visual studio code
  • Mou
  • MarkdownPad
  • Atom
  • Haroopad
  • SublimeText
  • Cmd Markdown
  • Byword
  • CuteMarkEd
  • EpicEditor
  • MarkdownEditor
  • MarkPad
  • Draft
  • Quiver
  • dillinger
  • Inkdrop
  • Haroopad
  • Notion
  • Marktext

2、MarkDown基本语法

标题

使用 # 号可表示 1-6 级标题,一级标题对应一个 # 号,二级标题对应两个 # 号,以此类推,标题内容和**#**之间空格隔开。

代码:

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

效果:

md2


字体

一个星号或者下划线包起来标识斜体,两个星号或者下划线包起来标识粗体,三个星号或者下划线就是两个效果的叠加粗体+斜体。

代码:

*斜体文本*
_斜体文本_
**粗体文本**
__粗体文本__
***粗斜体文本***
___粗斜体文本___

效果:

斜体文本
斜体文本
粗体文本
粗体文本
粗斜体文本
粗斜体文本


分隔线

你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线,行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线。

代码:

***
* * *
---
----------

效果:






删除线

如果段落上的文字要添加删除线,只需要在文字的两端加上两个波浪线 ~~ 即可

代码:

~~BAIDU.COM~~

效果:

BAIDU.COM


下划线

下划线可以通过 HTML 的 标签来实现

代码:

<u>带下划线文本</u>

效果:

带下划线文本


列表

无序列表使用星号、加号或是减号作为列表标记,这些标记后面要添加一个空格,然后再填写内容

代码:

* 第一项
* 第二项
* 第三项
+ 第一项
+ 第二项
+ 第三项
- 第一项
- 第二项
- 第三项

效果:

  • 第一项
  • 第二项
  • 第三项
  • 第一项
  • 第二项
  • 第三项
  • 第一项
  • 第二项
  • 第三项

有序列表使用数字并加上 . 号来表示

代码:

1. 第一项
2. 第二项
3. 第三项

效果:

  1. 第一项
  2. 第二项
  3. 第三项

列表嵌套只需在子列表中的选项前面添加四个空格即可

代码:

1. 第一项:
    - 第一项嵌套的第一个元素
    - 第一项嵌套的第二个元素
2. 第二项:
    - 第二项嵌套的第一个元素
    - 第二项嵌套的第二个元素

效果:

  1. 第一项:
    • 第一项嵌套的第一个元素
    • 第一项嵌套的第二个元素
  2. 第二项:
    • 第二项嵌套的第一个元素
    • 第二项嵌套的第二个元素

区块引用

常规使用

Markdown 区块引用是在段落开头使用 > 符号 ,然后后面紧跟一个空格符号

代码:

> 区块引用
> 学的不仅是技术更是梦想

效果:

区块引用
学的不仅是技术更是梦想

嵌套使用

一个 > 符号是最外层,两个 > 符号是第一层嵌套,以此类推。

代码:

> 最外层
> > 第一层嵌套
> > > 第二层嵌套

效果:

最外层

第一层嵌套

第二层嵌套

区块中使用列表

代码:

> 区块中使用列表
> 1. 第一项
> 2. 第二项
> + 第一项
> + 第二项
> + 第三项

效果:

区块中使用列表

  1. 第一项
  2. 第二项
  • 第一项
  • 第二项
  • 第三项

列表中使用区块

如果要在列表项目内放进区块,那么就需要在 > 前添加四个空格的缩进

代码:

* 第一项
    > 区块引用
    > 学的不仅是技术更是梦想
* 第二项

效果:

  • 第一项

    区块引用
    学的不仅是技术更是梦想

  • 第二项

代码高亮

如果是段落上的一个函数或片段的代码可以用反引号把它包起来实现高亮

代码:

`printf()` 函数

效果:

printf() 函数


代码段

可以用 ``` 包裹一段代码,并指定一种语言(也可以不指定)

代码:

```javascript
$(document).ready(function () {
    alert('RUNOOB');
});
```

效果:

$(document).ready(function () {
    alert('RUNOOB');
});

链接

中括号包住链接名称,小括号包住链接地址,用来标记链接名称和地址需要区分的地址。或者直接尖括号包住链接地址。

代码:

[链接名称](链接地址)
或者
<链接地址>

效果:

链接名称

http:www.baidu.com


图片

开头一个感叹号 !,接着一个方括号,里面放上图片的替代文字,接着一个普通括号,里面放上图片的网址(可以是网址或者相对路径或者绝对路径),最后还可以用引号包住并加上选择性的 ‘title’ 属性的文字。

Markdown 还没有办法指定图片的高度与宽度,如果你需要的话,你可以使用普通的 img标签。

代码:

![alt 属性文本](图片地址 "可选标题")

![这是一张图片](https://bluecusliyoupicrep.oss-cn-hangzhou.aliyuncs.com/202201231616454.png )

效果:

这是一张图片


表格

Markdown 制作表格使用 | 来分隔不同的单元格,使用 - 来分隔表头和其他行

代码:

|  表头   | 表头  |
|  ----  | ----  |
| 单元格  | 单元格 |
| 单元格  | 单元格 |

效果:

表头 表头
单元格 单元格
单元格 单元格

我们可以设置表格的对齐方式

  • -: 设置内容和标题栏居右对齐。
  • :- 设置内容和标题栏居左对齐。
  • :-: 设置内容和标题栏居中对齐。

代码:

| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |

效果:

左对齐 右对齐 居中对齐
单元格 单元格 单元格
单元格 单元格 单元格

html标签

不在 Markdown 涵盖范围之内的标签,都可以直接在文档里面用 HTML 撰写。目前支持的 HTML 元素有:<kbd> <b> <i> <em> <sup> <sub> <br>等。

代码:

使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑

效果:

使用 Ctrl+Alt+Del 重启电脑


转义

Markdown 使用了很多特殊符号来表示特定的意义,如果需要显示特定的符号则需要使用转义字符,Markdown 使用反斜杠转义特殊字符。

代码:

**文本加粗** 
\*\* 正常显示星号 \*\*

效果:

文本加粗
** 正常显示星号 **

目录

以“#”来定义标题层级,在需要生成目录的地方加上[TOC],markdown会根据文章的标题层级自动生成目录。

二、Typora

1、Typora是什么

  • Typora是一款轻便简洁的Markdown编辑器,支持即时渲染技术,这也是与其他Markdown编辑器最显著的区别。即时渲染使得你写Markdown就想是写Word文档一样流畅自如。

  • 官网地址:https://typora.com.cn/

  • 正式版本现已收费,有兴趣的可以支持下,送上免费版百度网盘链接:https://pan.baidu.com/s/1F6bRpOLGoiBqnIlBIAdv2A提取码:1234。

2、Typora常用功能

(1)文件系统
  • **快速打开:**你可以通过 文件 - 快速打开...Ctrl + P 快捷键快速打开最近的文档。
  • **保存:**Typora 支持自动保存,一般很少有写好的文档丢失的情况。同时它也提供了诸如「保存」、「另存为」、「保存全部打开的文件…」之类的功能。
  • **导入:**Typora 支持非常多的文件格式:.docx, .latex, .tex, .ltx, .rst, .rest, .org, .wiki, .dokuwiki, .textile, .opml, .epub。
  • **导出:**Typora 原生支持导出 PDF,HTML等格式。你可以根据软件内提示安装 Pandoc 插件来导出更多例如 docx,LaTeX 等格式。

image-20220123163646232

(2)偏好设置
  • 文件->偏好设置

通用->自动检查更新

image-20220123163853617

图片可以设定图片插入时的行为,如果时上传的话,可以设定上传服务,本地的文件可以存在assets文件夹下

image-20220123194305898

Markdown可以配置扩展语法,智能标点,代码块等

image-20220123195615495

(3)打字机模式/专注模式

你可以在视图 - 专注模式 / 打字机模式 中勾选使用这两个模式。

  • 打字机模式:使得你所编辑的那一行永远处于屏幕正中。
  • 专注模式:使你正在编辑的那一行保留颜色,而其他行的字体呈灰色。
(4)实时预览
  • 所见即所得,输入markdown标签立即渲染效果。
(5)图片插入
  • Typora 的图片插入功能是广受好评的。Markdown 原生不太注重图片插入的功能,但你可以在 Typora 中直接使用 Ctrl + C Ctrl + V 将网络图片、剪贴板图片复制到文档中,或者直接拖动本地图片到文档中。Typora 会自动帮你插入符合 Markdown 语法的图片语句,并给它加上标题。你也完全可以使用图床来保证文档在分享后图片仍能正常显示。

  • 更强大的是,Typora 支持在拖动或 Ctrl + V 网络图片后自动将其保存到本地。你可以在 文件 - 偏好设置 - 编辑器 - 图片插入 中选择复制到哪个路径,什么情况下需要复制。这一功能保证了即使网络图片源失效了,你还有本地的备份可用。同时也能使你的文档文件夹更合理、完整。

(6)大纲显示
  • Typora 会根据你 Markdown 标记的 H1、H2、H3…… 各级标题为你呈现一个大纲。

image-20220123203824135

(7)本质是浏览器
  • Typora 是一个伪装成文本编辑器的浏览器。当你按下 Shift + F12 快捷键或者右键检查元素时,页面会弹出一个基于 Chrome 的开发者工具栏。

  • Typora 利用解析器先将我们写的 Markdown 文档解析成为 HTML 文档,再为它嵌入一个 CSS 样式,最后再加上可能需要的脚本等。

  • 由于其本身「浏览器」的属性,你可以直接在实时预览界面用 Ctrl +C 复制到 HTML 代码。一个实用的用处是将这些 HTML 代码直接 Ctrl + V 黏贴到微信公众号后台,基本可以保证两边显示效果相同。这一点不仅使公众号推送可以有更自由、美观的样式,也让编辑、排版更轻松了。

image-20220123204532049

3、Typora快捷键

标题(Ctrl+1(2,3,4,5,6))
字体(Ctrl+I斜体,Ctrl+B粗体)
删除线(Alt+Shift+5)
下划线(Ctrl+U)
代码高亮(Ctrl+Shift+`)
代码段(Ctrl+Shift+K)
链接(Ctrl+K)
图片(Ctrl+C,Ctrl+V直接复制粘贴)
插入图片(Ctrl+Shift+I)
表格(Ctrl+T)
显示隐藏侧边栏(Ctrl+Shift+L)
显示大纲(Ctrl+Shift+1)
显示文档(Ctrl+Shift+2)
文档搜索(Ctrl+Shift+F)
内容搜索(Ctrl+F)
源代码模式(Ctrl+/)

4、Typora扩展markdown语法

高亮

用两个等号包起来就能实现高亮

代码:

==高亮效果==

效果:

高亮效果


上下标

~包起来实现下标,^包起来实现上标

代码:

H~2~O
X^2^

效果:

H2O
X2

5、Typora主题

  • Typora其实就是伪装成文本编辑器的浏览器,Typora主题本质就是一套样式文件。你可以在 文件 - 偏好设置 - 主题 - 打开主题文件夹 看到这些 CSS 文件。安装的时候默认内置了几套主题,喜欢什么样式的自由选择。

image-20220123205803380

  • 官网提供很多其他的样式下载,将下载的文件放到主题目录下,重启程序就可以选择新的主题了。

image-20220123210058104

20200814220028581

20200814220626399

20200814220823332

  • 除此以外,如果你有一定的 Web 编程基础,你当然也可以自己修改适合你使用需求的 CSS 文件。按下 Shift + F12 快捷键,找到你要修改的样式修改样式。这边有自定义的Vue样式可以拿去直接用百度网盘地址提取码:1234

image-20220123211028384

6、Typora+Gitee实现云笔记功能

  • Typora本身没有云同步功能,不同电脑之间想要共享比较麻烦,借助版本管理工具可以实现机器之间的文件同步。
  • Typora写的md文档是文本文件,非常适合使用版本管理工具来进行管理备份追踪每次修改的内容。

三、Typora+PicGo实现高效图床

为什么要用图床存储图片?

  • 自己写的md文档插入的图片只能在本地看,需要发给他人需要连带图片一起发给别人。如果上传CSDN,图片需要额外上传,一篇文章图片很多的时候就会非常麻烦。

  • 有了图床(一般是指储存图片的服务器)之后,图片存在远程服务器上,本地文档只存储图片的图床网络连接,分享的时候或者上传CSDN都不需要额外再处理图片。

  • Typora+PicGo+Gitee三者的结合,可以让上传图片到图床向贴图到本地md文档一样简单方便,提高效率,不需要额外去上传图片再将图片链接在贴到md文档中。

1、下载安装PicGo

  • PicGo下载地址直接下载windows版本即可,如果github很难打开的话,可以直接百度网盘下载提取码:1234。安装就是下一步下一步直到结束。

image-20220123123134861

2、Typora中配置PicGo

  • Typora打开文件->偏好进入配置页面,设置成插入图片时上传图片,上传的服务器就把PicGo的安装路径填进去。

image-20220122214704201

3、阿里云图床配置

(1)创建对象存储

创建一个新的OSS Bucket

image-20230602111638841

设置读写权限公共读(图片地址才能访问),创建完成后即可查看列表看到

image-20230602112257623

(2)获取秘钥

创建好用户,在列表里就能看到

image-20230602112554498

image-20230602112649803

添加权限,选择OSS权限

image-20230602112819818

image-20230602132523116

获取到秘钥

image-20230602133235971

image-20230602133259505

(3)PicGo配置阿里云

PicGo设置

  • 配置文件名使用时间戳,防止上传的文件名称重复导致上传失败

image-20220122210229071

图床设置->阿里云

  • KeyId和KeySecret是前面配置的AccessKey,可以有上传的权限
  • 存储空间名称就是OSS的名称
  • 存储区域就是OSS的服务器地址,OSS详情里面有

image-20230602133342836

4、七牛云图床配置

(1)创建对象存储

创建对象存储

image-20220523103358204

创建空间,设置名称,存储区域就近,访问控制公开

image-20220523103552013

创建完成就可以上传文件,域名就是文件访问域名

  • 外链域名:需要域名备案,需要有一台服务器,然后再配置CNAME解析

image-20220523103842586

(2)获取秘钥

image-20220523103929225

image-20220523110759846

(3)PicGo配置七牛云

PicGo设置

  • 配置文件名使用时间戳,防止上传的文件名称重复导致上传失败

image-20220122210229071

图床设置->七牛云

  • 其中AccessKey 和 SecretKey就是个人中心的秘钥信息
  • 存储空间名为你刚设置的名字
  • 访问网址为 文件管理中的外链域名(加上http://)
  • 存储区域可选(华东:z0, 华北:z1, 华南:z2,北美:na0, 东南亚:as0)
  • 网址后缀可不选
  • 存储路径自己填

image-20220523112131399

5、验证功能

  • 在Typora 中插入一张图片,然后去图床中查看是否有新的文件成功上传,本地图片连接能正常显示。
  • 设置多个图床的时候,上传默认图床。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

工具--Typora详解 的相关文章

随机推荐

  • BUCK BOOST学习总结

    首先对于我这种电源方面的小白来说 关于电源用的最多的就是线性稳压了 开关类的如 TI 的TPS系列 我是只知道应用电路而不知道具体原理的 但是长此以往也不是个办法 于是今天就带打家详细的来讲一下 BUCK BOOST电路的原理 先挂几个连接
  • JavaScript中的实例对象与函数对象、回调函数、JavaScript的error处理

    区别实例对象与函数对象 实例对象 new 函数产生的对象 称为实例对象 简称为对象函数 函数对象 将函数作为对象使用时 简称为函数对象 function Fn Fn函数 const fn new Fn Fn是构造函数 fn是实例对象 简称为
  • Windows10下TELEDYNE DALSA相机连接电脑以及网卡配置教程

    文章目录 一 相机IP地址设置 二 网卡端口设置 一 相机IP地址设置 右键相机 选择Scan Network 选择SHOW Status Dialog Box 出现发现的设备 设备显示为红色说明连接有问题 这里有两种解决办法 一种是以下文
  • QT button样式-边界宽度颜色设置

    1 QT QSS设置按钮边界样式 QT设置按钮边界样式 本学习添加三个按钮来做研究 QVBoxLayout vbox new QVBoxLayout QWidget w new QWidget this this gt setCentral
  • 安卓ShapeDrawable基本属性

    shape android shape rectangle oval line ring 可以设置为矩形 椭圆形 线性和环形 corners corners 用来定义圆角 有以下可用属性 android radius android top
  • 迷人的MCU单片机

    迷人的MCU单片机 MCU Microcontroller Unit 微控制单元 又称单片微型计算机 Single Chip Microcomputer 简称单片机 是把中央处理器 Central Process Unit CPU 的频率与
  • 智能驾驶数据集 合集

    智能驾驶数据集 集合 智能驾驶图像数据 No 1 103 300张驾驶员行为标注数据 驾驶员行为标注数据 总数据量103 300张 车内摄像头拍摄 且采集多年龄段 多时段 多种驾驶行为 关键点标注准确率不低于95 手势矩形框 人脸属性信息标
  • C++左值和右值

    这里有个误区 左值不是 left value 而是 location value 可寻址的值 右值不是 right value 而是 read value 只可读的值 所以 变量地址可读可写的是左值 只可读的是右值
  • 我的 Python.color() (Python 色彩打印控制)

    我的CSDN主页 My Python 学习个人备忘录 我的HOT博 自学并不是什么神秘的东西 一个人一辈子自学的时间总是比在学校学习的时间长 没有老师的时候总是比有老师的时候多 华罗庚 我的 Python color Python 色彩打印
  • 如何快速构造两个hashCode相同的字符串

    这要从hashCode的源码说起 String类hashCode的代码如下所示 public int hashCode int h hash if h 0 value length gt 0 char val value for int i
  • 【建议收藏】自动化测试框架开发教程

    在自动化测试项目中 为了实现更多功能 我们需要引入不同的库 框架 首先 你需要将常用的这些库 框架都装上 pip install requests pip install selenium pip install appium pip in
  • java 实现复制文件到指定目录

    将resource下的目录及文件 复制一份到指定目录 代码实现 import cn hutool core io FileUtil import org springframework core io Resource import org
  • adb shell 出现 insufficient permissions for device 参考网址:http://hi.baidu.com/iceliushuai/blog/item/1e50

    adb shell 出现 insufficient permissions for device 参考网址 http hi baidu com iceliushuai blog item 1e506160c5d01f48eaf8f801 h
  • 归纳演绎出的世界观

    题目略有写宽泛 刚读完 世界观 第一部分的内容 信息量有点大 迫切需要写篇读书笔记理清思路 归纳 和 演绎 方法 什么是归纳 Inductive 和演绎 Deductive 很多对于归纳 演绎的观点都是错误的 错误的以为两者是对立的 要么是
  • Spring MVC Controller配置方式

    Spring MVC 入门示例http cuisuqiang iteye com blog 2042931中 配置Controller时使用的是URL对应Bean的方式在SpringMVC中 对于Controller的配置方式有很多种 如下
  • Python—re正则表达式

    1 首先需导入模块import re 2 在一串字符中 findall方法可以获取全部能够匹配的片段 并把结果放在一个列表中 书写方式 re findall 正则表达式 规定匹配规则 被匹配的对象 3 使用findall方法匹配普通字符 4
  • 求k个数组包含每个数组至少一个元素的最小范围(待字闺中,备忘)

    有k个有序的数组 请找到一个最小的数字范围 使得这k个有序数组中 每个数组都至少有一个数字在该范围中 例如 1 4 10 15 24 26 2 0 9 12 20 3 5 18 22 30 所得最小范围为 20 24 其中 20在2中 22
  • 主流微服务全链路监控系统之战

    问题背景 随着微服务架构的流行 服务按照不同的维度进行拆分 一次请求往往需要涉及到多个服务 互联网应用构建在不同的软件模块集上 这些软件模块 有可能是由不同的团队开发 可能使用不同的编程语言来实现 有可能布在了几千台服务器 横跨多个不同的数
  • 抖店评价有礼怎么设置

    随着电商行业的不断发展和竞争的加剧 如何吸引消费者 提高店铺的口碑成为了每个卖家关注的焦点 其中 抖音电商平台的礼貌评价功能受到广大卖家的青睐 那么 如何设置抖店评论才能有礼貌呢 我们一起来讨论一下吧 如何设置抖店评价礼貌度 首先 开启礼貌
  • 工具--Typora详解

    工具 Typora详解 零 文章目录 一 MarkDown 1 MarkDown是什么 Markdown 是一种轻量级标记语言 它允许人们使用易读易写的纯文本格式编写文档 Markdown 语言在 2004 由约翰 格鲁伯 英语 John