The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

Add Syntax Highlighting To Code Blocks With Classes

TODO: Pull subtitle into page object
Code
//! ```cargo
//! [dependencies]
//! syntect = "5.1.0"


use syntect::highlighting::ThemeSet;
use syntect::html::{ClassedHTMLGenerator, ClassStyle};
use syntect::html::css_for_theme_with_class_style;
use syntect::parsing::SyntaxSet;
use syntect::util::LinesWithEndings;


fn main() {

let current_code = r#"
print("a")
print("b")
for x in y:
  print(x)
"#;

let code_type = "python";

let syntax_set = SyntaxSet::load_defaults_newlines();
let syntax = syntax_set.find_syntax_by_token(code_type).unwrap();
let mut html_generator = ClassedHTMLGenerator::new_with_class_style(syntax, &syntax_set, ClassStyle::Spaced);
for line in LinesWithEndings::from(current_code) {
    let _ = html_generator.parse_html_for_line_which_includes_newline(line);
}
let output_html = html_generator.finalize();

let ts = ThemeSet::load_defaults();
let theme = &ts.themes["Solarized (light)"];
let css = css_for_theme_with_class_style(theme, ClassStyle::Spaced).unwrap();


println!("{}", output_html);
println!("{}", css);


}
Results
<span class="source python">
<span class="meta function-call python"><span class="meta qualified-name python"><span class="support function builtin python">print</span></span><span class="punctuation section arguments begin python">(</span><span class="meta function-call arguments python"><span class="meta string python"><span class="string quoted double python"><span class="punctuation definition string begin python">&quot;</span></span></span><span class="meta string python"><span class="string quoted double python">a<span class="punctuation definition string end python">&quot;</span></span></span></span><span class="punctuation section arguments end python">)</span></span>
<span class="meta function-call python"><span class="meta qualified-name python"><span class="support function builtin python">print</span></span><span class="punctuation section arguments begin python">(</span><span class="meta function-call arguments python"><span class="meta string python"><span class="string quoted double python"><span class="punctuation definition string begin python">&quot;</span></span></span><span class="meta string python"><span class="string quoted double python">b<span class="punctuation definition string end python">&quot;</span></span></span></span><span class="punctuation section arguments end python">)</span></span>
<span class="meta statement for python"><span class="keyword control flow for python">for</span> <span class="meta generic-name python">x</span> <span class="meta statement for python"><span class="keyword control flow for in python">in</span></span></span><span class="meta statement for python"> <span class="meta qualified-name python"><span class="meta generic-name python">y</span></span><span class="punctuation section block for python">:</span></span>
  <span class="meta function-call python"><span class="meta qualified-name python"><span class="support function builtin python">print</span></span><span class="punctuation section arguments begin python">(</span><span class="meta function-call arguments python"><span class="meta qualified-name python"><span class="meta generic-name python">x</span></span></span><span class="punctuation section arguments end python">)</span></span>
</span>
/*
 * theme "Solarized (light)" generated by syntect
 */

.code {
 color: #657b83;
 background-color: #fdf6e3;
}

.comment, .meta.documentation {
 color: #93a1a1;
}
.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: #586e75;
}
.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: #93a1a1;
}
.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: #ec9489;
}
.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: #586e75;
}
.meta.scope.case-block.shell, .meta.scope.case-body.shell {
 color: #586e75;
}
.punctuation.definition.logical-expression.shell {
 color: #dc322f;
}
.storage.modifier.c++ {
 color: #859900;
}
.support.function.perl {
 color: #268bd2;
}
.meta.diff, .meta.diff.header {
 color: #93a1a1;
}
.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: #eee8d5;
}
.sublimelinter.notes {
 color: #eee8d5;
 background-color: #eee8d5;
}
.sublimelinter.outline.illegal {
 color: #93a1a1;
 background-color: #93a1a1;
}
.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: #93a1a1;
}
.entity.name.filename.find-in-files {
 color: #2aa198;
}
.constant.numeric.line-number.find-in-files {
 color: #93a1a1;
}
.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: #657b83;
}

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

Add Syntax Highlighting To Code Blocks With Classes

This does classes instead of hard coded values
for the styling. It also outputs the styles that can
be used in the stylesheet. The current options are:


-- list

- base16-ocean.dark

- base16-eighties.dark

- base16-mocha.dark

- base16-ocean.light
  
- InspiredGitHub 
    
- Solarized (dark) 

- Solarized (light)




-- code
-- rust

//! ```cargo
//! [dependencies]
//! syntect = "5.1.0"


use syntect::highlighting::ThemeSet;
use syntect::html::{ClassedHTMLGenerator, ClassStyle};
use syntect::html::css_for_theme_with_class_style;
use syntect::parsing::SyntaxSet;
use syntect::util::LinesWithEndings;


fn main() {

let current_code = r#"
print("a")
print("b")
for x in y:
  print(x)
"#;

let code_type = "python";

let syntax_set = SyntaxSet::load_defaults_newlines();
let syntax = syntax_set.find_syntax_by_token(code_type).unwrap();
let mut html_generator = ClassedHTMLGenerator::new_with_class_style(syntax, &syntax_set, ClassStyle::Spaced);
for line in LinesWithEndings::from(current_code) {
    let _ = html_generator.parse_html_for_line_which_includes_newline(line);
}
let output_html = html_generator.finalize();

let ts = ThemeSet::load_defaults();
let theme = &ts.themes["Solarized (light)"];
let css = css_for_theme_with_class_style(theme, ClassStyle::Spaced).unwrap();


println!("{}", output_html);
println!("{}", css);


}

-- results/

<span class="source python">
<span class="meta function-call python"><span class="meta qualified-name python"><span class="support function builtin python">print</span></span><span class="punctuation section arguments begin python">(</span><span class="meta function-call arguments python"><span class="meta string python"><span class="string quoted double python"><span class="punctuation definition string begin python">&quot;</span></span></span><span class="meta string python"><span class="string quoted double python">a<span class="punctuation definition string end python">&quot;</span></span></span></span><span class="punctuation section arguments end python">)</span></span>
<span class="meta function-call python"><span class="meta qualified-name python"><span class="support function builtin python">print</span></span><span class="punctuation section arguments begin python">(</span><span class="meta function-call arguments python"><span class="meta string python"><span class="string quoted double python"><span class="punctuation definition string begin python">&quot;</span></span></span><span class="meta string python"><span class="string quoted double python">b<span class="punctuation definition string end python">&quot;</span></span></span></span><span class="punctuation section arguments end python">)</span></span>
<span class="meta statement for python"><span class="keyword control flow for python">for</span> <span class="meta generic-name python">x</span> <span class="meta statement for python"><span class="keyword control flow for in python">in</span></span></span><span class="meta statement for python"> <span class="meta qualified-name python"><span class="meta generic-name python">y</span></span><span class="punctuation section block for python">:</span></span>
  <span class="meta function-call python"><span class="meta qualified-name python"><span class="support function builtin python">print</span></span><span class="punctuation section arguments begin python">(</span><span class="meta function-call arguments python"><span class="meta qualified-name python"><span class="meta generic-name python">x</span></span></span><span class="punctuation section arguments end python">)</span></span>
</span>
/*
 * theme "Solarized (light)" generated by syntect
 */

.code {
 color: #657b83;
 background-color: #fdf6e3;
}

.comment, .meta.documentation {
 color: #93a1a1;
}
.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: #586e75;
}
.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: #93a1a1;
}
.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: #ec9489;
}
.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: #586e75;
}
.meta.scope.case-block.shell, .meta.scope.case-body.shell {
 color: #586e75;
}
.punctuation.definition.logical-expression.shell {
 color: #dc322f;
}
.storage.modifier.c++ {
 color: #859900;
}
.support.function.perl {
 color: #268bd2;
}
.meta.diff, .meta.diff.header {
 color: #93a1a1;
}
.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: #eee8d5;
}
.sublimelinter.notes {
 color: #eee8d5;
 background-color: #eee8d5;
}
.sublimelinter.outline.illegal {
 color: #93a1a1;
 background-color: #93a1a1;
}
.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: #93a1a1;
}
.entity.name.filename.find-in-files {
 color: #2aa198;
}
.constant.numeric.line-number.find-in-files {
 color: #93a1a1;
}
.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: #657b83;
}


-- /results


-- categories
-- rust

-- metadata
-- date: 2024-01-16 00:24:14
-- id: 2b1vcwfr
-- type: post 
-- status: published