您正位于 MDN Web 文档的可编辑版本

以 MDN Web 文档用户身份查看: https://developer.mozilla.org/zh-CN/docs/Project:MDN/贡献/Editor_guide/Source_mode

这篇翻译不完整。请帮忙从英语翻译这篇文章

MDN 编辑器有个重要的按键,用来切换到源码编辑模式。此模式下,你可以看到正在编辑的文章的 HTML。这个指引使你了解 MDN wiki 源码编辑模式做什么,什么应该做,但更为重要的是,什么是不应该做的。

在你考虑使用源码模式之前,请注意我们强烈建议你不要使用源码模式。如果您只是为了强行符合我们的样式规范,你不应该去使用源码模式。我们确实有一些需求不启用源码模式无法做到。记得查看Warnings and caveats

启用源码模式

启用源码模式很简单。在编辑器工具栏的左上角,点击 Source 按钮。

Partial screenshot of the editor toolbar, with the Source mode button highlighted

对于格式化、图片之类的功能,很可能源码模式没有 WYSIWYG (所见即所得)好用,因为你可能需要滚动很远才能找到编辑器中相关源码的位置。

警告

综上所述,你应该极少使用到源码模式。启用源码模式应该是要做一些极其具体的事情。最终我们会在编辑器界面为您展示您的修改。

As mentioned previously, you should only rarely need to use source mode. There are a few very specific things you can only do by tweaking the source. Eventually we will update the editing interface to handle those things for you.

MDN贡献者指南中未明确描述的所有内容均不应添加到源代码中。这意味着:

  • 不要使用自定义字体和样式。若不是标准的一部分,请勿使用。
  • 不要使用特殊颜色。若不是标准视觉样式,请修改为我们提供的样式。

源码模式下编辑

一旦启用源码模式,你将可以编辑 wiki 页面的原始 HTML。虽不受编辑器约束,您应竭尽所能保持您的工作与样式指南一致,并且可以安全可靠的工作。

通常,您应该是在源码模式中做一些短暂的调整,而不是长时间的撰写页面。

不幸的是,Tab 键在源码模式中无法使用,请输入两个空格来代替。

若您使用 MDN 不允许的 HTML 元素和属性,它们会在你保存时直接被移除。此外,文档还将重新被格式化,以使之符合预期。

合理使用源码模式

There are a few specific cases in which the only way to follow MDN's style guide is to resort to the use of source mode. This section covers these cases and how to properly implement these features without breaking other things.

Highlighting lines in sample code

Within the sample code snippet blocks established using the PRE or Syntax Highlighter buttons in the toolbar's block group, you may wish to call special attention to specific lines of code. The only way to do this is to open source mode, find the <pre> block containing the code, and edit the <pre> tag's class attribute to include a highlight component formatted as follows:

  • highlight[lineNum1, lineNum2, ..., lineNumN]

For example, if the existing tag is <pre class="brush: js">, and you want to add highlighting to lines 4 and 7, you would change it to <pre class="brush:js; highlight:[4,7]">.

Let's look at a more complete example:

Before highlighting With highlighting
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var path1 = new Path2D();
path1.rect(10, 10, 100, 100);

var path2 = new Path2D(path1);
path2.moveTo(220, 60);
path2.arc(170, 60, 50, 0, 2 * Math.PI);

ctx.stroke(path2);

Here, the <pre> tag is: <pre class="brush: js">

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var path1 = new Path2D();
path1.rect(10, 10, 100, 100);

var path2 = new Path2D(path1);
path2.moveTo(220, 60);
path2.arc(170, 60, 50, 0, 2 * Math.PI);

ctx.stroke(path2);

And here, the <pre> tag has been changed to: <pre class="brush: js; highlight:[4,7]">

Styles that don't have toolbar buttons

We have some styles we use on MDN that are not available using the normal user interface. Fortunately, these aren't used very often. Some examples are:

  • To apply they "keyboard" style, you need to enclose the text of the key's name in the <kbd> element. We have no user interface for this yet. So drop into source mode and wrap the key name in <kbd>. For example, if the source is:
    <p>Press the <kbd>Enter</kbd> key to start the countdown.</p>

    The result is:

    Press the Enter key to start the countdown.

  • Some very uncommon styles used on specialized pages also need to be added by hand. This is especially common with group boxes. That's why we have macros that help to build many of the landing page components automatically.

文档标签和贡献者

最后编辑者: yinsang,