436

I noticed that sometimes my code gets highlighted in different colors when rendered.

  • What is syntax highlighting?
  • How does it work?
  • Why isn't my code being highlighted correctly?
  • How do I report a bug or request a new language?
  • How do I use syntax highlighting?
  • What languages are currently available on Stack Exchange?

Return to FAQ index

457

What is syntax highlighting?

Syntax highlighting allows code in posts to be highlighted based on the language it's written in, to make it easier to read.

How does it work?

Stack Exchange does not have its own syntax highlighting engine. It uses Google Code Prettify, and is not necessarily using the latest release of that library. Therefore, any bugs and feature requests regarding syntax highlighting cannot be handled by Stack Exchange and should be directed to the team behind Google Code Prettify.

Syntax highlighting is assigned, based on tags, to the preview when creating or editing posts as soon as you stop typing for 5 seconds.

Prettify supports a list of core languages that it can highlight (including C/C++, C#, Java, JavaScript/CoffeeScript, Perl, Python, Ruby, Regex, Bash, HTML, and XML), along with a default generic highlighter that works passably on most C-like languages and HTML-like markup languages. Additional languages are implemented as extensions (each lang-*.js file).

Why isn't my code being highlighted correctly?

1. Check that the site you're using has syntax highlighting enabled

The full list is available on Meta. If syntax highlighting is not enabled on a site follow the instructions in this question.

2. Check that the language is supported by Prettify

Look at the list of Prettify supported languages. If your language is not on the list, it needs to be created within the Prettify project before it can be deployed by Stack Exchange.

If a language is already on the list but not used on Stack Exchange, please raise a feature request here on Meta to have it deployed on the network.

3. Check that the language is used by Stack Exchange

Look at the prettify-full.en.js file on the dev CDN, open in your favourite editor, and search for the language hint. For example, searching for "dart" brings you to a line consisting of ['dart']);, which is the end of a PR['registerLangHandler']( statement. This means that lang-dart is an available language hint. Searching for "psh" or "powershell" doesn't return any results, meaning that psh is not supported by the Stack Exchange version of Prettify.

4. Check that the tags on your question have syntax highlighting enabled

Behind the scenes, Stack Exchanges uses the tags on the question to determine the language you are using. If there's more than one tag that has syntax highlighting, it uses a default and lets Prettify infer what's the best language to use.

Visit that tag's wiki page. The language hint (if any) that is currently being used for that tag will be displayed at the very bottom, below the buttons for the wiki:

Code language (used for syntax highlighting): lang-java

If the tag doesn't have syntax highlighting enabled create a on the meta for your site to request this.

How do I report a bug or request a new language?

If it is indeed a bug in the syntax highlighter itself, check the issues list to see if it has already been reported. If it hasn't, feel free to report it or join the project and submit a fix yourself. If you want to ensure that an issue you raised is fixed quickly, it's best to include the fix in the report. If the fix has already been implemented by Prettify but is still not working here, please raise a feature request on Meta to request that a new version of Prettify be deployed.

You can also submit a request for a new language to be added in that same issues list. Keep in mind that Stack Exchange does not maintain this syntax highlighter, and posting bug reports or feature requests concerning it here on Meta will not get them fixed or implemented.

Before you do anything, make sure that you've got the correct highlighting turned on.

How do I use syntax highlighting?

It is possible to explicitly override the highlighting in use with your language of choice by specifying a language hint above the code block.

When using the four-space indent method:

<!-- language: lang-or-tag-here -->

    code goes here

...or when using the code fence (```) method:

```lang-or-tag-here

code goes here

```

You may use either a language code or a tag name in the language hint to activate syntax highlighting. See below for the complete list of prettify supported language codes.

For example:

Here is a four-space indented code block with language code (with "lang-" prefix) as a hint:

<!-- language: lang-js -->

    function greet(person) {
        return "Hello " + person;
    }
    var user = "John Doe";
    alert(greet(user));

Here is a code fence block with tag name (no "lang-" prefix) as a hint:

```typescript

    var arr = [0, 1, 2];  // will highlight if typescript tag exists

```

If you don't want to have any syntax highlighting you can use the lang-none language:

<!-- language: lang-none -->

You can also apply a language hint to all code blocks in your post (so you don't have to add a hint before each one):

<!-- language-all: lang-or-tag-here -->

What language codes are currently available on Stack Exchange

This is a complete list of every identifier that you can use in the language hint for syntax highlighting. Each language is grouped together based on how they appear in the Prettify JS file that Stack Exchange loads. All those language hints in each group point to the same highlighter.

Core:

  • Default: let Prettify interpret the code and guess default
  • None: explicitly do not use any syntax highlighting lang-none
  • Bash and other Shell scripting lang-bash, lang-bsh, lang-csh, lang-sh
  • C, C++, Objective-C, et al. lang-c, lang-cc, lang-cpp, lang-cxx, lang-cyc, lang-m
  • C# lang-cs
  • CoffeeScript lang-coffee
  • HTML, XML, XSL, et al. lang-html, lang-xml, lang-xsl
  • Java lang-java
  • JavaScript lang-js, lang-javascript
  • JSON lang-json
  • Perl lang-pl, lang-perl
  • Python lang-py, lang-python, lang-cv
  • Regex lang-regex
  • Ruby lang-rb, lang-ruby

Extensions:

Hinting: Tags

You can specify any tag that exists on the site, and it will use whatever language code is currently associated with that tag (which can be either null (no hint), default, or a specific language-code).

Keep in mind that by default all tags start off with none as their language code. Tags with none specified as their language code will be ignored and revert to default.

You can also use the plain none keyword to manually specify no syntax highlighting, similar to using the lang-none code above.


Note to editors:

Please do not add to the above list unless you are 100% sure it exists.

  • Just because you type something in and it looks like it's highlighted correctly does not mean the identifier actually exists in the system. Keep in mind that invalid identifiers revert back to default.

  • Additionally, as newer versions of Prettify have to be manually installed by Stack Exchange, languages that are indicated as supported in Prettify's documentation may not actually be supported by the Stack Exchange version of Prettify.

Because of these points, please link to the Meta question which confirms a hint's existence in your edit summary when adding a new hint to the list.

Note to commenters:

The comments on this FAQ are for requesting clarification of something you might not understand in the FAQ so that it can be fixed. Please DO NOT ask if certain languages will be supported in the future. That is not a question we can answer because Stack Exchange does not maintain this highlighter. Visit Google Code Prettify for language support.

  • 2
    @Bignose I rolled back your edit. Please read the "note to editors" at the bottom. Just because the core Prettify library supports something doesn't necessarily mean that it's in SE's version. As the note says, you must link to a meta post confirming existence in the edit summary whenever adding to the list of supported identifiers. – Sonic the Wizard Werehog Mar 28 at 3:02
  • @SonictheWizardWerehog, this article directs us explicitly to the set of core languages supported by Google Code Prettify. Are you saying this article is wrong to direct the reader to that list for languages supported? – bignose Mar 28 at 3:08
  • @bignose Even after a certain flavor is implemented in Prettify, Stack Exchange has to install the updated version. Just because a language is supported by Prettify doesn't necessarily mean that the version installed by SE has support for it yet. – Sonic the Wizard Werehog Mar 28 at 3:37
  • @SonictheWizardWerehog, thanks. I'll edit the answer to state that then. – bignose Mar 28 at 4:29

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .