DEV 编辑器初学者指南《你还不懂 JS》（丛书）- 第二版

2025-05-28

DEV 编辑器初学者指南

你还不懂 JS（丛书）- 第二版

截至 2020 年 6 月 4 日，此帖子为动态文档，并将随着 DEV UI 的变化而更新。

介绍

欢迎，这篇文章简要介绍了dev.to 编辑器以及如何充分利用它。

这篇文章的目标读者是DEV 的初学者，他们想要写一篇文章，但需要帮助来找到使用编辑器的方法。

这篇文章还在“什么是 markdown”部分对Markdown进行了介绍，并且在youtube 视频部分下嵌入的示例视频是Traversy Media提供的 markdown 速成课程。

与官方指南相比，这篇文章绝不是一份全面的指南，但它涵盖了您最常使用/需要的内容。

如果你留意的话，你会发现这篇文章中用到了一些功能，但并没有讨论。例如目录和页面导航。

让我们开始吧。

本指南可作为参考，因此需要一个目录。

目录

返回目录

编辑器版本

该编辑器有两个版本：

  • 基本 Markdown版本
  • 丰富+markdown版本

两者的目的都是相同的——发布帖子，但它们有一个主要区别：

  • 用户界面（UI）

用户界面决定了您如何使用和与编辑器交互，当然也决定了您如何发布帖子。

请看下面的图片：

Dev.to 基本 Markdown 版本
基本 Markdown 版本

Dev.to rich+markdown 版本
丰富+markdown版本

您可以从UX 部分在两个编辑器之间切换。

在 dev.to 中切换编辑器

这两个编辑器都允许您用Markdown撰写帖子，但是rich + markdown有一些GUI组件。

读完最后一段，你可能会想到一个问题：Markdown 是什么？我们来聊聊这个。

[返回目录]

什么是 Markdown

来自Markdown 规范：

Markdown 是一款面向网络写作者的文本转 HTML 工具。Markdown 允许你使用易于阅读和书写的纯文本格式进行写作，然后将其转换为结构有效的 XHTML（或 HTML）。

Markdown允许你使用特定字符环绕文本，解析器会将其渲染为标准 HTML。我们将在本文中深入讨论这一点，但现在我们先来谈谈这两款编辑器的共同功能。

编辑器中提供以下功能，但使用方式有所不同：

  • 帖子标题
  • 标签
  • 插入图像
  • 封面图片
  • 规范网址
  • 系列名称

为了使事情变得简单和更容易理解，让我们讨论如何在rich + markdown版本中使用这些功能，然后我们将继续讨论基本的 markdown版本。

如何使用“RICH + Markdown”中的常用编辑器功能

帖子标题是您帖子的标题，您可以在编辑器顶部的大输入框中写入它。

Rich + Markdown 版本编辑器中的帖子标题

标签是与您的帖子相关的关键词。插入标签非常简单，如下图所示。

丰富的帖子标签+markdown 版编辑器

在 Rich + Markdown 编辑器中插入图像

可以将图像上传到 DEV 有两个目的：

  • 封面图片
  • 身体图像
封面图片
封面图片将显示在您的帖子顶部，位于帖子标题之前
身体图像
正文图片将用于您的帖子

插入图像非常简单，您只需单击编辑器左上角的上传图像图标即可。

在 Rich + Markdown 版本的编辑器中插入图像

等待上传完成，上传图片图标旁边会出现一个Mardown图片格式。

在 dev.to 编辑器中 Marckdown 图片 URL

复制Markdown 图像并插入到您的帖子中。

我们将在插入图像部分更深入地讨论Markdown 图像和直接 URL。

如果您想上传封面图片，请单击添加封面图片按钮。

添加封面图片

上传完成后，图像将出现在编辑器中输入的标题之前。

在 Rich + Markdown 版本的编辑器中插入封面图片

您可以通过单击图像图标并单击“更改”按钮旁边的“删除”按钮来删除封面图像。

在“rich + markdown”编辑器中插入规范 URL

如果帖子已在互联网上的其他地方发布，则规范 URL就是该帖子的URL 。

要插入规范网址，请点击“保存草稿”按钮旁边的图标。将出现下图，第一个表单输入框是用于插入规范网址的选项。

插入规范 URL

输入网址并单击完成。

在“rich + markdown”编辑器中插入系列名称

系列名称是给予相关文章的名称。

系列名称应包含在系列的第一篇文章中，然后后续文章可以添加到该系列中。

系列名称是上图中的第二个表单选项。这里再显示一遍。

添加系列名称

当帖子发布时，系列中每篇帖子的第一段和最后一段之前都会出现一个类似于下面的框。

dev.to 中的系列

[返回目录]

如何使用 BASIC MARKDOWN 版本中的常用编辑器功能

上述提到的常见功能（除了插入图片之外）都以一种名为Front Matter的格式附加到文章中。如下图所示：

基础Markdown版本常用功能

要在编辑器的基本 markdown 版本中插入图像，请按照“rich + markdown”版本中的常见编辑器功能中概述的相同步骤进行操作。

要上传封面图片，请从图片的 Markdown 格式中复制直接 URL。直接 URL 示例如下：

https://dev-to-uploads.s3.amazonaws.com/i/xeoz36tpdc958agh2dqf.png

上传图像后，将其添加到 Front Matter，如下图所示。

封面图片已添加到前言

[返回目录]

您可以在帖子中插入的内容

插入图像

我们之前在rich + markdown常用编辑器功能下的插入图片部分讨论过如何插入图片。本篇是该讨论的延续。

当您上传图像时，图像将通过Ajax请求上传，如果文件很大，则可能需要一段时间。

上传完成后，将出现以下格式的 Markdown 链接：

![Alt text](https://thepracticaldev.s3.amazonaws.com/i/0q8ewwsa7psjma2sqw18.png)

您可以通过删除链接周围的字符将 Markdown 链接变成直接链接，直到剩下以下格式的内容：

https://thepracticaldev.s3.amazonaws.com/i/0q8ewwsa7psjma2sqw18.png

直接链接主要用于插入封面图片，而 Markdown 链接将插入到您的帖子中。

出于可访问性的原因，请确保为图像提供替代文本。

![This is an alt text](https://thepracticaldev.s3.amazonaws.com/i/0q8ewwsa7psjma2sqw18.png)

如果您想深入了解，您可以在文件上传期间检查开发人员工具中的“网络请求”选项卡。

Firefox 开发者工具中显示的通过 XHR 请求上传文件

[返回目录]

插入链接

当您想在帖子中添加链接时，您将使用一对方括号–[]和一对圆括号– ()。

方括号包含链接文本，圆括号包含URL

格式为：
[Dev.to](https://dev.to)

解析器将把它呈现为：
<a href="https://dev.to">Dev.to</a>

浏览器中的输出将是：

开发者

[返回目录]

粗体文本

可以使用粗体文本来吸引读者注意文本的特定部分。

在markdown中，添加双下划线作为前缀和后缀，文本将以粗体呈现。

格式为：
__i want to bold this__

解析器将把它呈现为：

<strong>i want to bold this</strong>

浏览器中的输出将是：

我想加粗这个

[返回目录]

斜体文本

斜体格式的文本也可用于吸引用户对特定文本的注意力。

在markdown中，您添加单个下划线作为前缀和后缀，文本将以斜体格式呈现。

格式为：
_i want this to be in italic format_

解析器将把它呈现为：
<em>i want this to be in italic format</em>

浏览器中的输出将是：

我希望这是斜体格式

[返回目录]

表格

HTML表格在文章中插入相当棘手，文字无法完整解释。最好能提供代码示例。

| column 1 | column 2 | column 3 |
| --------- |:---------:| -------:|
| some data | some data | some data |
| some data | some data | some data |
| some data | some data | some data |

这将被呈现为：

第 1 列 第 2 列 第 3 列
一些数据 一些数据 一些数据
一些数据 一些数据 一些数据
一些数据 一些数据 一些数据

[返回目录]

代码片段

如果特定的技术解释需要，则可以在您的帖子中包含代码片段。

DEV 上的代码片段在黑色背景的页面上的专用区域显示，如果您指定代码的语言，它将以适当的语法突出显示。

如果您希望代码片段在页面的专用分区中呈现，则至少需要满足三个要求。它们是：

  • 三个反引号 (```) 作为前缀
  • 代码片段
  • 三个反引号 (``` ) 作为后缀

在 markdown 中这将是：

```
someCodeGoes("here")
```
view raw gistfile1.md hosted with ❤ by GitHub

示例代码将呈现为：

function helloWorld() {
  console.log("hello world ");
}
Enter fullscreen mode Exit fullscreen mode

但是，如果您希望代码的语法突出显示，则必须在代码片段之前包含语言。

在降价中：

前面的代码片段将呈现为：

function helloWorld() {
  console.log("hello world ");
}
Enter fullscreen mode Exit fullscreen mode

记得用你选择的语言替换 JavaScript，例如CSS、HTML、Python 等

[返回目录]

代码嵌入

您可以将来自在线代码编辑器（如codepen、codesandbox或jsfiddle）的代码嵌入到您的帖子中。

要嵌入帖子，您需要一个称为 Liquid 标签的东西。

Liquid 标签格式为：

{% <online code editor> <url|embed_id> %}

例如，要插入来自 codepen 的代码嵌入，您必须编写如下代码：

{% codepen https://codepen.io/alvaromontoro/pen/JxMPqa %}

它将呈现为：

对于 codesandbox，你会写

{% codesandbox staggered-animated-cards-with-vue-and-tailwindcss-okwst %}

注意：上面的“staggered-animated-cards-with-vue-and-tailwindcss-okwst”是codesandbox的id。

它将呈现为：

对于其他在线编辑器，请记住分别用编辑器名称和嵌入 ID 替换 codepen 或 jsfiddle。

[返回目录]

YouTube 视频

YouTube 是最常用的视频平台，这是一个公开的秘密。

您可以使用视频 ID和液体标签将 Youtube 视频包含在您的帖子中。

格式为：
{% youtube <video id> %}

完整的液体标签为：

{% youtube HUBNt18RFbo %}

这将被呈现为：

[返回目录]

Vimeo 视频

该过程与 YouTube 视频类似，您只需要视频 ID。

格式为：

{% vimeo <video id> %}

完整的液体标签为：

{% vimeo 33678526 %}

这将被呈现为：

[返回目录]

GitHub 存储库

要插入 github 存储库，您所需要的只是存储库作者的用户名和带有 liquid 标签的存储库名称。

格式：
{% github <repo name> %}

完整的液体标签为：

{% github getify/You-Dont-Know-JS %}

这将被呈现为：

GitHub 徽标 getify /你不知道的 JS

关于 JS 语言的书籍系列（已出版 2 个版本）。

你还不懂 JS（丛书）- 第二版

这是一系列深入探讨 JavaScript 语言核心机制的书籍。这是该系列丛书的第二版：

     ...

要了解有关本系列丛书背后的动机和观点的更多信息，请查看前言。

如果您正在寻找以前的第一版书籍，可以在这里找到。

标题

我建议按以下顺序阅读第二版书籍：

如果您正在寻找以前的第一版书籍，可以在这里找到。

出版

与往常一样，您可以在这里在线阅读这些书籍……

在 GitHub 上查看

[返回目录]

DEV 用户嵌入

要嵌入用户资料，您只需要用户名。

格式：

{% user <username> %}

完整的液体标签为：

{% user xtrp %}

这将被呈现为：

[已删除用户] 图片

[已删除用户]

[返回目录]

DEV 帖子嵌入

要嵌入帖子，您需要帖子的URL和 liquid 标签。

格式为：

{% link <url here> %}

完整的液体标签为：

{% link https://dev.to/lydiahallie/javascript-visualized-the-javascript-engine-4cdf %}

这将被呈现为：

莉迪亚哈利

🚀⚙️ JavaScript 可视化：JavaScript 引擎

Lydia Hallie · 19年12月13日

#javascript #计算机科学 #教程

[返回目录]

原始 HTML

如果您对 HTML 有足够的了解，您可以将它们嵌入到您的帖子中，从下标、上标到水平线。

以下 HTML 是定义列表：

<dl>
  <dt><b>Definition term</b></dt>
  <dd>Definition Description</dd>

  <dt><b>Definition term</b></dt>
  <dd>Definition Description</dd>
</dl>
Enter fullscreen mode Exit fullscreen mode

该代码可以直接包含在编辑器主体中，如下图所示。

原始 HTML 嵌入到 dev.to.editor 中

这将被呈现为：

定义术语
定义描述
定义术语
定义描述

[返回目录]

感谢Yechiel Kalmenson的 Github 要点。

您可以访问以下他的个人资料：

yechielk 图像

耶希尔·卡尔门森

他/他/他的 我是一名软件工程师，也是一名老师。当你看到有人在学习他们不了解的东西时，眼神里闪烁着光芒，那种感觉真是无与伦比。
文章来源：https://dev.to/ziizium/a-beginners-guide-to-the-dev-editor-202p
Devto 翻译
PREV
Git 和 Github 备忘单 大家好！
NEXT
使用 JavaScript 构建一个简单的国际象棋 AI