495

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

523

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.

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 the question have syntax highlighting enabled

Behind the scenes, Stack Exchanges uses the tags on the question to determine the language you are using. Each tag has a highlighting language specified in its properties, or no language. If there's more than one tag that has a highlighting language specified, or if none of the tags have one specified, it uses a default and lets Prettify infer what's the best language to use. The same highlighting language that is used on the question is also used on its answers.

Visit that tag's wiki page. Click a tag (such as ""), then click "Learn more...", and 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 a highlighting language specified when it should, create a on the per-site meta for your site to request it. (Only moderators can change the highlighting language for a tag.)

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

Unfortunately, Prettify is no longer being maintained and the repository is closed, so at the moment, bugs and feature requests that are not already in the latest version of Prettify cannot be implemented. For bug fixes and features that have already been implemented by Prettify but aren't working here, you can raise a feature request on Meta to request that a new version of Prettify be deployed.

Keep in mind that Stack Exchange does not maintain this syntax highlighter (aside from installing newer versions of it), 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?

As long as all the conditions in the Why isn't my code being highlighted correctly? section above are satisfied, highlighting will kick in automatically on code blocks based on the tags on the question. (See 4. Check that the tags on your question have syntax highlighting enabled above for how this works.) Inline code (e.g. this) is not highlighted.

It is possible to explicitly override the default highlighting language in use on the post with your language of choice in a specific code block, by specifying a language hint above the code block. Note that this is only supported when using the code fence (```) method of code formatting; as of the implementation of CommonMark, doing so on code blocks using the four-space indent method is no longer supported*:

```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 code block with language code (with "lang-" prefix) as a hint:

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

Here is a code 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:

```lang-none
[code here]
```

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, by adding an HTML comment at the top of your post. The hint will then be applied to all code blocks within your post, including those which use four-space indent or HTML <pre><code>:

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

Note that when used on a question, it does not override the highlighting language on its answers; those will still be highlighted by default as per the question's tags.


Language codes 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.


* The former method of specifying a highlighting language can still be used for HTML code blocks: place an HTML comment <!-- language: lang-or-tag-here --> before the <pre><code> tags and it will work.

Also, this former method hasn't been completely removed for four-space indented code blocks, but merely deprecated. While it will still work for the time being on four-space indented code blocks, it may/will be removed in the future.


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.

  • 1
    This begs the question of what to use for CMD / batch (I think the answer belongs in this FAQ). One suggestion is using lang-vb. – P.Mort. - forgot Clay Shirky_q Jul 23 '19 at 11:56
  • If there is a standard suggestion wouldn't it be better to just apply it to the tag @Peter? This FAQ tells people how to use and what's available rather than the full list of what is applied to each tag, which is readily available and more accurate on the tags themselves. – ben is uǝq backwards Jul 23 '19 at 18:21
  • 1
    It now looks like the <!-- language: lang-powershell --> hint does seem to generate appropriate PowerShell prettifying (sp?). Seems they may have finally integrated it. I would appreciate some additional confirmation before updating the community wiki. – John Eisbrener Sep 26 '19 at 15:01
  • 1
    I can't prove it @John. It's not in prettify-full.en.js linked in the answer, the PowerShell tag on Stack Overflow still uses lang-bsh, and applying the default to a couple of PowerShell answers seems to give the same highlighting as lang-powershell (by no means a comprehensive test). – ben is uǝq backwards Sep 26 '19 at 18:41
  • @benisuǝqbackwards Good to know lang-powershell looks to render the same as lang-bsh. Without either (at least in the dba.se site), any PowerShell code renders like garbage. At any rate, good to know lang-bsh can be used to get something reasonable at the very least. Thanks! – John Eisbrener Sep 26 '19 at 19:59
  • Unless I'm misunderstanding something, <!-- language: lang-none --> no longer has any effect, and therefore all references to it should be removed from this post... right? – ashleedawg Oct 21 '19 at 16:03
  • 1
    It still exists in the JS file and I've just tested it, and it removes all syntax hightlighting @ashleedawg, can you link to anything which proves that it has no effect? – ben is uǝq backwards Oct 21 '19 at 16:17
  • I really appreciate the effort that went into crafting that addition to the answer @Gabriel, it is all already covered more accurately though. The answer explains the code fence approach and includes a list of all working languages. What parts aren't explained well enough do you think? – ben is uǝq backwards Oct 29 '19 at 5:19
  • The code fence solution is barely mentioned, with no fully demonstrated examples for popular languages. Most importantly, no code fence list of languages exists, and it is currently impossible to know what to type to set a code fence language. See my answer again to see how I made those points clear. I'm not sure why my additions keep getting deleted or downvoted when the existing answer doesn't cover them. – Gabriel Staples Oct 29 '19 at 6:52
  • There is a list of supported languages it's the bottom third of the answer @GabrielStaples. There is an example of using both methods; I'm not sure of the benefit of having many examples for one method and less for another? – ben is uǝq backwards Oct 29 '19 at 7:04
  • 1
    I see that. But not one of them is written as c, cpp, or javascript, which are the styles accepted by the code fence method. I demonstrated and explained those in my additions. You do mention (no "lang-" prefix) in the one code fence sample you provide but it's really hard to find that and not obvious at all. More effort needs to be made to make this obvious. – Gabriel Staples Oct 29 '19 at 7:15
  • 1
    Also, has every verified language been proven to work in the code fence style too, or do we need a separate list of tested languages for the code fence style? – Gabriel Staples Oct 29 '19 at 7:20
  • 1
    All of the languages work for both methods @gabriel. The markdown uses the linked JS file for both. cpp doesn't actually work, it uses the default (which just so happens to cover C++). The lang prefix does work for code fences, if the answer contained a tag and a lang- example for both methods do you think that would address the issues you see? – ben is uǝq backwards Oct 29 '19 at 8:10
  • Yes I think so. Make the changes and comment back and I'll take a look. I just want it to be super obvious how to make either method work is all, and so far you have to very carefully read and know exactly where to look to see how to make a code fence tag. – Gabriel Staples Oct 29 '19 at 14:49
  • 4
    How should we interpret the status on the code-prettier repo stating status is "Inactive" / "Archived". Does the guidance here for contribution and support still apply for that external 3rd-party library? Ref: github.com/googlearchive/code-prettify (top of readme) – aaronsteers Apr 23 at 17:39

You must log in to answer this question.

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