diff options
Diffstat (limited to 'files/zh-cn/mdn/editor')
-rw-r--r-- | files/zh-cn/mdn/editor/basics/index.html | 61 | ||||
-rw-r--r-- | files/zh-cn/mdn/editor/basics/page_controls/index.html | 37 | ||||
-rw-r--r-- | files/zh-cn/mdn/editor/basics/page_info/index.html | 47 | ||||
-rw-r--r-- | files/zh-cn/mdn/editor/edit_box/index.html | 145 | ||||
-rw-r--r-- | files/zh-cn/mdn/editor/index.html | 20 | ||||
-rw-r--r-- | files/zh-cn/mdn/editor/source_mode/index.html | 121 |
6 files changed, 0 insertions, 431 deletions
diff --git a/files/zh-cn/mdn/editor/basics/index.html b/files/zh-cn/mdn/editor/basics/index.html deleted file mode 100644 index d6435b8282..0000000000 --- a/files/zh-cn/mdn/editor/basics/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: 编辑器 UI 元素 -slug: MDN/Editor/Basics -tags: - - 指南 - - 新手 - - 编辑器 -translation_of: MDN/Editor/Basics ---- -<p><span class="seoSummary">MDN内置 WYSIWYG(所见即所得)编辑器,目的就是让编辑工作变得更加轻松。你可以轻松地在网站各处创建、编辑、修改文章或其他页面。</span> 编辑器界面如下所示,包含八个关键区域。本指南将提供每个区域的介绍,以便您了解如何使用整个编辑环境。</p> - -<div class="note"> -<p>我们不断努力改进MDN,所以有时候本指南或下面的屏幕截图可能会稍微过时。不过,我们会定期更新此文档,以避免其无法使用。</p> -</div> - -<p><img alt="Screenshot of the editor UI (August 2017) with each section labeled" src="https://mdn.mozillademos.org/files/15261/edit-page-with-labels.png" style="border-style: solid; border-width: 2px; height: 723px; width: 808px;"></p> - -<p>上图所示的编辑器各个UI区域已罗列在下表中,点击下面的链接来了解每个部分。</p> - -<ul> - <li><a href="/zh-CN/docs/MDN/Contribute/Editor/Basics/Page_info">页面信息(上图中的 Page info )</a></li> - <li><a href="/zh-CN/docs/MDN/Contribute/Editor/Basics/Page_controls">页面控制(Page controls)</a></li> - <li><a href="/zh-CN/docs/MDN/Contribute/Editor/Basics/Toolbar">工具栏(Toolbar)</a></li> - <li><a href="/zh-CN/docs/MDN/Contribute/Editor/Edit_box">编辑框(Edit box)</a></li> - <li><a href="/zh-CN/docs/MDN/Contribute/Editor/Basics/Tags">标签(Tags)</a></li> - <li><a href="#修订意见">修订意见(Revision comment)</a></li> - <li><a href="#复核请求">复核请求(Review requests)</a></li> - <li><a href="/zh-CN/docs/MDN/Contribute/Editor/Basics/Attachments">附件(Attachments)</a></li> -</ul> - -<h2 id="修订注释">修订注释</h2> - -<p>我们强烈建议你每次编辑完成后要附上对修改的注释(修订注释)。这些注释将被保存到页面的修订历史中,就像这个<a href="/zh-CN/dashboards/revisions" title="/zh-CN/dashboards/revisions">修订看板</a>。这将有助于向复核你修改的人提供解释说明。想要添加修订意见也很简单,只要在<strong>发布</strong>之前,在修订意见框中填入注释即可。</p> - -<p>这么做的好处:</p> - -<ul> - <li>如果你进行修改的原因不明显,你的注释可以向别人解释你的想法。</li> - <li>如果你的修改在技术上很复杂,注释可以向编辑者解释它背后的逻辑。甚至可以在注释中包含一个bug追踪号,以便向编辑者提供更多参考信息。</li> - <li>如果你的编辑涉及删除大量的内容,你的注释可以证明删除的合理性(例如,“我把这个内容移到第X条”)。</li> -</ul> - -<h2 id="复核请求">复核请求</h2> - -<p>MDN社区使用<strong>复核</strong>来追踪和提高MDN内容的质量。通过在文章页面上设置特定标志来表示这篇文章需要审查复核。你可以在 <a href="/zh-CN/docs/MDN/Contribute/Howto" title="/zh-CN/docs/Project:MDN/Contributing/How_to_help">MDN 使用指南</a>中了解更多关于<a href="/zh-CN/docs/MDN/Contribute/Howto/Do_a_technical_review" title="/zh-CN/docs/Project:MDN/Contributing/How_to_help#Content_reviews">技术复核</a>和<a href="/zh-CN/docs/MDN/Contribute/Howto/Do_an_editorial_review">文法复核</a>的知识。</p> - -<p>想要申请对你所做的文章进行复核,只需勾选对应复核类型前面的复选框即可。任何对技术方面的修改,都应申请技术复核,当然,如果你申请文法复核,想找个人来检查你的写作和样式,那也是极好的。</p> - -<p>当申请复核后,文章将会被添加到<a href="/zh-CN/docs/needs-review/technical">需要技术复核</a>或<a href="/zh-CN/docs/needs-review/editorial">需要文法复核</a>列表,但这并不能保证会立马有人来复核你的文章。对于技术复核,最好直接联系相关技术领域的<a href="/zh-CN/docs/MDN/Community/Roles/Subject-matter_experts">学科专家</a>。对于编辑评论,您可以在 <a href="https://discourse.mozilla.org/c/mdn">MDN 论坛</a>中发帖以请求其他人来复核你的更改。</p> - -<p> </p> - -<p>在勾选申请复核之后,请务必点击一下<strong>发布</strong>按钮,这样才能提交复核请求。</p> - -<h2 id="参阅">参阅</h2> - -<ul> - <li><a href="https://docs.ckeditor.com/">CKEditor User's Guide</a></li> -</ul> - -<h6 id="EditorGuideQuicklinks">{{EditorGuideQuicklinks}}<span id="cke_bm_73C" style="display: none;"> </span></h6> diff --git a/files/zh-cn/mdn/editor/basics/page_controls/index.html b/files/zh-cn/mdn/editor/basics/page_controls/index.html deleted file mode 100644 index 48175fd7c8..0000000000 --- a/files/zh-cn/mdn/editor/basics/page_controls/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: MDN 编辑器页面控件 -slug: MDN/Editor/Basics/Page_controls -tags: - - 指南 - - 编辑器 -translation_of: MDN/Editor/Basics/Page_controls ---- -<div>{{MDNSidebar}}</div> - -<p>页面控件由对整个页面起作用的按钮组成,为了减少多余的滚动,页面控件在编辑器的顶部和底部都可见。一共有四个页面控制按钮:</p> - -<div class="note"> -<p>如果你编写的页面符合 MDN 的要求,而编辑器却不能保存成功,你可以<a href="mailto:mdn-spam-watch@mozilla.com?subject=MDN%3A%20Content%20Rejection%20Appeal&body=%3CDescribe%20the%20content%20you%20were%20trying%20to%20save%20and%20where%20you%20were%20trying%20to%20place%20it.%3E">电子邮件联系开发团队</a>寻求帮助。</p> -</div> - -<dl> - <dt>发布并继续编辑</dt> - <dd>点击这个按钮,会在不关闭编辑器的前提下保存并发布页面。这样你就可以定期保存编辑工作,在页面修订历史中创建存档,这些存档说不定以后会用到。在创建新页面时这个按钮是不可用。查看<a href="https://developer.mozilla.org/zh-CN/docs/MDN/Contribute/Editor/Basics#修订注释">修订注释框</a>以了解如何在保存文章时添加修订注释。</dd> - <dt>发布</dt> - <dd>点击该按钮,将保存并发布你的文章,同时关闭编辑器,浏览器跳转到标准模式下的页面。查看<a href="https://developer.mozilla.org/zh-CN/docs/MDN/Contribute/Editor/Basics#修订注释">修订注释框</a>以了解如何在保存文章时添加修订注释。</dd> - <dt>预览</dt> - <dd>点击这个按钮将打开新的页面或窗口,以发布的样式展示编辑器中的内容,其中的<a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Content/Macros">宏指令</a>和<a href="https://developer.mozilla.org/en-US/docs/MDN/Kuma/Introduction_to_KumaScript#Template_Syntax">模板</a>都如实展示。值得注意的是,此时你的文章并没有被保存。这个按钮的作用,就是在文章发布前检查实际页面效果的,如果出现脚本错误,请参阅<a href="/en-US/docs/MDN/Contribute/Troubleshooting#Scripting_error_while_previewing_a_page">预览页面时排除脚本错误</a>。</dd> - <dd> - <div class="warning" style="font-size: 14px;"> - <p><strong>警告:</strong> Currently some macros and templates don't execute properly in Preview-mode, leaving the Preview page missing some of its content (such as sidebars), and thus with somewhat distorted page layout; i.e. not totally <abbr title="What You See Is What You Get">WYSIWYG</abbr>. Further, if <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Editor/Basics#scayt"><abbr title="Spell-Check As You Type">SCAYT</abbr> is enabled</a> (and possibly if the page contains certain valid macros or templates), Preview mode may still give a scripting error.</p> - </div> - </dd> - <dt><br> - <a id="DiscardChanges" name="DiscardChanges">放弃</a></dt> - <dd>这个按钮的功能就是取消编辑,放弃所有未曾保存的更改。页面将会跳转回上个页面。</dd> - <dd> - <div class="warning" style="font-size: 14px;"> - <p><strong>警告:</strong> Occasionally <strong>Discard</strong> can malfunction and start acting more like a partial "discard," undoing many of your changes without exiting the editor. If this happens to you, you should save, exit, and re-enter the editor.</p> - </div> - </dd> -</dl> diff --git a/files/zh-cn/mdn/editor/basics/page_info/index.html b/files/zh-cn/mdn/editor/basics/page_info/index.html deleted file mode 100644 index 54be30c0cf..0000000000 --- a/files/zh-cn/mdn/editor/basics/page_info/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: 编辑器 UI 的页面信息区域 -slug: MDN/Editor/Basics/Page_info -tags: - - 指南 - - 新手 - - 编辑器 -translation_of: MDN/Editor/Basics/Page_info ---- -<div>{{MDNSidebar}}</div> - -<p>页面信息区域包含了本页面的信息,但也可以扩展开来以提供额外的页面控件。</p> - -<h2 id="现有页面">现有页面</h2> - -<p>默认情况下,编辑现有页面时,页面信息区域会显示页面标题。</p> - -<p>你可以点击<strong>编辑标题和属性</strong>按钮来打开更多页面控件。如下图:</p> - -<p><img alt="Page info fields for an existing article" src="https://mdn.mozillademos.org/files/15263/Expanded-page-info.png" style="border-style: solid; border-width: 2px; height: 190px; width: 751px;"></p> - -<p>这里可以对下列内容进行设置:</p> - -<dl> - <dt>标题</dt> - <dd>标题会显示在浏览器的标题栏(或标签栏)、面包屑导航栏中,以及文章的顶部。但它不会出现在页面的URL中。</dd> - <dt>目录</dt> - <dd>指定文章中次级标题的级别深度,次级标题会自动生成目录展示在页面上。默认情况下,这里填的是从 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h2" title="Heading elements implement six levels of document headings, <h1> is the most important and <h6> is the least. A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically."><code><h2></code></a> 到 <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h4" title="Heading elements implement six levels of document headings, <h1> is the most important and <h6> is the least. A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically."><h4></a></code> ,也就是有三级深度。当然,你也可以根据需要自由选择,比如,“没有目录”(不显示目录,如登陆页),或者“所有级别”。</dd> - <dt>最大渲染时长</dt> - <dd>确定页面自动刷新的频率。在绝大多数情况下,设置为零。</dd> - <dt>查找</dt> - <dd>对于已本地化的页面,这个字段可以帮助重新关联变成“孤儿”的页面(脱离英文原版的页面)。对于英语页面来讲,这个字段用处不大,因为,英语是 MDN 的官方语言。</dd> -</dl> - -<h2 id="新页面">新页面</h2> - -<p>如果你拥有<a href="/MDN/Contribute/Howto/Create_and_edit_pages#Getting_page_creation_permission">创建页面权限</a>,你就可以创建新的页面了。查看<a href="/en-US/docs//MDN/Contribute/Howto/Create_and_edit_pages#Creating_a_new_page">如何创建和编辑页面</a>你可以了解到更多这方面的知识。对于创建新页面,页面信息区域看起来如下图:</p> - -<p><img alt="Page info fields for a new page" src="https://mdn.mozillademos.org/files/15265/New-page-info.png" style="border-style: solid; border-width: 2px; height: 214px; width: 739px;"></p> - -<p>你同样可以设置<strong>标题</strong>和<strong>目录</strong>,还可以设置页面的<strong>别名</strong>,别名用于页面URL地址的最后一个部分。以只读状态显示的<strong>父地址</strong>是页面URL中网站根节点之后的部分。当你在标题输入框中输入文字的时候,别名输入框会自动生成对应的内容,其中会用下划线替代标题中的空格。</p> - -<div class="note"> -<p>值得注意的是,我们推荐使用更短的别名和描述更清晰的标题。举例来说,一个关于编辑器页面控件的页面,应该取一个例如:“MDN 编辑器页面控件”的标题,而它的 URL 应该写成“<code>MDN/Contribute/Editor/Basics/Page_controls</code>”,其中“<code>Page_controls</code>”正是这个页面的别名。</p> -</div> - -<p> </p> diff --git a/files/zh-cn/mdn/editor/edit_box/index.html b/files/zh-cn/mdn/editor/edit_box/index.html deleted file mode 100644 index de23593df5..0000000000 --- a/files/zh-cn/mdn/editor/edit_box/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: MDN 编辑器的编辑框 -slug: MDN/Editor/Edit_box -tags: - - MDN - - 快捷键 - - 编辑器 - - 编辑框 -translation_of: MDN/Editor/Keyboard_shortcuts ---- -<p>编辑框正是你写文章的地方,在编辑框中点击右键会根据你点击的位置打开对应的快捷菜单,比如:在表格中点击右键会弹出与编辑表格相关的菜单,在列表中右击就会弹出与列表相关的菜单。</p> - -<p>默认情况下,编辑器会用自己的右键菜单替代浏览器默认的菜单,如果你一定要打开浏览器的默认菜单(比如,使用火狐的拼写检查功能),你可以按住 <kbd>Shift</kbd> 或 <kbd>Control</kbd> 键( Mac 的 <kbd>Command</kbd> 键),再点击右键。</p> - -<h2 id="快捷键">快捷键</h2> - -<p>丰富而便捷的键盘快捷键能让你在编辑时,手不离开键盘。此处所列的是 Windows 或 Linux 系统下的快捷键,如果是 Mac,只需将 <kbd>Control</kbd> 替换为 <kbd>Command</kbd> 即可。</p> - -<table class="standard-table"> - <colgroup> - <col style="width: 15em;"> - </colgroup> - <tbody> - <tr> - <th>快捷键</th> - <th>描述</th> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>A</kbd></td> - <td>全选</td> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td> - <td>复制</td> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>V</kbd></td> - <td>粘贴</td> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>V</kbd></td> - <td>粘贴为纯文本</td> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>X</kbd></td> - <td>剪切</td> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td> - <td>撤销</td> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>Y</kbd></td> - <td>重做</td> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>K</kbd></td> - <td>打开链接编辑器/添加新链接</td> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td> - <td>移除光标所在位置的链接</td> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>B</kbd></td> - <td>加粗</td> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>I</kbd></td> - <td>斜体</td> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>O</kbd></td> - <td>切换 <code><code></code> 样式</td> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>O</kbd></td> - <td> - <p>切换源码编辑模式</p> - - <div class="note">使用源码编辑模式时请格外小心,你必须按照既定的格式来编辑。请仔细阅读<a href="/zh-CN/docs/Project:MDN/%E8%B4%A1%E7%8C%AE/Editor_guide/Source_mode">编辑器源码模式指南</a>,该指南详细介绍了如何使用源码模式,以及各项注意事项。</div> - </td> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>P</kbd></td> - <td>切换当前区域的 <code><pre></code> 样式</td> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>U</kbd></td> - <td>下划线</td> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>S</kbd></td> - <td>保存但不关闭编辑器</td> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td> - <td>保存并关闭编辑器</td> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>0</kbd></td> - <td>移除选中区域的样式(此处是数字“0”,不是字母“O”)</td> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>2</kbd> 至 <kbd>Ctrl</kbd> + <kbd>6</kbd></td> - <td>切换标题的级别(从 2 到 6 ),一级标题仅可供文章头部的页面标题使用。</td> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd></td> - <td>在无序列表、有序列表和普通段落格式之间切换。</td> - </tr> - <tr> - <td><kbd>Tab</kbd></td> - <td>在缩进模式下增加缩进级别,否则插入两个空格作为制表符。在表格内部,将光标移动到下一个单元格,或者在没有下一个单元格的情况下插入新行。如果光标当前位于页面标题或某个标题中,则光标跳转到下一段。</td> - </tr> - <tr> - <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> - <td>在缩进模式下降低缩进水平。在表格内部,跳到前一个单元格,如果前面没有单元格,则插入新行。如果光标当前位于页面标题或某个标题中,则光标跳转到下一段。</td> - </tr> - <tr> - <td><kbd>Shift</kbd> + <kbd>Space</kbd></td> - <td>插入空格(<code>&nbsp;</code>)</td> - </tr> - <tr> - <td><kbd>Shift</kbd> + <kbd>Enter</kbd></td> - <td> - <p>跳出当前区域。例如,如果你当前正在某个 <code><pre></code> 区域,按下 <kbd>Shift</kbd> + <kbd>Enter</kbd> ,你将跳出这个区域,回到文章正文。</p> - - <div class="note style-wrap"> - <p>当前不可用,详见:{{bug('780055')}}。</p> - </div> - </td> - </tr> - </tbody> -</table> - -<h2 id="参阅">参阅</h2> - -<ul> - <li><a href="/zh-CN/docs/MDN/Contribute/Editor/Basics">编辑器 UI 元素</a></li> - <li><a href="/zh-CN/docs/MDN/Contribute">为 MDN 做贡献</a></li> - <li><a href="/zh-CN/docs/MDN/Getting_started">初识 MDN</a></li> -</ul> - -<div>{{MDNSidebar}}</div> diff --git a/files/zh-cn/mdn/editor/index.html b/files/zh-cn/mdn/editor/index.html deleted file mode 100644 index 02f71ade9f..0000000000 --- a/files/zh-cn/mdn/editor/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: MDN 编辑指南 -slug: MDN/Editor -tags: - - MDN - - 指南 - - 文档 -translation_of: MDN/Editor ---- -<div>{{MDNSidebar}}</div> - -<div>{{IncludeSubnav("/zh-CN/docs/MDN")}}</div> - -<p><span class="seoSummary">MDN Web Docs wiki 文档系统的 WYSIWYG (所见即所得)编辑器让贡献新的内容变得简单。这篇指南将告诉你如何使用它,借此来提高你的生产力。在编辑或新建新的页面之前,请阅读并遵守 <a href="https://www.mozilla.org/zh-CN/about/legal/terms/mozilla/">Mozilla 条款</a>。 </span></p> - -<p><a href="/zh-CN/docs/MDN/Contribute/Content/Style_guide" title="Read the MDN style guide">MDN 样式指南</a> 除了告诉你如何进行格式化和样式化内容本身外,还包括我们推荐的语法和拼写规则。</p> - -<p>{{LandingPageListSubpages}}</p> - -<p>{{EditorGuideQuicklinks}}</p> diff --git a/files/zh-cn/mdn/editor/source_mode/index.html b/files/zh-cn/mdn/editor/source_mode/index.html deleted file mode 100644 index 660f88267e..0000000000 --- a/files/zh-cn/mdn/editor/source_mode/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: 源码模式 -slug: MDN/Editor/Source_mode -translation_of: 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><pre></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><pre class="brush: js"></code>,然后你想往第4行和第7行加个高亮,你可把它改为<code><pre class="brush:js; highlight:[4,7]"></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><pre class="brush: js"></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><pre></code>标签已经改为了:<code><pre class="brush: js; highlight:[4,7]"></code></p> - </td> - </tr> - </tbody> -</table> - -<h3 id="没有对应工具栏按钮的样式">没有对应工具栏按钮的样式</h3> - -<p>MDN上我们用的一些样式通过通常的用户界面是无法实现的。好消息是,这些不是很常见。示例如:</p> - -<ul> - <li>要应用“keyboard”样式于其上的话,你需要将{{HTMLElement("kbd")}}元素中的键名的文本括上。我们还没有实现这个功能的用户界面,所以调到源码模式,把键名括在<code><kbd></code>中。 例如,如果源码是: - - <pre class="brush: html notranslate"><p>Press the <kbd>Enter</kbd> key to start the countdown.</p></pre> - - <p>输出结果就是:</p> - - <p>Press the <kbd>Enter</kbd> key to start the countdown.</p> - </li> - <li>用于特定页面的一些很不常用的样式也需要手动加上,这尤其在一组盒子上常见。这就是我们用宏来帮助自动建立诸多入口页面组件的缘故。</li> -</ul> |