1.What is Typora? 1.1 What is Typora? 1.2 What is Markdown? 1.3 What is HTML? 1.4 What is CSS? 1.5 Interrelationship 2. Why use Typora? 2.1 WYSIWYG 2.2 Strong website compatibility 2.3 Beautiful appearance 2.4 Customization 2.5 Free 3. How to use Typora? 3.1 Typora interface introduction 3.2 Common shortcut keys/syntax 3.3 Advanced skills 3.3.1 Modify Typora theme a. What is Typora theme? b. What is a CSS file? c. Open CSS file d. Modify CSS code font Root directory code block title table reference e. Save modification f. Color extractor g. Get more themes h. Developer tools modify style 3.3.2 Support HTML elements 3.3.3 Special Character 3.3.4 Escape 3.3.5 Advanced Linking 3.3.6 Advanced Insert Image 3.3.7 Format Conversion (Pandoc)
1.What is Typora?
1.1 What is Typora?
Typora is a Markdown editor.
1.2 What is Markdown?
Markdown is a lightweight markup language founded by John Gruber. It allows people to write documents in plain text format that is easy to read and write, and then convert them into valid XHTML (or HTML) documents. Due to the lightweight, easy-to-read, and easy-to-write features of Markdown, as well as support for pictures, charts, and mathematical expressions, many websites currently use Markdown to write help documents or post messages on forums.
The so-called: yin and yang. There is light and heavy, and there is a lightweight markup language, and there is a "heavyweight" markup language. Word is a well-known "heavyweight" markup language editor, the proper noun is a rich text editor. Before the Markdown editor was invented, everyone was using rich text editors. Typora is a Markdown editor and Word is a rich text editor. What is the difference between the two? We used a rich text editor before, and it was very easy to use. Why do we need Markdown? This is a problem that everyone who learns Markdown will encounter. Now take Typora and Word as examples, and talk about the difference between Markdown editor and rich text editor:
Markdown editor (Typora) and rich text editor (Word)
Function: Typora ≈ < Word
Since we are familiar with Word, we don't know much about Typora, and we have mastered the quantity, so we feel that Word has powerful functions.
Difficulty of use: Typora>Word
Word can generally be used by clicking, right-clicking, etc., while Typora requires an additional set of markup languages, and Typora is more difficult to use than Word.
Use input degree: Typora>Word
When using Word, you need to click the toolbar frequently, which will affect the input of writing; while using Typora, you can basically realize writing and typesetting through text input.
Compatibility: Typora>Word
For those of you who write on the Internet, this is very important.
Word documents are often garbled when opened with other software, and Markdown itself is written in text. It is a complete set of markup languages. It is easy to communicate between websites that support Markdown and has strong compatibility. Even if it is opened with a non-Markdown editor, There will be no obvious garbled characters.
Intuitive: Typora>Word
In terms of intuitiveness, Typora is already the leader in the Markdown editor, of course, compared with Word, the intuitiveness will still be slightly inferior.
Summarize:
Markdown editors such as Typora are suitable for Internet writing, while rich text editors such as Word are suitable for non-Internet scenarios such as work;
The Markdown editor is suitable for people with certain Internet technology, and the rich text editor is more suitable for the general public;
Precisely because of a certain threshold, in terms of the number of users, the number of users of the rich text editor is more, but the number of users is not necessarily good. For example, more people use Android mobile phones than Apple IOS mobile phones. , but it does not mean that Android phone is better. There is no difference between the two, but they are good at different fields and adapt to different groups of people. But one thing that needs to be explained is that for those who have mastered Typora, they will definitely like Typora; just like those who have used an iPhone, it is difficult to return to using an Android phone.
1.3 What is HTML?
HTML (English full name is Hyper Text Markup Language, Chinese full name is Hyper Text Markup Language) is a markup language. The so-called hypertext, as the name implies, can contain non-text elements such as graphics, animations, sounds, links, etc. in addition to text.
In essence, HTML is no different from the language we communicate with every day. The difference is that natural language is the language of communication between people, while HTML is the language of communication between people and browsers. That is to say, to tell the browser through HTML commands, where on the web page, what controls are placed, what controls look like, and what specific functions they have, you need CSS and Javascript to implement them respectively.
1.4 What is CSS?
CSS (English full name: Cascading Style Sheets, Chinese full name: Cascading Style Sheets) is a computer language used to express the style of documents such as HTML or XML. CSS can perform pixel-level precise control over the layout of element positions in web pages, supports almost all font size styles, and has the ability to edit web page objects and model styles.
JavaScript (abbreviation: JS) is an advanced scripting language of literal translation. It is often used to add various complex dynamic functions to web pages, providing users with a smoother and more beautiful browsing effect. Usually JavaScript scripts are embedded in HTML to achieve their own functions.
1.5 Interrelationships
Briefly sort out the relationship between the above:
Typora is a Markdown editor.
Markdown and HTML are both markup languages. The difference is that Markdown is a text language. In addition to text, HTML can also contain non-text elements such as graphics, animations, sounds, and links.
Markdown is suitable for Internet writing, but HTML cannot be directly used for writing. Markdown can be converted into HTML through CSS. The styles displayed by the various Markdown editors we have seen are converted to HTML and displayed with CSS.
HTML plus CSS and Javascript render the web page we finally see.
2. Why use Typora?
2.1 What you see is what you get
Regarding this, there is no harm without comparison. Let’s take a look at the two pictures below: the first is Evernote, and the second is Typora. This point is the main reason that singles Typora out of other Markdown editors.
2.2 Strong website compatibility
This is the main thing that sets Typora apart from other rich text editors like Word.
Because of the above two points, Typora is called the first choice for Internet writing.
2.3 Beautiful
From the official website to the software operation interface, it is very beautiful. The first time I landed on the Typora official website homepage, I was deeply attracted by the animation on the homepage. I have also used Markdown in Evernote before, but because of the dark interface full of codes and the need to learn a set of markup languages, it really makes people "without starting, it will end."
2.4 Customized
I personally like this very much. You can see that the theme I am using now is "privately customized" according to my own preferences.
2.5 Free
Ha ha! In fact, I will buy this software if it is charged, not to mention whether it is a company or an individual, it can be used for free.
3. How to use Typora?
3.1 Introduction to Typora interface
3.2 Common shortcut keys/syntax
| Features | Shortcuts/Syntax | Effect |
|---|---|---|
| bold | Ctrl+B or **加粗**or__加粗__ |
bold |
| italic | Ctrl+I or *斜体*or_斜体_ |
italic |
| bold and italic | ***加粗且斜体***or___加粗且斜体___ |
bold and italic |
| underscore | Ctrl+U or下划线 |
underscore |
| strikethrough | Alt+ Shift+5 or~~删除线~~ |
strikethrough |
| horizontal dividing line | ***or - - -or_ _ _ |
— |
| highlight | ==高亮== |
highlight |
| subscript | ~下标~ |
subscript 2 |
| superscript | ^上标^ |
superscript 2 |
| Notes | [^注释1] |
Note Note 1 |
| code | Ctrl+ Shift+` or `` | 代码 |
| select a row | Ctrl+L | / |
| pick a word | Ctrl+D | / |
| Select text with the same format | Ctrl+E | / |
| build directory | [TOC] |
/ |
| first-level title | Ctrl+1 or #+space+text | / |
| secondary title | Ctrl+2 or ##+space+text | / |
| tertiary heading | Ctrl+3 or ###+space+text | / |
| Level 4 heading | Ctrl+4 or ####+space+text | / |
| Level 5 heading | Ctrl+5 or #####+space+text | / |
| Level 6 heading | Ctrl+6 or ######+space+text | / |
| Back to top | Ctrl+Home | / |
| back to bottom | Ctrl+End | / |
| Create a table | Ctrl+T | / |
| Create hyperlinks | Ctrl+K or[链接名称](链接地址) |
Baidu |
| search and replace | Ctrl+H | / |
| Insert picture | Ctrl+ Shift+I or copy paste or drag directly or |
/ |
| expression | :happy:or :smiley:or:cry: |
? ? ? |
| indent right | Tab | / |
| indent left | Shift+Tab | / |
| introduction | Ctrl+ Shift+Q or >+space | / |
| ordered list | Ctrl+ Shift+[ or *+space | / |
| unordered list | Ctrl+ Shift+] or *+space | / |
Remarks: emoji link address: https://bj.96weixin.com/tools/emoji
3.3 Advanced Techniques
3.3.1 Modify Typora theme
a. What is a Typora theme?
The Typora theme is located in the theme toolbar in the upper left corner of the Typora operation interface. You can see the Typora theme in the drop-down box. Selecting the corresponding theme will give the basic text different styles.
b. What is a CSS file?
Baidu Encyclopedia: Cascading Style Sheets (English abbreviation: CSS, full name: Cascad ing Style Sheets) is a file style used to express HTML (an application of the standard general markup language) or XML (a subset of the standard general markup language). computer language. CSS can not only modify web pages statically, but also dynamically format various elements of web pages with various scripting languages.
For example, basic text is like a sketch, CSS is like a coloring, the whole painting is a black and white sketch before coloring, and a colorful color painting after coloring.
c. Open the CSS file
Since a Typora theme is essentially a CSS file, modifying a Typora theme means modifying the CSS file.
打开CSS文件的步骤是：文件 > 偏好设置 > 外观 > 打开主题文件夹
在点击打开主题文件夹后会看到一个名字为“themes”的文件夹后，在此文件夹下可以看到6个主题文件夹和相应的文件后缀名为.css的文件，分别是 github，media，newsprint，night，old-themes，pixyll。
后缀名为.css的文件就是CSS文件。选中某一个CSS文件，点击打开即可直接编辑。
CSS文件可以直接通过软件记事本打开，也可以通过CSS编辑器打开，我使用的CSS编辑器是Visual Studio Code。
d.修改CSS代码
将Typora、Visual Studio Code同时打开，各占一半显示器屏幕，在VSCode调整好文件后保存，在Typora界面即可查看效果。(对于部分调整无法即时看到效果，重启Typora即可。)现以Github主题为例来说明如何修改CSS文件。
字体
font-family：字体类型，用于某个元素的字体族名称或/及类族名称的一个优先表。
如font-family: Arial,Helvetica,sans-serif，这三种都是字体。如果系统有Arial这种字体，就显示Arial这种字体。如果系统没有Arial这种字体，就以Helvetica这种字体显示。以此类推。如果都没有。就以系统默认字体显示。
font-style：字体样式
normal, italic, oblique：正常，斜体字，倾斜的文字
font-size：字体大小
large, medium, small
font-weight：字体粗细
normal, bold, bolder, lighter, 900
scr：字体文件来源
Root
root里定义的是界面颜色、文字颜色等
text-color：文字颜色
bg-color：背景颜色
code-block-bg-color：代码块颜色
side-bar-bg-color：文件夹、大纲处的颜色
window-border：窗口边界颜色
:root { --side-bar-bg-color: #fafafa; --control-text-color: rgb(119, 119, 119);}
目录
.md-toc { margin-top:20px; padding-bottom:20px;}a { color: #008000;}
输出结果：
1.Typora是什么？1.1 Typora是什么？1.2 Markdown是什么？1.3 HTML是什么？1.4 CSS是什么？1.5 相互关系2. 为什么要使用Typora?2.1 所见即所得2.2 网站兼容性强2.3 美观2.4 私人订制2.5 免费3. 怎么使用Typora？3.1 Typora界面介绍3.2 常用快捷键/语法3.3 高级技巧3.3.1 修改Typora主题a.什么是Typora主题？b.什么是CSS文件？c.打开CSS文件d.修改CSS代码字体Root目录代码块标题表格引用e.保存修改f.颜色提取器g.取更多主题h.开发者工具修改样式3.3.2 支持HTML元素3.3.3 特殊字符3.3.4 转义3.3.5 高级链接3.3.6 高级插入图片3.3.7 格式转换(Pandoc)
代码块
/*代码块左边数字列*/.CodeMirror-lines { padding-left: 4px;}/*代码工具栏：输入代码语言类型*/.code-tooltip { box-shadow: 0 1px 1px 0 rgba(0,28,36,.3); border-top: 1px solid #eef2f2;}.md-fences,code,tt { border: 1px solid #e7eaed; background-color: #f8f8f8; border-radius: 3px; padding: 0; padding: 2px 4px 0px 4px; font-size: 0.9em;}/*代码*/code { background-color: #f3f4f4; padding: 0 2px 0 2px;}/*代码块*/.md-fences { margin-bottom: 15px; margin-top: 15px; padding-top: 8px; padding-bottom: 6px;}.md-task-list-item > input { margin-left: -1.3em;}
标题
/*标题的位置、边距等设置*/h1,h2,h3,h4,h5,h6 { position: relative; margin-top: 1rem; margin-bottom: 1rem; font-weight: bold; line-height: 1.4; cursor: text;}h1:hover a.anchor,h2:hover a.anchor,h3:hover a.anchor,h4:hover a.anchor,h5:hover a.anchor,h6:hover a.anchor { text-decoration: none;}h1 tt,h1 code { font-size: inherit;}h2 tt,h2 code { font-size: inherit;}h3 tt,h3 code { font-size: inherit;}h4 tt,h4 code { font-size: inherit;}h5 tt,h5 code { font-size: inherit;}h6 tt,h6 code { font-size: inherit;}/*标题的字体等设置*/h1 { padding-bottom: .3em; font-size: 2.25em; line-height: 1.2; border-bottom: 1px solid #eee;}h2 { padding-top: .2em; padding-bottom: .2em; font-size: 1.75em; line-height: 1.225; border-bottom: 1px solid #eee;}h3 { font-size: 1.5em; line-height: 1.43;}h4 { font-size: 1.25em;}h5 { font-size: 1em;}h6 { font-size: 1em; color: #777;}
表格
table { padding: 0; word-break: initial;}table tr { border-top: 1px solid #dfe2e5; margin: 0; padding: 0;}table tr:nth-child(2n) { background-color: #f8f8f8;}/*表头背景颜色、字体颜色*/thead { background-color: #008000; color: #ffffff}table tr th { font-weight: bold; border: 1px solid #dfe2e5; border-bottom: 0; text-align: left; margin: 0; padding: 6px 13px;}table tr td { border: 1px solid #dfe2e5; text-align: left; margin: 0; padding: 6px 13px;}table tr th:first-child,table tr td:first-child { margin-top: 0;}table tr th:last-child,table tr td:last-child { margin-bottom: 0;}
引用
/*左边竖线颜色、引言字体等设置*/blockquote { border-left: 4px solid #008000; padding: 0 15px; color: #777777; font-weight: bold;}blockquote blockquote { padding-right: 0;
e.保存修改
.css的文件命名时，避免出现大写字母和空格键，空格键为转化为“-”，中文名字也是支持的，不过建议还是用英文，完成.css文件代码后，复制到themes文件夹中，即可在主题栏下来列表中查看、选择。
f.颜色提取器
修改主题的过程中，最常用到的就是颜色了，以下两个网站供参考：
Encycolorpedia
HTML Color Codes
g.取更多主题
通过以下路径：文件 > 偏好设置 > 外观 > 获取主题，获取更多的主题。
下载主题后解压，将后缀为.css的文件复制theme文件夹里，即可在主题栏下来列表中查看、选择。
h.开发者工具修改样式
还有一个途径修改样式，打开开发者工具，按下图所示步骤修改。
3.3.2 支持HTML元素
不在Markdown 涵盖范围之内的标签，都可以直接在文档中用HTML 撰写。
目前支持的HTML元素有：<kbd>(键盘文本)、 <b>(加粗)、<i>(斜体)、<em>(斜体)、<sub>(下标)、<sup>(上标)、<br>(换行)、<center>(居中)等。
<kbd>应用实例：
代码：
使用<kbd>Ctrlkbd>+<kbd>Shiftkbd>+<kbd>Deletekbd>可以打开任务管理器。输出结果：
使用Ctrl+Shift+Delete可以打开任务管理器。
综合应用实例：
代码：
<center><span style="color:white;background:green;font-size:2em;font-family:Arial,Helvetica, sans-serif;padding-left:0.5em;padding-right:0.5em;padding-top:0.5em;padding-bottom:0.5em;line-height:2em;"><b><i>一个神奇的公式  <br>E=mc<sup>2sup>i>b>span>center>输出结果：
一个神奇的公式
E=mc2
3.3.3 特殊字符
| 结果 | 代码 | 描述 |
|---|---|---|
| " | " |
引号 |
| ' | ' |
撇号 |
| & | & |
和号 |
|
空格 | |
| © | © |
版权 |
| ® | ® |
注册商标 |
| ™ | ™ |
商标(注册中) |
| ± | ± |
正负号 |
| ÷ | ÷ |
除 |
| × | × |
乘 |
| ° | ° |
度 |
| ¹ | ¹ |
上标¹ |
| ² | ² |
上标² |
| ³ | ³ |
上标³ |
| ´ | ´ |
半角引号 |
| < | > |
小于 |
| > | < |
大于 |
| ≠ | ≠ |
不等于 |
| ≤ | ≤ |
小于等于 |
| ≥ | ≥ |
大于等于 |
| ¥ | ¥ |
元 |
| £ | £ |
英镑 |
| € | € |
欧元 |
| ¢ | ¢ |
分 |
| ½ | ½ |
二分之一 |
| ¼ | ¼ |
四分之一 |
| ¾ | ¾ |
四分之三 |
| § | § |
章节符号 |
| ¦ | ¦ |
断竖线 |
| ¶ | ¶ |
段落符号 |
| x² | $x^2$ |
x的平方(数学公式) |
3.3.4 转义
Typora属于Markdown编辑器的一种。Markdown 使用了很多特殊符号来表示特定的意义，如果需要显示特定的符号则需要使用转义字符，Markdwon 使用反斜杠转义特殊字符，即\+符号。
代码：
**文本加粗**
\*\* 正常显示星号 \*\*输出结果：
文本加粗
**正常显示星号**
Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号：
\\ 反斜线 \` 反引号 \* 星号 \_ 底线 \{ \} 花括号 \[ \] 方括号 \( \) 括号 \# 井字号 \+ 加号 \- 减号 \. 英文句号 \! 感叹号
3.3.5 高级链接
百度
[1] www.baidu.com 百度
3.3.6 高级插入图片
图片的替代问题
[1] www.baidu.com 图片地址
3.3.7 Format Conversion (Pandoc)
Typora supports exporting PDF and HTML formats by default. If you need to export Word, EPUB and other formats, you need to install Pandoc software.
Click to download: Pandoc