Note: This site is currently "Under construction". I'm migrating to a new version of my site building software. Lots of things are in a state of disrepair as a result (for example, footnote links aren't working). It's all part of the process of building in public. Most things should still be readable though.

Live Coding Playing With Styles

Code

TODO: Figure out why this isn't working in MDX


Largely just messing around. 

This is what I was after: 

  https://xyproto.github.io/splash/docs/longer/all.html
  
`youtube: https://www.youtube.com/watch?v=Xy5GFDtUkuU`


https://github.com/alecthomas/chroma



Chroma Syntax Highlighter:

https://github.com/alecthomas/chroma

-- hr


Make a note about using the classes vs the embedding in the `<span>` elements of individual style calls.

What is a code fence?

There's even more highlight options here `https://gohugo.io/content-management/syntax-highlighting/` than on the chroma page `https://github.com/alecthomas/chroma/tree/master/styles`

Examples I was looking for are here, though they don't have the full set of codes that I'd like to see: 

    https://xyproto.github.io/splash/docs/all.html
  


-- hr


To make your own theme, 

set this in your config.toml file

  pygmentsUseClasses=true
  
Then, run this:

  hugo gen chromastyles --style=pygments > _syntax_pygments.css
  
put it in whereever you put/assemble your css and mod the attribute values.

Here's a copy of my updated pygments file:


/* XML Strings */ .language-xml { color: #444; }
/* Table Background */ .lntable { background-color: #efefef;  }
/* Background */ .chroma { }
/* Other */ .chroma .x {  }
/* Error */ .chroma .err {  }
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 1px solid #ddd; width: auto; overflow: auto; display: block; }
/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }
/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
/* Keyword */ .chroma .k { color: #008000; font-weight: bold }
/* KeywordConstant */ .chroma .kc { color: #008000; font-weight: bold }
/* KeywordDeclaration */ .chroma .kd { color: #008000; font-weight: bold }
/* KeywordNamespace */ .chroma .kn { color: #008000; font-weight: bold }
/* KeywordPseudo */ .chroma .kp { color: #008000 }
/* KeywordReserved */ .chroma .kr { color: #008000; font-weight: bold }
/* KeywordType */ .chroma .kt { color: #b00040 }
/* Name */ .chroma .n {  }
/* NameAttribute */ .chroma .na { color: #7d9029 }
/* NameBuiltin */ .chroma .nb { color: #008000 }
/* NameBuiltinPseudo */ .chroma .bp {  }
/* NameClass */ .chroma .nc { color: #0000ff; font-weight: bold }
/* NameConstant */ .chroma .no { color: #880000 }
/* NameDecorator */ .chroma .nd { color: #aa22ff }
/* NameEntity */ .chroma .ni { color: #999999; font-weight: bold }
/* NameException */ .chroma .ne { color: #d2413a; font-weight: bold }
/* NameFunction */ .chroma .nf { color: #0000ff }
/* NameFunctionMagic */ .chroma .fm {  }
/* NameLabel */ .chroma .nl { color: #a0a000 }
/* NameNamespace */ .chroma .nn { color: #0000ff; font-weight: bold }
/* NameOther */ .chroma .nx {  }
/* NameProperty */ .chroma .py {  }
/* NameTag */ .chroma .nt { color: #008000; font-weight: bold }
/* NameVariable */ .chroma .nv { color: #19177c }
/* NameVariableClass */ .chroma .vc {  }
/* NameVariableGlobal */ .chroma .vg {  }
/* NameVariableInstance */ .chroma .vi {  }
/* NameVariableMagic */ .chroma .vm {  }
/* Literal */ .chroma .l {  }
/* LiteralDate */ .chroma .ld {  }
/* LiteralString */ .chroma .s { color: #ba2121 }
/* LiteralStringAffix */ .chroma .sa { color: #ba2121 }
/* LiteralStringBacktick */ .chroma .sb { color: #ba2121 }
/* LiteralStringChar */ .chroma .sc { color: #ba2121 }
/* LiteralStringDelimiter */ .chroma .dl { color: #ba2121 }
/* LiteralStringDoc */ .chroma .sd { color: #ba2121; font-style: italic }
/* LiteralStringDouble */ .chroma .s2 { color: #801109 }
/* LiteralStringEscape */ .chroma .se { color: #bb6622; font-weight: bold }
/* LiteralStringHeredoc */ .chroma .sh { color: #ba2121 }
/* LiteralStringInterpol */ .chroma .si { color: #801109; font-weight: bold }
/* LiteralStringOther */ .chroma .sx { color: #008000 }
/* LiteralStringRegex */ .chroma .sr { color: #bb6688 }
/* LiteralStringSingle */ .chroma .s1 { color: #801109 }
/* LiteralStringSymbol */ .chroma .ss { color: #19177c }
/* LiteralNumber */ .chroma .m { color: #666666 }
/* LiteralNumberBin */ .chroma .mb { color: #666666 }
/* LiteralNumberFloat */ .chroma .mf { color: #666666 }
/* LiteralNumberHex */ .chroma .mh { color: #666666 }
/* LiteralNumberInteger */ .chroma .mi { color: #666666 }
/* LiteralNumberIntegerLong */ .chroma .il { color: #666666 }
/* LiteralNumberOct */ .chroma .mo { color: #666666 }
/* Operator */ .chroma .o { color: #666666 }
/* OperatorWord */ .chroma .ow { color: #aa22ff; font-weight: bold }
/* Punctuation */ .chroma .p {  }
/* Comment */ .chroma .c { color: #408080; font-style: italic }
/* CommentHashbang */ .chroma .ch { color: #408080; font-style: italic }
/* CommentMultiline */ .chroma .cm { color: #408080; font-style: italic }
/* CommentSingle */ .chroma .c1 { color: #408080; font-style: italic }
/* CommentSpecial */ .chroma .cs { color: #408080; font-style: italic }
/* CommentPreproc */ .chroma .cp { color: #bc7a00 }
/* CommentPreprocFile */ .chroma .cpf { color: #bc7a00 }
/* Generic */ .chroma .g {  }
/* GenericDeleted */ .chroma .gd { color: #a00000 }
/* GenericEmph */ .chroma .ge { font-style: italic }
/* GenericError */ .chroma .gr { color: #ff0000 }
/* GenericHeading */ .chroma .gh { color: #000080; font-weight: bold }
/* GenericInserted */ .chroma .gi { color: #00a000 }
/* GenericOutput */ .chroma .go { color: #888888 }
/* GenericPrompt */ .chroma .gp { color: #000080; font-weight: bold }
/* GenericStrong */ .chroma .gs { font-weight: bold }
/* GenericSubheading */ .chroma .gu { color: #800080; font-weight: bold }
/* GenericTraceback */ .chroma .gt { color: #0044dd }
/* GenericUnderline */ .chroma .gl { text-decoration: underline }
/* TextWhitespace */ .chroma .w { color: #bbbbbb }