561

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

7
  • I have question: why SE stuff (one person) will not report further such fundamental bugs? This person will once read all issue list of highlight.js and can easily decide it is bug or not. This looks really non-profesional when you see such highlight bugs... The SE chose that library so I think - it is SE responsibility to report such bugs further to highligt.js - especially In situation when this process is complicated (everybody need to get know all issue list). Am I wrong? Dec 3 '20 at 11:45
  • 1
    I need to check for existing reports on github.com/highlightjs/highlight.js/issues and eventualy post new bug reports. So I have few question not mentioned here. Which version of highlight.js is used on SE sites ? How colors are predifined ? Basicly I know/suppose that this is maintainged by CSS file, I ask do SE Sites use standard colors from https://github.com/highlightjs/ project or SE Sites use own sets of colors ? Could we change color and tone of colors ? Feb 4 at 21:46
  • I look into highlight.js demo then I select Language Categories=All and Themes=Stackoverflow Light are this theme exactly the same used on SE Sites ? Which language is used for lang-default ? Feb 4 at 22:42
  • 1
    how to find a list of languages supported by Stack Exchange? (Not the list supported by highlight.js)
    – Cadoiz
    Sep 20 at 6:36
  • 1
    @MichałLipok [1/2] 1. You could type hljs.versionString in your browser's console (F12) or use this script to check the version of Highlight.js; 2. SE uses its own colors; 3. According to sources, it may be a bit outdated (Updated: 2021-05-15), but generally it should be the same theme;
    – EvgenKo423
    Nov 23 at 9:47
  • @MichałLipok [2/2] 4. lang-default is a mistake. By default Highlight.js errors out, but SE made it to use an automatic language detection instead.
    – EvgenKo423
    Nov 23 at 9:59
  • @Cadoiz See "Language codes currently available on Stack Exchange" section below.
    – EvgenKo423
    Nov 23 at 10:04
591

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?

When creating or editing posts, syntax highlighting is assigned to the preview based on question's tags as soon as you stop typing for 5 seconds.

Stack Exchange does not have its own syntax highlighting engine. It uses highlight.js, and may not necessarily be using the latest release of that library. Therefore, any bugs and feature requests regarding syntax highlighting cannot be handled by Stack Exchange.

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 at the bottom of the answer there.

2. Make sure you're specifying a language code or the tag exists on a site

In case of a tag name make sure to also specify it in lower case. See How do I use syntax highlighting? section below for more info.

2a. Check that the language is supported on Stack Exchange

See Language codes currently available on Stack Exchange section below. If your language is not on the list, follow the instructions in How do I report a bug or request a new language? section below.

2b. Check that the tag has a language code associated with it

Each tag may have a highlighting language specified in its properties. Visit the tag's wiki page to see it: click on the tag you've found at step 2 (such as ), then click "Learn more...". The language code that is currently being used for the tag (if any) will be displayed at the very bottom, below the wiki buttons:

Code Language (used for syntax highlighting): lang-js

If the tag doesn't have a highlighting language specified when it should, create a on your site's per-site meta to request it. (Only moderators can change the highlighting language for a tag.)

3. Check that the tags on a question have an associated language codes

By default, Stack Exchange uses the tags on a question to determine the language you are using. If there's more than one tag that has a highlighting language specified, it lets highlight.js infer what's the best language to use. If none of the tags have one, no syntax highlighting will be performed. The same highlighting language that is used on a question is also used on its answers.

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

Reporting a bug or requesting a feature for a language supported on Stack Exchange

Go to the list of existing issues in highlight.js GitHub repository and check to see if your request is already filed there, and if not, post it there.

If your bug fix or feature request has already been fixed or implemented by highlight.js but isn't working here, please wait, as new versions of highlight.js are deployed on the sites on a scheduled basis, and the latest version hasn't been deployed yet. (If it hasn't been deployed after a long time, you can post a feature request here on Meta asking that Stack Exchange update to the latest version.)

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.

Requesting that Stack Exchange support a new language which is already supported by highlight.js

If a language is already on the list of languages supported by highlight.js, but is not supported on Stack Exchange (see Language codes currently available on Stack Exchange below), you can raise a feature request here on Meta to ask for it to be deployed on the network.

While it's fine to request for the SE team to add additional supported languages, these requests are extremely likely to be considered low-priority and as such deferred. The current response for such feature requests is that the team finds that the added trade-offs from supporting more languages outweigh their potential benefit, though they're looking for future ways to lighten it.

Requesting that a new language which is not currently supported by highlight.js be added

Follow the instructions in Reporting a bug or requesting a feature for a language supported on Stack Exchange above to request that highlight.js support your new language. Once the language is supported by highlight.js, follow Requesting that Stack Exchange support a new language which is already supported by highlight.js to make it available here on Stack Exchange.

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 of code blocks will kick in automatically based on the question's tags. (See 3. Check that the tags on a question have an associated language codes section above for how this works.) Inline code is not highlighted.

It is possible to explicitly override the default highlighting language in use on the post with your language of choice for 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; since 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 a language hint to activate syntax highlighting. See below for the complete list of language codes supported on Stack Exchange.

For example:

  • Here is a code block with language code (having the "lang-" prefix) as a hint:

    ```lang-js
    function greet(person) {
        return "Hello " + person;
    }
    var user = "Jon Skeet";
    alert(greet(user));
    ```
    
  • Here is a code block with tag name (without "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 code:

    ```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 a language hint for syntax highlighting. All the language identifiers in each group point to the same highlighter. Other language aliases set by highlight.js (in brackets) should work, but only identifiers before them are officially supported by Stack Exchange.

Format: Language name: lang-code, custom Stack Exchange aliases, (other Highlight.js aliases)

  • Plain text: lang-plaintext, lang-none, (lang-text, lang-txt)
    (explicitly disables syntax highlighting)
  • Bash and other shell scripts: lang-bash, lang-bsh, lang-csh, lang-sh
  • C and C-likes: lang-c, lang-cyc, lang-m, lang-c-like, (lang-h)
  • Clojure: lang-clojure, lang-clj
  • CoffeeScript: lang-coffeescript, lang-coffee, (lang-cson, lang-iced)
  • C++: lang-cpp, lang-cc, lang-cxx, (lang-c++, lang-h++, lang-hpp, lang-hh, lang-hxx)
  • C#: lang-csharp, lang-cs, (lang-c#)
  • CSS: lang-css
  • Dart: lang-dart
  • Delphi, Pascal: lang-delphi, (lang-dpr, lang-dfm, lang-pas, lang-pascal)
  • Erlang: lang-erlang, lang-erl
  • Go: lang-go, (lang-golang)
  • Haskell: lang-haskell, lang-hs
  • HTTP request/​response: lang-http, (lang-https)
  • INI, TOML: lang-ini, (lang-toml)
  • Java: lang-java, (lang-jsp)
  • JavaScript: lang-javascript, lang-js, (lang-jsx, lang-mjs, lang-cjs)
  • JSON: lang-json
  • Kotlin: lang-kotlin, (lang-kt, lang-kts)
  • LaTeX, TeX: lang-latex, lang-tex
  • Less: lang-less
  • Lisp: lang-lisp, lang-cl, lang-el, lang-lsp
  • Lua: lang-lua
  • Makefile: lang-makefile, (lang-mk, lang-mak, lang-make)
  • Markdown: lang-markdown, (lang-md, lang-mkdown, lang-mkd)
  • Mathematica / Wolfram Language: lang-mathematica, lang-mma, (lang-wl)
    (Mathematica SE only)
  • MATLAB: lang-matlab
  • Objective-C: lang-objectivec, (lang-mm, lang-objc, lang-obj-c, lang-obj-c++, lang-objective-c++)
  • OCaml, F#, SML and other ML-family languages: lang-ocaml, lang-fs, lang-ml
  • Perl: lang-perl, lang-pl, (lang-pm)
  • PHP: lang-php
  • PHP template (HTML+PHP): lang-php-template
  • Protocol Buffers: lang-protobuf
  • Python: lang-python, lang-py, lang-cv, (lang-gyp, lang-ipython)
  • R, S: lang-r, lang-s
  • Ruby: lang-ruby, lang-rb, (lang-gemspec, lang-podspec, lang-thor, lang-irb)
  • Rust: lang-rust, lang-rc, lang-rs
  • Scala: lang-scala
  • Scheme, Racket: lang-scheme, lang-scm, lang-ss, lang-rkt
  • SCSS: lang-scss
  • Shell session: lang-shell, (lang-console, lang-shellsession)
  • SQL: lang-sql
  • Swift: lang-swift
  • TypeScript: lang-typescript, (lang-ts, lang-tsx)
  • Visual Basic (.NET), VBScript: lang-vbnet, lang-vb, lang-vbs
  • VHDL: lang-vhdl, lang-vhd
  • XML, HTML and their derivatives: lang-xml, lang-html, lang-xsl, (lang-xhtml, lang-rss, lang-atom, lang-xjb, lang-xsd, lang-plist, lang-wsf, lang-svg)
  • YAML: lang-yaml, (lang-yml)

Any language identifiers used in a post that go unrecognized by highlight.js will be ignored and will trigger an automatic language detection.

Hinting: Tags

You can specify any tag that exists on the site, and Stack Exchange will use whatever language hint is currently associated with that tag to highlight the code block (which can be either null (no hint, no syntax highlighting), default (automatic language detection), or a specific language code). Keep in mind that by default all tags start off with null as their language hint!

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. This:

<!-- language: c -->
<pre><code>#include &lt;stdio.h>
int main() {
  printf("Hello World");
}
</code></pre>

will render as

#include <stdio.h>
int main() {
  printf("Hello World");
}

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 edit the above list manually.

  • 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 trigger an automatic language detection.
  • Not all the languages supported by highlight.js are available everywhere. The set of languages available depends on how the library is built or included.
  • Additionally, several languages that are indicated as supported in highlight.js's documentation may also not be supported by Stack Exchange version of highlight.js, as they are in separate modules which may not be deployed on Stack Exchange.

Because of these points, to update the list please use the script it was generated with and link to this script (or another Meta post which confirms an identifier's existence) in your edit summary.

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. Follow the instructions in How do I report a bug or request a new language? section to request language support.

16
  • 3
    Shouldn't there be an indicated preference (not rule) here in this answer for using either a language code or a tag name (possibly with some qualifiers)? E.g. "Prefer to use X over Y, unless Z." (Somewhat related question on MSO (in comments): What's the difference between the two code formatting styles (code-fences vs indented blocks) regarding syntax highlighting?) Oct 16 '20 at 16:00
  • 1
    and it will use whatever language code is currently associated with that tag Is there an official list of these mappings available anywhere? Oct 29 '20 at 1:05
  • Section 4, "4. Check that the tags on the question have syntax highlighting enabled", has all the info to find out @JoshGoebel Oct 29 '20 at 5:41
  • 1
    @Josh To your direct question, I don't believe there is a list anywhere currently containing all tags with associated language, however. It also doesn't look like this info is accessible using SEDE either, it's not in the tags table.
    – zcoop98
    Oct 29 '20 at 14:32
  • 6
    @Wolf The lang- prefix isn't redundant. As mentioned in the post above, ```lang-javascript tells the highlighter to use the JS highlighter directly, while ```javascript alone tells it to look at the highlighter set for the tag [javascript]. They aren't always the same (maybe most notably with [typescript] on Stack Overflow).
    – zcoop98
    Mar 11 at 16:09
  • 2
    Thanks a lot for clarifying. The post has so much text that it's hard to find this information. The tags I use obviously have the right highlighting connected to them, so it's easy to get the impression of redundancy for most people.
    – Wolf
    Mar 11 at 16:56
  • Is there a way to determine what syntax highlighting code is being applied to a given code block? For example, in instances where none of the tags are associated with language codes and so lang-default is used, I'd like to know which language highlight.js ultimately settled on based on the auto-recognition (since if I find one I like, I can manually specify it in future, as lang-default gives different results question to question even if I use the same language).
    – Greedo
    Mar 21 at 15:47
  • I don't know @Greedo - perhaps worth a separate question. Mar 22 at 13:54
  • 1
    @Greedo You can sometimes tell by inspecting the code block on page using browser dev tools- I've found it somewhat inconsistent in the past, but most of the time the selected/ detected language itself is listed as a class on the code block. (Example)
    – zcoop98
    Mar 22 at 15:00
  • I think some other particular stacks support special additional languages, for example Mathematica, vim.
    – user202729
    Oct 22 at 16:07
  • 1
    @LeonardoAlvesMachado If you want it in an enterprise version of Stack Exchange, then you're probably best off asking for it through whatever official support channel for the product. Doing so will probably have significantly more weight wrt. getting it done than anything you can post on the public network. Posting a comment is ineffective. Posting a feature-request question might be? effective, but probably not. The answer to: "Julia syntax highlighting" is the current official response for any requests for additional languages on the public network.
    – Makyen
    Nov 19 at 16:35
  • @EvgenKo423 Do you have a source for the claim that questions using only tags with no syntax highlighting identifiers will not be highlighted at all vs. highlighted with automatic detection? Also, the name of the library is "highlight.js", not "Highlight.js"; the lowercasing was intentional. Nov 22 at 19:25
  • @Sonic [1/2] Yes, it's stated in a question linked in that paragraph.
    – EvgenKo423
    Nov 23 at 8:28
  • @Sonic [2/2] As for the name, it's a library vs. project name issue (oh, I hate those projects called after the library, especially if the authors can't decide on official consistent variant...). If you take a look at Highlight.js readme you'll see that they mostly use the upper-case variant, even in a middle of a sentence. Library name is appropriate when referencing the file, while here it's being referenced as a project. And even then the real name of the library used by Stack Exchange is highlightjs-loader.en.js, not highlight.js.
    – EvgenKo423
    Nov 23 at 8:30
  • 1
    @EvgenKo423 I wasn't aware of the convention at the time I wrote the answer. The editor who added that text initially and I were going off the project's website, which uses the lowercase name. Also, I did test the highlighter's behavior and it indeed doesn't highlight if none of the tags have identifiers specified; I thought things had changed since the linked question was posted, since a then-moderator in 2014 edited in the text here that they're automatically parsed. Nov 23 at 10:13

You must log in to answer this question.

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