Home

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

April 2024

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

---
[dependencies]
syntect = "5.2.0"
---

#![allow(unused)]
use syntect::highlighting::ThemeSet;
use syntect::html::ClassStyle;
use syntect::html::css_for_theme_with_class_style;

fn main() {
  // comment/uncomment whichever one you
  // want to output
   //let css = generate_css("InspiredGitHub");
  let css = generate_css("Solarized (dark)");
// let css = generate_css("Solarized (light)");
//  let css = generate_css("base16-eighties.dark");
 // let css = generate_css("base16-mocha.dark");
 // let css = generate_css("base16-ocean.dark");
  //let css = generate_css("base16-ocean.light");
  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)
  }
}
Output:
/*
 * 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\2b \2b  {
 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;
}
Available Styles At Press Time
  • base16-ocean.dark
  • base16-eighties.dark
  • base16-mocha.dark
  • base16-ocean.light
  • InspiredGitHub
  • Solarized (dark)
  • Solarized (light)
end of line

Footnotes

1 ⤴

.code {

color: #d3d0c8; background-color: #2d2d2d; } .variable.parameter.function { color: #d3d0c8; } .comment, .punctuation.definition.comment { color: #747369; } .punctuation.definition.string, .punctuation.definition.variable, .punctuation.definition.string, .punctuation.definition.parameters, .punctuation.definition.string, .punctuation.definition.array { color: #d3d0c8; } .none { color: #d3d0c8; } .keyword.operator { color: #d3d0c8; } .keyword { color: #cc99cc; } .variable, .variable.other.dollar.only.js { color: #f2777a; } .entity.name.function, .meta.require, .support.function.any-method, .variable.function { color: #6699cc; } .support.class, .entity.name.class, .entity.name.type.class { color: #ffcc66; } .meta.class { color: #f2f0ec; } .keyword.other.special-method { color: #6699cc; } .storage { color: #cc99cc; } .support.function { color: #66cccc; } .string, .constant.other.symbol, .entity.other.inherited-class { color: #99cc99; } .constant.numeric { color: #f99157; } .none { color: #f99157; } .none { color: #f99157; } .constant { color: #f99157; } .entity.name.tag { color: #f2777a; } .entity.other.attribute-name { color: #f99157; } .entity.other.attribute-name.id, .punctuation.definition.entity { color: #6699cc; } .meta.selector { color: #cc99cc; } .none { color: #f99157; } .markup.heading .punctuation.definition.heading, .entity.name.section { color: #6699cc; } .keyword.other.unit { color: #f99157; } .markup.bold, .punctuation.definition.bold { color: #ffcc66; font-weight: bold; } .markup.italic, .punctuation.definition.italic { color: #cc99cc; font-style: italic; } .markup.raw.inline { color: #99cc99; } .string.other.link { color: #f2777a; } .meta.link { color: #f99157; } .meta.image { color: #f99157; } .markup.list { color: #f2777a; } .markup.quote { color: #f99157; } .meta.separator { color: #d3d0c8; background-color: #515151; } .markup.inserted, .markup.inserted.git_gutter { color: #99cc99; } .markup.deleted, .markup.deleted.git_gutter { color: #f2777a; } .markup.changed, .markup.changed.git_gutter { color: #cc99cc; } .markup.ignored, .markup.ignored.git_gutter { color: #515151; } .markup.untracked, .markup.untracked.git_gutter { color: #515151; } .constant.other.color { color: #66cccc; } .string.regexp { color: #66cccc; } .constant.character.escape { color: #66cccc; } .punctuation.section.embedded, .variable.interpolation { color: #d27b53; } .invalid.illegal { color: #2d2d2d; background-color: #f2777a; } .markup.deleted.git_gutter { color: #f92672; } .markup.inserted.git_gutter { color: #a6e22e; } .markup.changed.git_gutter { color: #967efb; } .markup.ignored.git_gutter { color: #565656; } .markup.untracked.git_gutter { color: #565656; } -- id: 2 -- url: https://docs.rs/syntect/latest/syntect/ -- title: syntect - Syntax Highlighting in Rust