1 files changed, 122 insertions, 0 deletions
diff --git a/files/zh-cn/orphaned/mdn/editor/source_mode/index.html b/files/zh-cn/orphaned/mdn/editor/source_mode/index.html
new file mode 100644
index 0000000000..baa7b16739
--- /dev/null
+++ b/files/zh-cn/orphaned/mdn/editor/source_mode/index.html
@@ -0,0 +1,122 @@
+---
+title: 源码模式
+slug: orphaned/MDN/Editor/Source_mode
+translation_of: MDN/Editor/Source_mode
+original_slug: MDN/Editor/Source_mode
+---
+<div>{{MDNSidebar}}</div>
+
+<p class="summary">MDN 编辑器有个重要的按键，用来切换到源码编辑模式。此模式下，你可以看到正在编辑的文章的 HTML。<span class="seoSummary">这个指引使你了解 MDN wiki 源码编辑模式<strong>能</strong>做什么，什么<strong>应该</strong>做，但更为重要的是，什么是<strong>不应该</strong>做的。</span></p>
+
+<div class="warning">
+<p>在你考虑使用源码模式之前，请注意我们强烈建议你不要使用源码模式。如果您只是为了强行符合我们的样式规范，你不应该去使用源码模式。我们确实有一些需求不启用源码模式无法做到。记得查看{{anch("Warnings and caveats")}}。</p>
+</div>
+
+<h2 id="启用源码模式">启用源码模式</h2>
+
+<p>启用源码模式很简单。在编辑器工具栏的左上角，点击“<strong>Source</strong>”或“<strong>原始碼</strong>”按钮。</p>
+
+<p><img alt="Partial screenshot of the editor toolbar, with the Source mode button highlighted" src="https://mdn.mozillademos.org/files/15295/Source%20mode%20button.png" style="height: 98px; width: 267px;"></p>
+
+<p>对于格式化、图片之类的功能，很可能源码模式没有 WYSIWYG (所见即所得)好用，因为你可能需要滚动很远才能找到编辑器中相关源码的位置。</p>
+
+<h2 id="警告">警告</h2>
+
+<p>综上所述，你应该极少会需要用到源码模式。只有一些极个别的事情才必须由修改源码实现。最终，我们会更新编辑器界面，为你展示你的修改。</p>
+
+<p><a href="/en-US/docs/MDN/Contribute">MDN贡献者指南</a>中未明确描述的所有内容均不应添加到源代码中。这意味着：</p>
+
+<ul>
+ <li>不要使用自定义字体和样式。若不是标准的一部分，请勿使用。</li>
+ <li>不要使用特殊颜色。若不是标准视觉样式，请修改为我们提供的样式。</li>
+</ul>
+
+<h2 id="源码模式下编辑">源码模式下编辑</h2>
+
+<p>一旦启用源码模式，你将可以编辑 wiki 页面的原始 HTML。虽不受编辑器约束，您应竭尽所能保持您的工作与<a href="/en-US/docs/MDN/Contribute/Guidelines/CSS_style_guide">样式指南</a>一致，并且可以安全可靠的工作。</p>
+
+<div class="note">
+<p>通常，您应该是在源码模式中做一些短暂的调整，而不是长时间的撰写页面。</p>
+</div>
+
+<p>不幸的是，<kbd>Tab</kbd> 键在源码模式中无法使用，请输入两个空格来代替。</p>
+
+<p>若您使用 MDN 不允许的 HTML 元素和属性，它们会在你保存时直接被移除。此外，文档还将重新被格式化，以使之符合预期。</p>
+
+<h2 id="合理使用源码模式">合理使用源码模式</h2>
+
+<p>在一些个别的情况下，使用源码是唯一能遵循MDN格式规范的方式。这一节涵盖了这些情况，并说明了如何在不破坏其他东西的前提下，正确使用这些功能。</p>
+
+<h3 id="在示例代码中高亮代码行">在示例代码中高亮代码行</h3>
+
+<p>在用<a href="/zh-CN/docs/MDN/Contribute/Editor/Basics/Toolbar#Blocks_group">工具栏的块组</a>中的<strong>PRE</strong>或<strong>Syntax Highlighter</strong>建立的示例代码片段块中，你会希望让某几行代码更引人注目一些。唯一实现这种事项的方式是开启源码模式，找到包含此部分代码的{{HTMLElement("pre")}}块，然后编辑<code>&lt;pre&gt;</code>标签的{{htmlattrxref("class")}}属性，加上一个<code>highlight</code>组件，像下面这种格式：</p>
+
+<ul>
+ <li><code>highlight[<em>lineNum1</em>, <em>lineNum2</em>, ..., <em>lineNumN</em>]</code></li>
+</ul>
+
+<p>例如，如果现在的标签为<code>&lt;pre class="brush: js"&gt;</code>，然后你想往第4行和第7行加个高亮，你可把它改为<code>&lt;pre class="brush:js; highlight:[4,7]"&gt;</code>。</p>
+
+<p>我们看个更复杂的示例：</p>
+
+<table class="fullwidth-table">
+ <thead>
+  <tr>
+   <th scope="col">高亮前</th>
+   <th scope="col">高亮后</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <pre class="brush: js notranslate">
+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);
+</pre>
+
+    <p>这里的{{HTMLElement("pre")}}标签为：<code>&lt;pre class="brush: js"&gt;</code></p>
+   </td>
+   <td>
+    <pre class="brush: js; highlight:[4,7] notranslate">
+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);</pre>
+
+    <p>然后这里的<code>&lt;pre&gt;</code>标签已经改为了：<code>&lt;pre class="brush: js; highlight:[4,7]"&gt;</code></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="没有对应工具栏按钮的样式">没有对应工具栏按钮的样式</h3>
+
+<p>MDN上我们用的一些样式通过通常的用户界面是无法实现的。好消息是，这些不是很常见。示例如：</p>
+
+<ul>
+ <li>要应用“keyboard”样式于其上的话，你需要将{{HTMLElement("kbd")}}元素中的键名的文本括上。我们还没有实现这个功能的用户界面，所以调到源码模式，把键名括在<code>&lt;kbd&gt;</code>中。 例如，如果源码是：
+
+  <pre class="brush: html notranslate">&lt;p&gt;Press the &lt;kbd&gt;Enter&lt;/kbd&gt; key to start the countdown.&lt;/p&gt;</pre>
+
+  <p>输出结果就是：</p>
+
+  <p>Press the <kbd>Enter</kbd> key to start the countdown.</p>
+ </li>
+ <li>用于特定页面的一些很不常用的样式也需要手动加上，这尤其在一组盒子上常见。这就是我们用宏来帮助自动建立诸多入口页面组件的缘故。</li>
+</ul>