Search code examples
syntax-highlightingfirefox-developer-tools

Which syntax highlighter does Firefox Quantum Dev Tools use?


Does anyone know what kind of syntax highlighter (and what theme, if it has any) does Firefox Quantum (v57+) use in it's Inspector panel of their developer tools?

I believe it was introduced with their new Photon UI, but I'm not sure whether it's just an updated code coloring theme or a totally new coloring processor.

Their blog article: https://hacks.mozilla.org/2017/09/developer-edition-devtools-update-now-with-photon-ui/


Solution

  • As far as I know, the general tree view within the Firefox DevTools Inspector is developed by Mozilla. Though the editor used when editing a node (context menu > Edit As HTML) is CodeMirror, which is also used in other parts of the DevTools like the Debugger.

    The theme is self-created to fit to the Photon layout.