MDN's editor has a prominent button that gives you the ability to switch into source editing mode. In this mode, you see the underlying HTML for the body of the article you're editing. This guide will help you understand what you can do with this feature, what you should do with it, and, most importantly, what not to do.
Warning: Before you consider using source mode, please note that we strongly urge you not to. Unless what you're doing is something you simply have to do in order to meet our style guide (we do have required features that have no user interface to produce at this time), you shouldn't need to use source mode. See Warnings and caveats below.
Accessing source mode
Getting into source mode is easy. Perhaps too easy. Simply click the "Source" button at the top-left corner of the editor's toolbar, as shown below.
Due to formatting, images, and the like, it's very possible that the source is so much shorter (vertical length-wise) than the WYSIWYG content that you may need to scroll up quite a lot to find the source.
Warnings and caveats
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.
Anything that's not expressly described somewhere in the MDN contributor guide should not be added to the source. That means:
- No custom fonts or styles; if it's not part of our standard look and feel, don't do it.
- No special colors. Use only the colors that are part of the standard look and feel of MDN.
Working in source mode
Once you're in source mode, you're editing the raw HTML that makes up the content of a wiki page. While you're unconstrained by the editor, you need to do everything you can to make sure your work matches the style guide and that it works safely and reliably.
You should usually only work in source mode for brief tweaks rather than for an extended period of writing time.
If you use any HTML elements or attributes that MDN doesn't allow, they will be removed from the HTML when your document is saved. In addition, the document will be reformatted to keep it moderately readable and consistent.
Legitimate uses for source mode
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 highlight buttons in the editor's block styles 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 couple of more complete examples:
| 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 |
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 |