The MDN editing interface

  • Revision slug: Project:MDN_editing_interface
  • Revision title: The MDN editing interface
  • Revision id: 425073
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment replace the info about the live sample system with a link to the content in the MDN editor guide.

Revision Content

The WYSIWYG (what-you-see-is-what-you-get) editor offered by MDC makes it easy to contribute new content to the MDN Documentation Center.  This article provides some information on how to use the editor, as well as some information about helpful features that may improve your productivity.

The MDC style guide offers information about how to format and style the content itself.

Keyboard shortcuts

See the section "Keyboard shortcuts" in the article MDN editor guide.

Including a revision note

When saving your change, it's helpful if you include a note explaining why you made the change. Enter some text in the "Edit summary" box below the editor before saving your change.

There are a few reasons this is helpful:

  • If the reason for your change isn't obvious, your note can explain the reasoning to others.
  • If your change is technically complex, it can explain to editors the logic behind it; this can include a bug number, for example, that editors can refer to for more information.
  • If your edit involves deleting a large amount of content, you can justify the deletion (for example, "I moved this content to article X").

Linking

There are some templates that make it easy to create in-page links. For example, you can link to a section with a given name using the anch template, like this:

{{anch("Including a revision note")}}

This inserts an anchor like this: {{ anch("Including a revision note") }}.

When writing interface documentation, and you need to link to a method within the current article, you can use the manch template, like this:

{{manch("methodName")}}

This looks like this: {{ manch("methodName") }}.

Using live sample code

See "Using the live sample system" in the MDN editor guide for this material's new home.

Deleting a page

If you come upon a page that needs to be deleted for any reason, simply add the tag "junk" to it. A helpful MDC administrator will remove the page shortly thereafter.

What are good reasons to mark a page for deletion?

  • The page was created by accident and has no content.
  • The page's contents were merged with another article.
  • The page is spam.
  • The page's contents are so woefully obsolete as to be dangerous.

Useful KumaScript commands

Sometimes, it's useful to take advantage of special KumaScript commands to improve the look and feel of your content.

By default, the MindTouch wiki truncates lengthy URLs when displaying them in the bodies of articles. This is not typically what we want. If you find this is happening to you, you can use the web.link command to embed the full URL, like this:

Truncated: http://www.bitstampede.com/2009/06/0...atures-on-mdc/

Inlined: {{ web.link("http://www.bitstampede.com/2009/06/04/more-new-features-on-mdc/") }}

This is done by using the text {{web.link("http://www.bitstampede.com/2009/06/04/more-new-features-on-mdc/")}}.

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 click the "PRE" icon in the toolbar.

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

The third step is to use the drop-down menu next to the "PRE" icon 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.

Accessing your browser's standard contextual menu

By default, the editor uses its own contextual menu when you right-click on the editor. To access your browser's default contextual menu (such as to access the Firefox spell checker's list of suggested corrections), hold down the Control key (the Command key on Mac OS X) while clicking.

The toolbar

See the "The toolbar" section of the new MDN editor guide for documentation on the toolbar.

Redirects

If you need to make a page redirect to another page, you can use the REDIRECT command. To do this, simply make the entire content of your article look like this:

REDIRECT <a class="redirect" href="%(location)s">%(title)s</a>

Once you've done this, any visit to the page will automatically redirect to the specified location.

If you need to view a page that performs a redirect at a later time, simply add "?redirect=no" to its URL. This will prevent the redirect from occurring so you can view and edit the redirect command.

See also

{{ 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 MDN Documentation Center.&nbsp; This article provides some information on how to use the editor, as well as some information about helpful features that may improve your productivity.</p>
<p>The <a href="/Project:En/MDC_style_guide" title="Project:En/MDC style guide">MDC&nbsp;style guide</a> offers information about how to format and style the content itself.</p>
<h2 id="Keyboard_shortcuts">Keyboard shortcuts</h2>
<p>See the section "<a href="/en-US/docs/Project:MDN/Contributing/Editor_guide#Keyboard_shortcuts" title="/en-US/docs/Project:MDN/Contributing/Editor_guide#Keyboard_shortcuts">Keyboard shortcuts</a>" in the article <a href="/en-US/docs/Project:MDN/Contributing/Editor_guide" title="/en-US/docs/Project:MDN/Contributing/Editor_guide">MDN editor guide</a>.</p>
<h2 id="Including_a_revision_note">Including a revision note</h2>
<p>When saving your change, it's helpful if you include a note explaining why you made the change. Enter some text in the "Edit summary" box below the editor before saving your change.</p>
<p>There are a few reasons this is helpful:</p>
<ul>
  <li>If the reason for your change isn't obvious, your note can explain the reasoning to others.</li>
  <li>If your change is technically complex, it can explain to editors the logic behind it; this can include a bug number, for example, that editors can refer to for more information.</li>
  <li>If your edit involves deleting a large amount of content, you can justify the deletion (for example, "I moved this content to article X").</li>
</ul>
<h2 id="Linking">Linking</h2>
<p>There are some templates that make it easy to create in-page links. For example, you can link to a section with a given name using the <a href="/Template:anch" title="Template:anch">anch</a> template, like this:</p>
<p><span class="nowiki">{{anch("Including a revision note")}}</span></p>
<p>This inserts an anchor like this:&nbsp;{{ anch("Including a revision note") }}.</p>
<p>When writing interface documentation, and you need to link to a method within the current article, you can use the <a href="/Template:manch" title="Template:manch">manch</a> template, like this:</p>
<p><span class="nowiki">{{manch("methodName")}}</span></p>
<p>This looks like this:&nbsp;{{ manch("methodName") }}.</p>
<h2 id="Using_live_sample_code">Using live sample code</h2>
<p>See "<a href="/en-US/docs/Project:MDN/Contributing/Editor_guide#Using_the_live_sample_system" title="/en-US/docs/Project:MDN/Contributing/Editor_guide#Using_the_live_sample_system">Using the live sample system</a>" in the <a href="/en-US/docs/Project:MDN/Contributing/Editor_guide" title="/en-US/docs/Project:MDN/Contributing/Editor_guide">MDN editor guide</a> for this material's new home.</p>
<h2 id="Deleting_a_page">Deleting a page</h2>
<p>If you come upon a page that needs to be deleted for any reason, simply add the tag "junk"&nbsp;to it. A helpful MDC administrator will remove the page shortly thereafter.</p>
<p>What are good reasons to mark a page for deletion?</p>
<ul>
  <li>The page was created by accident and has no content.</li>
  <li>The page's contents were merged with another article.</li>
  <li>The page is spam.</li>
  <li>The page's contents are so woefully obsolete as to be dangerous.</li>
</ul>
<h2 id="Useful_KumaScript_commands">Useful KumaScript commands</h2>
<p>Sometimes, it's useful to take advantage of special KumaScript commands to improve the look and feel of your content.</p>
<h3 id="Ensuring_that_full_links_are_displayed_inline">Ensuring that full links are displayed inline</h3>
<p>By default, the MindTouch wiki truncates lengthy URLs when displaying them in the bodies of articles. This is not typically what we want. If you find this is happening to you, you can use the <code>web.link</code> command to embed the full URL, like this:</p>
<p>Truncated: <a class="external" href="http://www.bitstampede.com/2009/06/04/more-new-features-on-mdc/" rel="freelink">http://www.bitstampede.com/2009/06/0...atures-on-mdc/</a></p>
<p>Inlined:&nbsp;{{ web.link("http://www.bitstampede.com/2009/06/04/more-new-features-on-mdc/") }}</p>
<p>This is done by using the text <span class="plain"><code><span class="nowiki">{{web.link("http://www.bitstampede.com/2009/06/04/more-new-features-on-mdc/")}}</span></code></span>.</p>
<h2 id="Using_syntax_highlighting">Using syntax highlighting</h2>
<p>MDC supports syntax highlighting for code samples.&nbsp; 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 click the "PRE" icon in the toolbar.</p>
<pre>
void main(int argc, char **argv) {
&nbsp;&nbsp;printf("Hello world\n");
}
</pre>
<p>The third step is to use the drop-down menu next to the "PRE" icon to select the language corresponding to the syntax highlighting you wish to apply.&nbsp; In this case, we'll use the C++ syntax highlighter.</p>
<pre class="brush: cpp">
void main(int argc, char **argv) {
&nbsp;&nbsp;printf("Hello world\n");
}
</pre>
<div class="note">
  <strong>Note:</strong> The editor does not display the syntax highlighting.&nbsp; You'll need to save your changes and look at the article to see the syntax highlighting in effect.</div>
<div class="noinclude">
  <h2 id="Accessing_your_browser's_standard_contextual_menu">Accessing your browser's standard contextual menu</h2>
  <p>By default, the editor uses its own contextual menu when you right-click on the editor. To access your browser's default contextual menu (such as to access the Firefox spell checker's list of suggested corrections), hold down the Control key (the Command key on Mac OS X) while clicking.</p>
  <h2 id="The_toolbar">The toolbar</h2>
  See the "<a href="/en-US/docs/Project:MDN/Contributing/Editor_guide#The_toolbar" title="/en-US/docs/Project:MDN/Contributing/Editor_guide#The_toolbar">The toolbar</a>" section of the new <a href="/en-US/docs/Project:MDN/Contributing/Editor_guide" title="/en-US/docs/Project:MDN/Contributing/Editor_guide">MDN editor guide</a> for documentation on the toolbar.<br />
  <h2 id="Redirects">Redirects</h2>
  <p>If you need to make a page redirect to another page, you can use the <code>REDIRECT</code> command. To do this, simply make the entire content of your article look like this:</p>
  <pre>
<code>REDIRECT &lt;a class="redirect" href="%(location)s"&gt;%(title)s&lt;/a&gt;</code></pre>
  <p>Once you've done this, any visit to the page will automatically redirect to the specified <code><em>location</em></code>.</p>
  <p>If you need to view a page that performs a redirect at a later time, simply add "<code>?redirect=no</code>" to its URL. This will prevent the redirect from occurring so you can view and edit the redirect command.</p>
  <h2 id="See_also">See also</h2>
  <ul>
    <li><a class="internal" href="/Project:en/Using_the_Mozilla_Developer_Center" title="Project:en/Using the Mozilla Developer Center">Using the Mozilla Developer Center</a></li>
    <li><a href="/Project:en/Custom_Templates" title="Project:en/Custom Templates">Custom Templates</a></li>
    <li><a class="external" href="http://docs.fckeditor.net/FCKeditor_2.x/Users_Guide" title="http://docs.fckeditor.net/FCKeditor_2.x/Users_Guide">FCKeditor Users Guide</a></li>
  </ul>
</div>
<div class="noinclude">
  {{ languages( {"ja": "Project:ja/MDC editor guide"} ) }}</div>
Revert to this revision