home
NOTE: Under Construction - I'm in the middle of upgrading my site and lots of stuff is kinda broken. Please forgive the mess.

Generate Syntax Highlighting CSS For Classed Based Output Of The syntect Crate In Rust

April 2024

I like using classes instead of inline styles 1 when doing syntax highlighting use syntect 2. This is the code I use to generate the style sheet that goes along with the highlighted code:

Code
```cargo
[dependencies]
syntect = "5.2.0"
```

use syntect::highlighting::ThemeSet;
use syntect::html::ClassStyle;
use syntect::html::css_for_theme_with_class_style;


fn main() {
  let css = generate_css("Solarized (dark)");
  println!("{}", css);
}


fn generate_css(theme: &str) -> String {
  let ts = ThemeSet::load_defaults();
  if ts.themes.contains_key(theme) {
    let theme = &ts.themes[theme];
    match css_for_theme_with_class_style(theme, ClassStyle::Spaced) {
      Ok(css) => css,
      Err(_) => format!("/* could not load theme: {:?} */", theme)
    }
  } else  {
    format!("/* No theme available in syntect named: {:?} */", theme)
  }
}
Results
/*
 * theme "Solarized (dark)" generated by syntect
 */

.code {
 color: #839496;
 background-color: #002b36;
}

.comment, .meta.documentation {
 color: #586e75;
}
.string {
 color: #2aa198;
}
.string.regexp {
 color: #2aa198;
}
.constant.character.escape {
 color: #dc322f;
}
.constant.numeric {
 color: #6c71c4;
}
.variable {
 color: #268bd2;
}
.variable.function {
 color: #b58900;
}
.variable.language {
 color: #d33682;
}
.keyword {
 color: #859900;
}
.meta.import .keyword, .keyword.control.import, .keyword.control.import.from, .keyword.other.import, .keyword.control.at-rule.include, .keyword.control.at-rule.import {
 color: #cb4b16;
}
.keyword.operator.comparison, .keyword.operator.assignment, .keyword.operator.arithmetic {
 color: #657b83;
}
.storage {
 color: #859900;
}
.storage.modifier {
 color: #93a1a1;
}
.keyword.control.class, .entity.name, .entity.name.class, .entity.name.type.class {
 color: #b58900;
}
.entity.other.inherited-class {
 color: #268bd2;
}
.entity.other.attribute-name {
 color: #b58900;
}
.support, .support.type, .support.class {
 color: #859900;
}
.entity.name.function {
 color: #b58900;
}
.punctuation.definition.variable {
 color: #859900;
}
.constant, .constant.language, .meta.preprocessor {
 color: #b58900;
}
.entity.name.section {
 color: #cb4b16;
}
.support.function.construct, .keyword.other.new {
 color: #dc322f;
}
.constant.character, .constant.other {
 color: #cb4b16;
}
.entity.name.tag {
 color: #268bd2;
}
.punctuation.definition.tag.html, .punctuation.definition.tag.begin, .punctuation.definition.tag.end {
 color: #586e75;
}
.support.function {
 color: #859900;
}
.punctuation.separator.continuation {
 color: #dc322f;
}
.storage.type {
 color: #268bd2;
}
.support.type.exception {
 color: #cb4b16;
}
.keyword.other.special-method {
 color: #cb4b16;
}
.invalid {
 background-color: #6e2e32;
}
.string.quoted.double, .string.quoted.single {
 color: #2aa198;
}
.punctuation.definition.string {
 color: #839496;
}
.meta.brace.square, .punctuation.section.brackets {
 color: #268bd2;
}
.meta.brace.round, .meta.brace.curly, .punctuation.section, .punctuation.section.block, .punctuation.definition.parameters, .punctuation.section.group {
 color: #657b83;
}
.support.constant.color, .invalid.deprecated.color.w3c-non-standard-color-name.scss {
 color: #b58900;
}
.meta.selector.css {
 color: #657b83;
}
.entity.name.tag.css, .entity.name.tag.scss, .source.less .keyword.control.html.elements, .source.sass .keyword.control.untitled {
 color: #b58900;
}
.entity.other.attribute-name.class {
 color: #b58900;
}
.entity.other.attribute-name.id {
 color: #b58900;
}
.entity.other.attribute-name.pseudo-element, .entity.other.attribute-name.tag.pseudo-element, .entity.other.attribute-name.pseudo-class, .entity.other.attribute-name.tag.pseudo-class {
 color: #268bd2;
}
.text.html.basic .meta.tag.other.html, .text.html.basic .meta.tag.any.html, .text.html.basic .meta.tag.block.any, .text.html.basic .meta.tag.inline.any, .text.html.basic .meta.tag.structure.any.html, .text.html.basic .source.js.embedded.html, .punctuation.separator.key-value.html {
 color: #657b83;
}
.text.html.basic .entity.other.attribute-name.html, .meta.tag.xml .entity.other.attribute-name {
 color: #b58900;
}
.keyword.other.special-method.ruby {
 color: #859900;
}
.variable.other.constant.ruby {
 color: #b58900;
}
.constant.other.symbol.ruby {
 color: #2aa198;
}
.keyword.other.special-method.ruby {
 color: #cb4b16;
}
.meta.array .support.function.construct.php {
 color: #b58900;
}
.entity.name.function.preprocessor.c, .meta.preprocessor.c.include, .meta.preprocessor.macro.c {
 color: #cb4b16;
}
.meta.preprocessor.c.include .string.quoted.other.lt-gt.include.c, .meta.preprocessor.c.include .punctuation.definition.string.begin.c, .meta.preprocessor.c.include .punctuation.definition.string.end.c {
 color: #2aa198;
}
.other.package.exclude, .other.remove {
 color: #dc322f;
}
.other.add {
 color: #2aa198;
}
.punctuation.section.group.tex, .punctuation.definition.arguments.begin.latex, .punctuation.definition.arguments.end.latex, .punctuation.definition.arguments.latex {
 color: #dc322f;
}
.meta.group.braces.tex {
 color: #b58900;
}
.string.other.math.tex {
 color: #b58900;
}
.variable.parameter.function.latex {
 color: #cb4b16;
}
.punctuation.definition.constant.math.tex {
 color: #dc322f;
}
.text.tex.latex .constant.other.math.tex, .constant.other.general.math.tex, .constant.other.general.math.tex, .constant.character.math.tex {
 color: #2aa198;
}
.string.other.math.tex {
 color: #b58900;
}
.punctuation.definition.string.begin.tex, .punctuation.definition.string.end.tex {
 color: #dc322f;
}
.keyword.control.label.latex, .text.tex.latex .constant.other.general.math.tex {
 color: #2aa198;
}
.variable.parameter.definition.label.latex {
 color: #dc322f;
}
.support.function.be.latex {
 color: #859900;
}
.support.function.section.latex {
 color: #cb4b16;
}
.support.function.general.tex {
 color: #2aa198;
}
.keyword.control.ref.latex {
 color: #2aa198;
}
.storage.type.class.python, .storage.type.function.python, .storage.modifier.global.python {
 color: #859900;
}
.support.type.exception.python {
 color: #b58900;
}
.meta.scope.for-in-loop.shell, .variable.other.loop.shell {
 color: #93a1a1;
}
.meta.scope.case-block.shell, .meta.scope.case-body.shell {
 color: #93a1a1;
}
.punctuation.definition.logical-expression.shell {
 color: #dc322f;
}
.storage.modifier.c++ {
 color: #859900;
}
.support.function.perl {
 color: #268bd2;
}
.meta.diff, .meta.diff.header {
 color: #586e75;
}
.meta.diff.range {
 color: #268bd2;
}
.markup.deleted {
 color: #dc322f;
}
.markup.changed {
 color: #2aa198;
}
.markup.inserted {
 color: #859900;
}
.markup.heading, .punctuation.definition.heading.markdown {
 color: #b58900;
}
.markup.quote {
 color: #859900;
}
.markup.italic {
font-style: italic;
}
.markup.bold {
font-weight: bold;
}
.markup.underline.link.markdown, .meta.link.reference .constant.other.reference.link.markdown {
 color: #2aa198;
}
.constant.other.reference.link.markdown {
 color: #6c71c4;
}
.meta.paragraph.markdown .meta.dummy.line-break {
 background-color: #586e75;
}
.sublimelinter.notes {
 color: #586e75;
 background-color: #586e75;
}
.sublimelinter.outline.illegal {
 color: #586e75;
 background-color: #586e75;
}
.sublimelinter.underline.illegal {
 background-color: #dc322f;
}
.sublimelinter.outline.warning {
 color: #839496;
 background-color: #839496;
}
.sublimelinter.underline.warning {
 background-color: #b58900;
}
.sublimelinter.outline.violation {
 color: #657b83;
 background-color: #657b83;
}
.sublimelinter.underline.violation {
 background-color: #cb4b16;
}
.sublimelinter.mark.warning {
 color: #b58900;
}
.sublimelinter.mark.error {
 color: #dc322f;
}
.sublimelinter.gutter-mark {
 color: #657b83;
}
.brackethighlighter.all {
 color: #586e75;
}
.entity.name.filename.find-in-files {
 color: #2aa198;
}
.constant.numeric.line-number.find-in-files {
 color: #586e75;
}
.markup.deleted.git_gutter {
 color: #dc322f;
}
.markup.inserted.git_gutter {
 color: #859900;
}
.markup.changed.git_gutter {
 color: #b58900;
}
.variable.other.readwrite.js, .variable.other.object.js, .variable.other.constant.js {
 color: #839496;
}
  • base16-ocean.dark

  • base16-eighties.dark

  • base16-mocha.dark

  • base16-ocean.light

  • InspiredGitHub

  • Solarized (dark)

  • Solarized (light)

═══ § ═══

Footnotes And References

  • 1
  • 2

    syntect - Syntax Highlighting in Rust