Tools--Detailed explanation of Typora

Tools – Detailed explanation of Typora

Zero, article directory

1. MarkDown

1. What is MarkDown?

• Markdown is a lightweight markup language that allows people to write documents in a plain text format that is easy to read and write.

• The Markdown language was created in 2004 by John Gruber.

• Documents written in Markdown can be exported to HTML, Word, images, PDF, Epub and other formats.

• The suffixes of documents written in Markdown are .md, .markdown.

Commonly used markdown editors, there are many types, choose your favorite product

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

2. MarkDown basic syntax

title

Use # to represent level 1-6 headings, and the first-level headings correspond to one #< /span>, and so on, the title content is the same as **#** separated by spaces. #, the second-level title corresponds to two

Code:

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

Effect:

---

font

One asterisk or underline wrapped to indicate italics, two asterisks or underline wrapped to indicate bold, three asterisks or underline is the superimposed bold + italic of the two effects.

Code:

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

Effect:

Italic text
Italic text
Bold text
Bold text
Bold italic text
Bold italic text

---

divider

You can use more than three asterisks, minus signs, and underscores in a line to create a separator line. There can be no other things in the line. You can also insert spaces between asterisks or minus signs. Each of the following writing methods can create dividing lines.

Code:

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

Effect:

---

---

---

---

---

strikethrough

If you want to add strikethrough to the text in the paragraph, you only need to add two wavy lines at both ends of the text~~

Code:

~~BAIDU.COM~~

Effect:

BAIDU.COM

---

Underline

Underlines can be added via HTML'sTags to achieve

Code:

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

Effect:

Underlined text

---

list

Unordered lists use asterisks, plus signs, or minus signs as list markers. A space must be added after these markers, and then the content must be filled in.

Code:

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

Effect:

• First item
• second section
• the third item

• First item
• second section
• the third item

• First item
• second section
• the third item

Ordered lists are represented by numbers followed by .

Code:

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

Effect:

1. First item
2. second section
3. the third item

List nesting simply adds four spaces in front of the options in the sublist

Code:

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

Effect:

1. First item:
   • The first element of the first nested item
   • The second element of the first nested item
2. second section:
   • The first element of the second nested item
   • The second element of the second nested item

---

block reference

General use

Markdown block quotations use the > symbol at the beginning of the paragraph, followed by a Spacesymbol

Code:

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

Effect:

Block Quote
What you learn is not only technology but also a dream

Nested use

One> symbol is the outermost layer, two>< The a i=4> symbol is the first level of nesting, and so on.

Code:

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

Effect:

outermost layer

First level nesting

Second level nesting

Use list in block

Code:

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

Effect:

Use list in block

1. First item
2. second section

• First item
• second section
• the third item

Use blocks in lists

If you want to put a block within the list item, you need to add a four-space indent before > a>

Code:

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

Effect:

• First item

  Block Quote
  What you learn is not only technology but also a dream

• second section

---

code highlighting

If it is a function or fragment of code in a paragraph, you can wrap it in backticks to achieve highlighting.

Code:

`printf()` 函数

Effect:

printf()function

---

code snippet

You can use ``` to wrap a piece of code and specify a language (or not specify it)

Code:

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

Effect:

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

---

Link

Square brackets enclose the link name, and parentheses enclose the link address, which are used to mark the address that needs to be distinguished between the link name and the address. Or just wrap the link address in angle brackets.

Code:

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

Effect:

link name

http:www.baidu.com

---

picture

Start with an exclamation point!, then a square bracket, put the alternative text of the image inside, then an ordinary bracket, put the URL of the image inside (it can be a URL or a relative path or an absolute path), and finally wrap it in quotation marks and add Text on the optional 'title' attribute.

Markdown has no way to specify the height and width of images. If you need it, you can use ordinary img tags.

Code:

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

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

Effect:

---

sheet

Markdown uses | to separate different cells, use - to separate the header and other rows

Code:

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

Effect:

Header	Header
Cell	Cell
Cell	Cell

We can set the alignment of the table

• -: Sets the content and title bar to right alignment.
• :- Sets the content and title bar to left alignment.
• :-: Center-aligns the content and title bar.

Code:

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

Effect:

left aligned	Align right	center alignment
Cell	Cell	Cell
Cell	Cell	Cell

---

html tag

Tags that are not covered by Markdown can be written directly in HTML in the document. Currently supported HTML elements are: <kbd> <b> <i> <em> <sup> <sub> <br>, etc.

Code:

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

Effect:

Use Ctrl+Alt+Del 中启电脑

---

escape

Markdown uses many special symbols to express specific meanings. If you need to display specific symbols, you need to use escape characters. Markdown uses backslashes to escape special characters.

Code:

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

Effect:

Bold text
** Display asterisks normally **

Table of contents

Use "#" to define the title level, and add [TOC] where you need to generate a table of contents. Markdown will automatically generate a table of contents based on the title level of the article.

2. Typora

1. What is Typora?

• Typora is a lightweight and concise Markdown editor that supports real-time rendering technology, which is the most significant difference from other Markdown editors. Instant rendering makes writing Markdown as smooth and comfortable as writing a Word document.

• Government location:https://typora.com.cn/

• The official version is now paid. If you are interested, you can support it and send the free version of Baidu Netdisk link:https://pan.baidu.com/s/1F6bRpOLGoiBqnIlBIAdv2A< /span>Extraction code: 1234.

2. Typora common functions

(1) File system

• **Quick Open:** You can quickly open recent documents through the 文件 - 快速打开... or Ctrl + P shortcut keys.
• **Save:**Typora supports automatic saving. Generally, it is rare for written documents to be lost. At the same time, it also provides functions such as "Save", "Save As", "Save all open files...".
• **Import:**Typora supports many file formats: .docx, .latex, .tex, .ltx, .rst, .rest, .org, .wiki, .dokuwiki, .textile, .opml, .epub.
• **Export:**Typora natively supports exporting to PDF, HTML and other formats. You can install the Pandoc plug-in according to the prompts in the software to export more formats such as docx, LaTeX and so on.

(2) Preferences

• File->Preferences

General -> Automatically check for updates

For pictures, you can set the behavior when the picture is inserted. If it is uploaded, you can set the upload service. The local file can be stored in the assets folder.

Markdown can be configured with extended syntax, smart punctuation, code blocks, etc.

(3) Typewriter mode/focus mode

You can check 视图 - 专注模式 / 打字机模式 to use these two modes.

• Typewriter mode: Makes the line you are editing always in the center of the screen.
• Focus Mode: Keeps the line you are editing in color, while other lines appear gray.

(4) Real-time preview

• What you see is what you get, input markdown tags to render the effect immediately.

(5) Picture insertion

• Typora's image insertion function is widely praised. Markdown natively doesn't pay much attention to the image insertion function, but you can use Ctrl + C Ctrl + V directly in Typora to copy network images and clipboard images into the document, or directly drag local images into the document. Typora will automatically help you insert image statements that conform to Markdown syntax and add titles to it. You can also use the picture bed to ensure that the images can still be displayed normally after the document is shared.

• More powerfully, Typora supports automatically saving local images after dragging or Ctrl + V network images. You can choose which path to copy to in 文件 - 偏好设置 - 编辑器 - 图片插入 and under what circumstances you need to copy. This feature ensures that even if the network image source fails, you still have a local backup available. At the same time, it can also make your document folder more reasonable and complete.

(6) Outline display

• Typora will present you an outline based on the H1, H2, H3... headings at each level of your Markdown markup.

(7) The essence is a browser

• Typora is a browser disguised as a text editor. When you press the Shift + F12 shortcut key or 右键检查元素, a Chrome-based developer toolbar will pop up on the page.

• Typora uses a parser to first parse the Markdown document we wrote into an HTML document, then embed a CSS style for it, and finally add any necessary scripts, etc.

• Due to its own "browser" properties, you can directly use Ctrl +C to copy the HTML code in the real-time preview interface. A practical use is to paste these HTML codes directly Ctrl + V into the backend of the WeChat official account, which can basically ensure the same display effect on both sides. This not only allows public account push to have a freer and more beautiful style, but also makes editing and typesetting easier.

3. Typora shortcut keys

Title(Ctrl+1(2, 3, 4, 5, 6))

Font (Ctrl+I italic, Ctrl+B bold)

Strikethrough (Alt+Shift+5)

Underline(Ctrl+U)

Code highlighting (Ctrl+Shift+`)

Code snippet (Ctrl+Shift+K)

Link(Ctrl+K)

Picture (Ctrl+C, Ctrl+V copy and paste directly)

Insert picture (Ctrl+Shift+I)

Table(Ctrl+T)

Show hidden sidebar (Ctrl+Shift+L)

Show outline (Ctrl+Shift+1)

Show document(Ctrl+Shift+2)

Document search (Ctrl+Shift+F)

Content search (Ctrl+F)

Source code mode (Ctrl+/)

4. Typora extends markdown syntax

Highlight

Highlighting can be achieved by wrapping it with two equal signs

Code:

==高亮效果==

Effect:

Highlight effect

---

superscript and subscript

~ is wrapped to achieve subscript, ^ is wrapped to achieve superscript

Code:

H~2~O
X^2^

Effect:

H₂O
X²

5. Typora theme

• Typora is actually a browser disguised as a text editor. The essence of Typora theme is a set of style files. You can see these CSS files at 文件 - 偏好设置 - 主题 - 打开主题文件夹. Several sets of themes are built-in by default during installation. You can choose whatever style you like.

• Official website provides many other styles for download. Place the downloaded file in the theme directory and restart the program to select a new theme.

• In addition, if you have a certain foundation in web programming, you can of course modify the CSS file yourself to suit your needs. Press the Shift + F12 shortcut key to find the style you want to modify and modify the style. There are customized Vue styles here that can be used directlyBaidu network disk addressExtraction code: 1234

6. Typora+Gitee implements cloud note-taking function

• Typora itself does not have a cloud synchronization function, so it is troublesome to share it between different computers. File synchronization between machines can be achieved with the help of version management tools.
• The md document written by Typora is a text file, which is very suitable for using version management tools to manage backups and track the content of each modification.

3. Typora+PicGo realizes efficient picture bed

Why use picture bed to store pictures?

• The pictures inserted into the md document written by yourself can only be viewed locally. If you need to send it to others, you need to send it together with the pictures. If you upload CSDN, pictures need to be uploaded additionally, which will be very troublesome when there are many pictures in an article.

• With the image bed (generally refers to the server that stores images), the images are stored on the remote server, and the local document only stores the image bed network connection of the image. There is no need to additionally process the image when sharing or uploading to CSDN.

• The combination of Typora+PicGo+Gitee can make uploading pictures to the picture bed as easy and convenient as pasting pictures to local md documents, improving efficiency. There is no need to upload pictures and then paste the picture links into the md document.

1. Download and install PicGo

• PicGo download addressJust download the windows version directly. If github is difficult to open, you can directlyBaidu network disk download Extraction code: 1234. Installation is the next step until the end.

2. Configure PicGo in Typora

• Typora opens File->Preferences and enters the configuration page. Set it to upload pictures when inserting pictures. The uploading server will fill in the PicGo installation path.

3. Alibaba Cloud Image Bed Configuration

(1) Create object storage

• Official website address:https://oss.console.aliyun.com/overview

Create a new OSS Bucket

Set the read and write permissions to public reading (only the image address can be accessed). After the creation is completed, you can view the list to see

(2) Obtain the secret key

Once the user is created, you can see it in the list

Add permissions and select OSS permissions

Get the secret key

(3) PicGo configures Alibaba Cloud

PicGo settings

• Configure file names to use timestamps to prevent upload failures caused by duplicate file names.

Picture bed settings->Alibaba Cloud

• KeyId and KeySecret are the AccessKey configured earlier and can have upload permissions.
• The storage space name is the name of the OSS
• The storage area is the OSS server address, which is included in the OSS details.

4. Qiniu Yuntu bed configuration

(1) Create object storage

• 官网：https://portal.qiniu.com

Create object storage

Create a space, set a name, store the area nearby, and make access control public

Once created, you can upload the file. The domain name is the file access domain name.

• External link domain name: Domain name registration is required, a server is required, and then CNAME resolution is configured

(2) Obtain the secret key

(3) PicGo configures Qiniu Cloud

PicGo settings

• Configure file names to use timestamps to prevent upload failures caused by duplicate file names.

Picture bed settings->Qiniu Cloud

• Among them, AccessKey and SecretKey are the secret key information of the personal center
• The storage space is named the name you just set.
• The access URL is the external link domain name in file management (plus http://)
• Storage area is optional (East China: z0, North China: z1, South China: z2, North America: na0, Southeast Asia: as0)
• URL suffix is ​​optional
• Fill in the storage path yourself

5. Verification function

• Insert a picture in Typora, and then go to the picture bed to check whether a new file has been successfully uploaded and the local picture connection can be displayed normally.
• When setting up multiple image beds, upload the default image bed.