mozilla

Revision 72587 of The MDN editing interface

  • Revision slug: Project:MDC_editor_guide
  • Revision title: MDC editor guide
  • Revision id: 72587
  • Created:
  • Creator: Potappo
  • Is current revision? No
  • Comment 14 words added

Revision Content

The WYSIWYG (what-you-see-is-what-you-get) editor offered by MDC makes it easy to contribute new content to the Mozilla Developer Center.  This article provides some information on how to use the editor.

Keyboard shortcuts

There are a number of convenient keyboard shortcuts available to help you avoid taking your hands off the keyboard while you work.  The shortcuts are listed for Windows and Linux; on Mac, instead of using the Control key, you can use the Command key.

Shortcut Description
Ctrl-A Select all
Ctrl-C Copy to clipboard
Ctrl-V Paste from clipboard
Ctrl-X Cut
Ctrl-Z Undo
Ctrl-Y Redo
Ctrl-K Open link editor
Ctrl-W Turn the selected text into a link without using the link editor
Ctrl-B Bold
Ctrl-I Italic
Ctrl-U Underline
Ctrl-Shift-S Save changes
Ctrl-Alt-Enter Fit window
Ctrl-L Justify left
Ctrl-R Justify right
Ctrl-E Justify center
Ctrl-J Justify fully
Ctrl-1 through Ctrl-5 Select header level 1-5
Ctrl-0, Ctrl-N Paragraph format
Ctrl-Shift-L Toggles between bulleted list, numbered list, and paragraph format
Tab Increases indent level if in indent mode, otherwise inserts two spaces as a tab.  Inside tables, this jumps to the next cell, or inserts a new row if there is no next cell.  If the cursor is currently in the page title or in a header, the cursor jumps to the next paragraph.
Shift-Tab Decreases indent level if in indent mode.  Inside tables, this jumps to the previous cell, or inserts a new row if there is no previous cell.  If the cursor is currently in the page title or in a header, the cursor jumps to the next paragraph.
Shift-Space Inserts a non-breaking space ( )
Note:  Shift-Space shortcut is not implemented in the current version.

Using syntax highlighting

MDC supports syntax highlighting for code samples.  To use it, the first step is to insert the code sample into the document:

void main(int argc, char **argv) {

printf("Hello world\n");

}

The second step is to select the text and change the Format in the toolbar to "Formatted."

void main(int argc, char **argv) {
  printf("Hello world\n");
}

The third step is to use the Transformation menu to select the language corresponding to the syntax highlighting you wish to apply.  In this case, we'll use the C++ syntax highlighter.

void main(int argc, char **argv) {
  printf("Hello world\n");
}
Note: The editor does not display the syntax highlighting.  You'll need to save your changes and look at the article to see the syntax highlighting in effect.
{{ languages( {"ja": "Project:ja/MDC editor guide"} ) }}

Revision Source

<p>The WYSIWYG (what-you-see-is-what-you-get) editor offered by MDC makes it easy to contribute new content to the Mozilla Developer Center.  This article provides some information on how to use the editor.</p>
<h2>Keyboard shortcuts</h2>
<p>There are a number of convenient keyboard shortcuts available to help you avoid taking your hands off the keyboard while you work.  The shortcuts are listed for Windows and Linux; on Mac, instead of using the Control key, you can use the Command key.</p>
<table border="1" cellpadding="1" cellspacing="1" summary="Keyboard shortcuts in the MDC editor." width="60%"> <tbody> <tr> <td bgcolor="#99ccff"><strong>Shortcut</strong></td> <td bgcolor="#99ccff"><strong>Description</strong></td> </tr> <tr> <td>Ctrl-A</td> <td>Select all</td> </tr> <tr> <td>Ctrl-C</td> <td>Copy to clipboard</td> </tr> <tr> <td>Ctrl-V</td> <td>Paste from clipboard</td> </tr> <tr> <td>Ctrl-X</td> <td>Cut</td> </tr> <tr> <td>Ctrl-Z</td> <td>Undo</td> </tr> <tr> <td>Ctrl-Y</td> <td>Redo</td> </tr> <tr> <td>Ctrl-K</td> <td>Open link editor</td> </tr> <tr> <td>Ctrl-W</td> <td>Turn the selected text into a link without using the link editor</td> </tr> <tr> <td>Ctrl-B</td> <td>Bold</td> </tr> <tr> <td>Ctrl-I</td> <td>Italic</td> </tr> <tr> <td>Ctrl-U</td> <td>Underline</td> </tr> <tr> <td>Ctrl-Shift-S</td> <td>Save changes</td> </tr> <tr> <td>Ctrl-Alt-Enter</td> <td>Fit window</td> </tr> <tr> <td>Ctrl-L</td> <td>Justify left</td> </tr> <tr> <td>Ctrl-R</td> <td>Justify right</td> </tr> <tr> <td>Ctrl-E</td> <td>Justify center</td> </tr> <tr> <td>Ctrl-J</td> <td>Justify fully</td> </tr> <tr> <td>Ctrl-1 through Ctrl-5</td> <td>Select header level 1-5</td> </tr> <tr> <td>Ctrl-0, Ctrl-N</td> <td>Paragraph format</td> </tr> <tr> <td>Ctrl-Shift-L</td> <td>Toggles between bulleted list, numbered list, and paragraph format</td> </tr> <tr> <td>Tab</td> <td>Increases indent level if in indent mode, otherwise inserts two spaces as a tab.  Inside tables, this jumps to the next cell, or inserts a new row if there is no next cell.  If the cursor is currently in the page title or in a header, the cursor jumps to the next paragraph.</td> </tr> <tr> <td>Shift-Tab</td> <td>Decreases indent level if in indent mode.  Inside tables, this jumps to the previous cell, or inserts a new row if there is no previous cell.  If the cursor is currently in the page title or in a header, the cursor jumps to the next paragraph.</td> </tr> <tr> <td>Shift-Space</td> <td>Inserts a non-breaking space (&amp;nbsp;)</td> </tr> </tbody>
</table>
<div class="note"><strong>Note:</strong>  Shift-Space shortcut is not <span class="wordlink">implemented</span> in the current version.</div>
<h2>Using syntax highlighting</h2>
<p>MDC supports syntax highlighting for code samples.  To use it, the first step is to insert the code sample into the document:</p>
<p>void main(int argc, char **argv) {</p>
<p style="margin-left: 40px;">printf("Hello world\n");</p>
<p>}</p>
<p>The second step is to select the text and change the Format in the toolbar to "Formatted."</p>
<pre>void main(int argc, char **argv) {
  printf("Hello world\n");
}
</pre>
<p>The third step is to use the Transformation menu to select the language corresponding to the syntax highlighting you wish to apply.  In this case, we'll use the C++ syntax highlighter.</p>
<pre class="brush: cpp">void main(int argc, char **argv) {
  printf("Hello world\n");
}</pre>
<div class="note"><strong>Note:</strong> The editor does not display the syntax highlighting.  You'll need to save your changes and look at the article to see the syntax highlighting in effect.</div>
<div class="noinclude">{{ languages( {"ja": "Project:ja/MDC editor guide"} ) }}</div>
Revert to this revision