记笔记从学Typora开始-----（4）markdown基本实践二

记笔记从学Typora开始-----（4）markdown基本实践二

上节我们根据官方给的Markdown Reference，将前半段翻译成中文，方便同学阅读和学习Typora的基本使用。这一节，咱们翻译剩余的后半段！

1、打开Markdown Reference

2、学习元素目录截图

这是官方提供的下半段目录截图哦！关于上半段的讲解，请童鞋到专栏上一节观看哦！

3、正式开始翻译

• Span元素
  • 链接
    • 内链接
    • 引用链接
  • URL
  • 图片
  • 强调
  • 加粗
  • 代码
  • 删除线
  • 下划线
  • Emoji
  • 内联数学公式
  • 下标
  • 上标
  • 高亮
• HTML
  • 内嵌内容
  • 视频
  • 其他HTML支持

Span元素

Span元素将在输入后立即解析和呈现。将光标移动到这些span元素的中间将会将这些元素展开为markdown源。下面是对每个span元素的语法解释。

（1）链接

Markdown支持两种样式的链接：内联和引用

在这两种样式中，链接文本都用[方括号]分隔。

要创建内联链接，请在链接文本的右方括号后立即使用一组圆括号。在圆括号内，将您希望链接指向的URL以及链接的可选标题(用引号括起来)放在一起。例如:

This is [an example](http://example.com/ "Title") inline link.

[This link](http://example.net/) has no title attribute.

将会生成：

This is an example inline link.

This link has no title attribute.

内联链接

您可以将href设置为标题，这将创建一个书签，允许您在单击后跳转到该部分。例如

命令(在Windows上:Ctrl) +点击[此链接](# 1、打开Markdown Reference)将跳转到标题“1、打开Markdown Reference”。要查看如何编写，请移动光标或单击该链接，并按下“⌘”键以将元素展开为标记源。

引用链接

引用链接使用第二组方括号，在方括号内放置您选择的标签来标识链接。

This is [an example][id] reference-style link.

Then, anywhere in the document, you define your link label on a line by itself like this:

[id]: http://example.com/  "Optional Title Here"

在Typora中，它们将被渲染如下:

这是一个示例引用样式的链接。

This is an example reference-style link.

Then, anywhere in the document, you define your link label on a line by itself like this:

隐式链接名称快捷方式允许您省略链接的名称，在这种情况下，链接文本本身被用作名称。只需使用一组空方括号——例如，要将单词“Google”链接到google.com网站，您可以简单地这样写：

[Google][]
And then define the link:

[Google]: http://google.com/

在Typora中，单击链接将展开它进行编辑，命令(Window上Ctrl)+单击将在web浏览器中打开超链接。

（2）URL

Typora允许您插入url作为链接，用’ < ‘括号’ > '包装。

<i@typora.io> becomes i@typora.io.

Typora也会自动链接标准url。例如:www.google.com。

（3）图片

图片的语法与链接相似，但它们需要额外的!字符在链接开始之前。插入图像的语法如下所示：

![Alt text](/path/to/img.jpg)

![Alt text](/path/to/img.jpg "Optional title")

您可以使用拖放从图像文件或您的web浏览器插入图像。您可以通过单击图像来修改Markdown源代码。如果使用拖放添加的图像与当前正在编辑的文档在同一目录或子目录中，则将使用相对路径。

如果你正在使用markdown来构建网站，你可以在YAML Front Matters中为本地计算机上的图像预览指定一个URL前缀，属性为typora-root-url。例如，输入typora-root-url:/User/Abner/Website/typora。在YAML Front Matters中，![alt](/blog/img/test.png) 在Typora中将被视为 !(alt)(file:///User/Abner/Website/typora.io/blog/img/test.png)

你可以找到更多细节在这儿。

（4）强调

Markdown将星号(*)和下划线(_)作为强调的指示符。以*或_换行的文本将被HTML <em>标签包裹。例句：

*single asterisks*

_single underscores_

输出：

single asterisks

single underscores

GFM将忽略单词中的下划线，这通常用于代码和名称中，如下所示:

wow_great_stuff

do_this_and_do_that_and_another_thing.

若要在原本用作强调分隔符的位置生成文字星号或下划线，可以将其反斜杠转义。

\*this text is surrounded by literal asterisks\*

Typora建议使用*符号

（5）加粗

双*或_将导致其包含的内容被HTML <strong>标签包装，例如:

**double asterisks**

__double underscores__

输出：

double asterisks

double underscores

Typora建议使用**符号。

（6）代码

要指示代码的内联范围，请用反引号（`）将其括起来。与预格式化的代码块不同，代码段表示普通段落中的代码。例如：

Use the `printf()` function.

将产生：

Use the printf() function.

（7）删除线

GFM添加了创建删除线文本的语法，这是标准Markdown所缺少的。

~~Mistaken text.~~变成 Mistaken text.

（8）下划线

下划线由原始HTML提供支持。

<u>Underline</u> becomes Underline.

（9）Emoji 😄

用语法​:smile: 输入表情符号

用户可以通过按Win + .键来触发自动完成表情符号的建议，或者在偏好面板上启用后自动触发。此外，直接输入UTF-8表情符号字符也可以通过点击“编辑”->“表情符号”在菜单栏(macOS)。

如下图：

（10）内联数学公式

要使用此功能，请先在偏好设置面板->Markdown选项卡中启用。然后，使用 $ ‘来包装一个LaTeX命令。例如:’ ${\lim }_{x\to \infty }\exp (-x)=0$ '将被呈现为LaTeX命令。

要触发内联数学的内联预览:输入$，然后按ESC键，然后输入一个LaTeX命令。

你可以从这儿找到更多细节。

（11）下标

要使用此功能，请先在偏好设置面板->Markdown选项卡中启用它。然后，使用~来包装下标内容。

例如：H~2~O, X~long\ text~

H₂O，X_{long text}

（12）上标

要使用此功能，请先在偏好设置面板->Markdown选项卡中启用它。然后，使用^来包装上标内容。

例如：X^2^

X²

（13）高亮

要使用此功能，请先在偏好设置面板->Markdown选项卡中启用它。然后，使用==来包装上标内容。

例如：==hightlight==

hightlight

HTML

您可以使用HTML来样式化纯Markdown不支持的内容。例如，使用<span style="color:red">this text is red</span>来添加带有红色的文本，如： this text is red

（1）内联内容

一些网站提供基于框架的嵌入代码，你也可以将其粘贴到Typora中。例如：

<iframe height='265' scrolling='no' title='Fancy Animated SVG Menu' src='http://codepen.io/jeangontijo/embed/OxVywj/?height=265&theme-id=0&default-tab=css,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>

（2）视频

你可以使用<video> HTML标签来嵌入视频。例如:

<video src="xxx.mp4" />

（3）其他HTML支持

你可以在这里找到更多细节。

注：本节就到此啦，创作不易，喜欢小伙伴点点赞哦！

下一节，咱们讲一些更加高级的一些用法哦！大家拭目以待！我是航火火，火一般的男人！

n=‘true’ style=‘width: 100%;’>

（2）视频

你可以使用<video> HTML标签来嵌入视频。例如:

<video src="xxx.mp4" />

（3）其他HTML支持

你可以在这里找到更多细节。

注：本节就到此啦，创作不易，喜欢小伙伴点点赞哦！

下一节，咱们讲一些更加高级的一些用法哦！大家拭目以待！我是航火火，火一般的男人！