Syntax highlighting - The MDN project 编辑

When you add a code example to an article on MDN, it's helpful to enable syntax highlighting, to make it easy for readers to visually pick out relevant bits of the code. The syntax highlighting mode you select is also used by our live sample rendering system to determine how to use each code snippet when assembling a complete example.

Support for syntax highlighting

MDN's wiki includes support for all of the languages we frequently use on MDN (as well as some we only use occasionally):

• Bash shell

• C/C++

• CSS

• HTML

• Java

• JavaScript

• JSON

• PHP

• Python

• SQL

• XML

Syntax highlighting can help make the code more readable, especially when it's in the context of a document full of other kinds of text. It can also help identify problems with examples and code snippets.

Applying syntax highlighting

As a rule, you should always enable syntax highlighting for any <pre> block which presents code if the block is more than one line long; for one-line code blocks, syntax highlighting may be optional depending on the context.

To enable syntax highlighting in code examples:

1. Type or paste the code into the article. For example:

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

   printf("Hello world\n");

   }

2. Select the text and click the PRE button in the editor toolbar. The result looks like this:

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

3. Click the Syntax Highlighter button and select the name of the appropriate programming language for the code example. In this case, it is C/C++:

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

The editor does not currently display the syntax highlighting.  You'll need to preview or save your changes and look at the article to see the syntax highlighting in effect.

You can actually simplify this process slightly by selecting the language from the syntax highlighter's language list in the toolbar without first clicking the PRE button. Applying syntax highlighting automatically adds the required <pre> block if it's not already in place.

If you also need to highlight specific lines or groups of lines within the code, you can do so by making some changes in source mode. See Highlighting lines in sample code in Source mode.

See also

• Live samples
• Guide to the MDN editor UI
• Getting started on MDN