Demo code sample for skylighting/KDE syntax highlighting themes?

Demo code sample for skylighting/KDE syntax highlighting themes?

[Gwern Branwen]

Are there any code samples which exercise all of the defined syntax
classes & colors defined in the syntax highlighting themes provided by
Pandoc via skylighting from KDE Kate's editor themes?

I was revising the syntax highlighting for gwern.net and none of the
defaults (pygments/tango/espresso/zenburn/kate/monochrome/breezedark/haddock)
seems visually suited. Browsing through pygments, I found the
algol/alglol_nu was a good approach and loosely cloned it (you can see
it at https://www.gwern.net/Lorem#code-blocks currently). But while
modifying the CSS, there were a number of classes I had no idea how to
test modifications to.

For example, the 're' CSS class is commented as 'RegionMarker', and
checking KDE docs, this appears to denote a 'region of code' in a
code-folding sense, although it's unclear if this is for adding a
placemarker for code that has been collapsed or could be collapsed.
However, this class appears nowhere in any of the code blocks I have
on gwern.net already, and I have no idea what would trigger it in any
Haskell or Python etc codeblocks. There are a couple of other classes
which puzzle me likewise, like 'in' ("Information"). Given the origin,
I wonder if a lot of these classes are meaningless outside a text
editor, generated simply because it's simpler to convert all of a
theme instead of only the ones relevant to Pandoc-generated documents,
and colors don't need to be chosen for them at all (unless one intends
to upstream it all the way to a text editor)?

Is there any code sample anywhere in any language which shows what all
of these classes *look like* in a reasonably natural context to let me
judge if my current algol_nu-like theme works overall? Or a list of
which ones are just dead code I can omit, letting me hand-construct a
code sample exercising the live classes? Right now I have dumped a
list of <span>s with CSS classes, one for each class, but that's not
much of a solution.

-- 
gwern

Re: Demo code sample for skylighting/KDE syntax highlighting themes?

[John MacFarlane]

Gwern Branwen <gwern-v26ZT+9V8bxeoWH0uzbU5w@public.gmane.org> writes:

> For example, the 're' CSS class is commented as 'RegionMarker', and
> checking KDE docs, this appears to denote a 'region of code' in a
> code-folding sense, although it's unclear if this is for adding a
> placemarker for code that has been collapsed or could be collapsed.
> However, this class appears nowhere in any of the code blocks I have
> on gwern.net already, and I have no idea what would trigger it in any
> Haskell or Python etc codeblocks.

Probably nothing. Remember, these definitions are designed for
a text editor, which would have folded sections.  That isn't
relevant to the use we make.

> of these classes *look like* in a reasonably natural context to let me
> judge if my current algol_nu-like theme works overall? Or a list of

Nothing I know of.  But if you try with a few samples of code
in the languages you use, you should get a good enough idea.

Re: Demo code sample for skylighting/KDE syntax highlighting themes?

[Gwern Branwen]

> Probably nothing. Remember, these definitions are designed for
> a text editor, which would have folded sections.  That isn't
> relevant to the use we make.

I figured as much. Is there a list of which ones we *do* use? It might
be good to have skylighting filter them out - not because we care
about a few lines of dead CSS shipping in every Pandoc doc, but
because it's unnecessarily confusing and clutters the namespace

> > of these classes *look like* in a reasonably natural context to let me
> > judge if my current algol_nu-like theme works overall? Or a list of
>
> Nothing I know of.  But if you try with a few samples of code
> in the languages you use, you should get a good enough idea.

Sure, that's what we did, but we're slightly perfectionist so the lack
of coverage bothers us; and it is much easier, when making changes in
the future, to look over a small compact example constructed to
exercise all of the syntax highlighting classes, than to look over a
bunch of highly redundant code. (My /Lorem page exists basically as a
set of unit and integration tests, systematically exercising all of
our Markdown/CSS/JS/HTML features and including various bug-triggering
testcases we've found along the way, and makes development much easier
and more reliable if we can simply scan over /Lorem each time, looking
for something visibly wrong.)

-- 
gwern
https://www.gwern.net

Re: Demo code sample for skylighting/KDE syntax highlighting themes?

[Gwern Branwen]

To figure out which classes are dead, I search the compiled gwern.net
HTML, because I have a lot of snippets in many languages, making it a
decent test case. I found ~8 classes with no instances, but on looking
carefully into the syntax highlighting XML files for users, I found
that all 8 appear to be valid in at least one language, somehow. They
are mostly just extremely specific: several of them are
Doxygen-specific, used only by a handful of languages, require comment
formatting conventions I'm not sure I've seen before (eg
'//BEGIN...//END'), or are specific to a feature
(heredocs/regexps/unescaped-strings being common).

So while I suspect some of these classes may never have been used by
any Pandoc user ever, I can't guarantee that. (I'll be removing
several of them from my own CSS, however, as I'm quite sure I won't
suddenly start writing raw strings in Metafont code samples.) And
given how non-overlapping a lot of the classes seem to be across
languages, it might be hard to construct a single example in a single
language which triggers *all* of them.

----

Detailed examination with the KDE docs, some of the XML hits, and
triggering code samples:

1. code span.re { color:
var(--GW-syntax-highlight-color-region-marker); background-color:
var(--GW-syntax-highlight-background-color-region-marker); } /*
RegionMarker */

Looking up the terse descriptions in the docs:
https://docs.kde.org/stable5/en/applications/katepart/highlight.html

> dsRegionMarker, region markers like //BEGIN, //END in comments.

$ egrep 'attribute="Region Marker".*beginRegion=' *
ada.xml:        <StringDetect attribute="Region Marker"
context="Region Marker" String="--  BEGIN" beginRegion="RegionMarker"
firstNonSpace="true" />
alert.xml:        <StringDetect attribute="Region Marker"
context="#stay" String="{{{" beginRegion="AlertRegion1" />
alert.xml:        <WordDetect attribute="Region Marker"
context="#stay" String="BEGIN" beginRegion="AlertRegion2" />
cmake.xml:        <RegExpr attribute="Region Marker" context="#pop!RST
Documentation" String="^#\[(=*)\[\.rst:" column="0"
beginRegion="RSTDocumentation" />
commonlisp.xml:        <RegExpr attribute="Region Marker"
context="#stay" String=";+\s*BEGIN.*$" beginRegion="region"/>
css.xml:                <RegExpr attribute="Region Marker"
context="#pop" String="/\*\s*BEGIN\b.*\*/" beginRegion="UserDefined"
/>
c.xml:        <StringDetect attribute="Region Marker"
context="#pop!Region Marker" String="//BEGIN" beginRegion="Region1"
firstNonSpace="true" />
d.xml:        <StringDetect attribute="Region Marker" context="Region
Marker" String="//BEGIN" beginRegion="Region1" firstNonSpace="true" />
fsharp.xml:        <keyword attribute="Region Marker" context="Block"
String="begin" beginRegion="block"/>
fsharp.xml:        <keyword attribute="Region Marker" context="Object"
String="object" beginRegion="object"/>
fsharp.xml:        <keyword attribute="Region Marker" context="Sig"
String="sig" beginRegion="sig"/>
fsharp.xml:        <keyword attribute="Region Marker" context="Struct"
String="struct" beginRegion="struct"/>
isocpp.xml:        <StringDetect attribute="Region Marker"
context="#pop!Region Marker" String="//BEGIN" beginRegion="Region1"
firstNonSpace="true" />
javascript.xml:        <StringDetect attribute="Region Marker"
context="#pop!region_marker" String="//BEGIN" beginRegion="Region1" />
latex.xml:        <RegExpr String="&#037;+\s*BEGIN\b"
attribute="Region Marker" context="RegionComment" firstNonSpace="true"
beginRegion="region-marker"/>
mips.xml:        <RegExpr attribute="Region Marker" context="#stay"
String="#\s*BEGIN.*$" beginRegion="region" firstNonSpace="true"/>
objectivecpp.xml:        <StringDetect attribute="Region Marker"
context="#pop!Region Marker" String="//BEGIN" beginRegion="Region1"
firstNonSpace="true" />
opencl.xml:        <StringDetect attribute="Region Marker"
context="#pop!Region Marker" String="//BEGIN" beginRegion="Region1"
firstNonSpace="true" />
povray.xml:                <RegExpr attribute="Region Marker"
context="#stay" String="//\s*BEGIN.*$" beginRegion="Region1"
firstNonSpace="true"/>
purebasic.xml:        <RegExpr attribute="Region Marker"
context="#stay" String="^\s*;+\s*BEGIN.*$" beginRegion="marker"/>
scheme.xml:        <RegExpr attribute="Region Marker" context="#pop"
String=";+\s*BEGIN\b.*" beginRegion="region"/>
tcl.xml:        <RegExpr attribute="Region Marker" context="#stay"
String="#\s*BEGIN.*$" beginRegion="region" firstNonSpace="true"/>
xul.xml:     <StringDetect attribute="Region Marker"
context="region_marker" String="//BEGIN" beginRegion="Region1"/>

~~~{.C}
//BEGIN
//END
~~~

→

<div class="sourceCode" id="cb1"><pre class="sourceCode C"><code
class="sourceCode c"><span class="re">//BEGIN</span>
<span class="re">//END</span></code></pre></div>

2. code span.an { color: var(--GW-syntax-highlight-color-annotation);
font-style: italic } /* Annotation */
2. code span.cv { color: var(--GW-syntax-highlight-color-comment-var);
font-style: italic } /* CommentVar */

> dsCommentVar, the variable names used in above commands, like "foobar" in @param foobar.
> dsAnnotation, documentation commands like @param, @brief.

$ fgrep dsCommentVar *
doxygenlua.xml:      <itemData name="Word"
defStyleNum="dsCommentVar" bold="1" italic="0" />
doxygen.xml:      <itemData name="Word"
defStyleNum="dsCommentVar" bold="1" italic="0" />
language.xsd:      - dsCommentVar, used for variables in comments,
e.g. after @param in doxygen
language.xsd:      <xs:enumeration value="dsCommentVar"/>
modelines.xml:    <itemData name="Variable" defStyleNum="dsCommentVar"
spellChecking="false" />

~~~{.C}
//BEGIN
/// @param foobar
//END
#include <stdio.h>
int main() {
   // printf() displays the string inside quotation
   printf("Hello, World!");
   return 0;
}
~~~

→

<div class="sourceCode" id="cb1"><pre class="sourceCode C"><code
class="sourceCode c"><span class="re">//BEGIN</span>
<span class="co">/// </span><span class="an">@param</span><span
class="co"> </span><span class="cv">foobar</span>
<span class="re">//END</span>
<span class="pp">#include </span><span class="im">&lt;stdio.h&gt;</span>
<span class="dt">int</span> main() {
   <span class="co">// printf() displays the string inside quotation</span>
   printf(<span class="st">&quot;Hello, World!&quot;</span>);
   <span class="cf">return</span> <span class="dv">0</span>;
}</code></pre></div>

3. code span.do { color:
var(--GW-syntax-highlight-color-documentation); } /* Documentation */

> dsDocumentation, /** Documentation comments */ or """docstrings""".

./doxygenlua.xml:426:      <itemData name="Description"
defStyleNum="dsDocumentation" />
./nim.xml:342:            <itemData name="DocComment"
defStyleNum="dsDocumentation" spellChecking="true"/>
./doxygen.xml:609:      <itemData name="Description"
defStyleNum="dsDocumentation" />
./clojure.xml:862:      <itemData name="Documentation"
defStyleNum="dsDocumentation"/>
./language.xsd:71:      - dsDocumentation, used for comments that are
API documentation
./language.xsd:106:      <xs:enumeration value="dsDocumentation"/>
./d.xml:925:      <itemData name="Ddoc"
defStyleNum="dsDocumentation" /> <!-- #7f7fff -->
./maxima.xml:1886:            <itemData name="Quote"
defStyleNum="dsDocumentation" bold="true"/>
./curry.xml:333:    <itemData name="Currydoc"
defStyleNum="dsDocumentation" />
./r.xml:150:        <itemData name="Headline"
defStyleNum="dsDocumentation" bold="1"/>
./ruby.xml:922:            <itemData name="Here Document"
defStyleNum="dsDocumentation"/>

4. code span.bn { color: var(--GW-syntax-highlight-color-base-n);
font-weight: bold; } /* BaseN */

> dsBaseN, values with a base other than 10.

Easily triggered by adding octal, hex, and scientific-notation literals:

~~~{.Haskell}
10 + 10.0 + 10e0 + 0o10 + 0x10
-- → 54.0
~~~

<div class="sourceCode" id="cb1"><pre class="sourceCode Haskell"><code
class="sourceCode haskell"><span class="dv">10</span> <span
class="op">+</span> <span class="fl">10.0</span> <span
class="op">+</span> <span class="fl">10e0</span> <span
class="op">+</span> <span class="bn">0o10</span> <span
class="op">+</span> <span class="bn">0x10</span>
<span class="co">-- → 54.0</span></code></pre></div>

5. code span.vs { color:
var(--GW-syntax-highlight-color-verbatim-string); font-style: italic;
} /* VerbatimString */

> dsVerbatimString, verbatim or raw strings like 'raw \backlash' in Perl, CoffeeScript, and shells, as well as r'\raw' in Python.

./boo.xml:301:            <itemData name="Raw String"
defStyleNum="dsVerbatimString"/>
./coffee.xml:340:      <itemData name="JavaScript Template"
defStyleNum="dsVerbatimString"/>
./coldfusion.xml:703:            <itemData name="Style Values"
defStyleNum="dsVerbatimString" /> <!-- #ff0000 -->
./d.xml:915:      <itemData name="RawString"
defStyleNum="dsVerbatimString"/>
./d.xml:919:      <itemData name="Delimited String Content"
defStyleNum="dsVerbatimString"/>
./elixir.xml:208:      <itemData defStyleNum="dsVerbatimString"
name="Raw String"/>
./javascript-react.xml:406:        <itemData name="Template"
defStyleNum="dsVerbatimString" />
./javascript.xml:2024:      <itemData name="Template"
defStyleNum="dsVerbatimString" />
./language.xsd:60:      - dsVerbatimString, used for strings such as HERE docs
./language.xsd:97:      <xs:enumeration value="dsVerbatimString"/>
./latex.xml:996:      <itemData name="Verbatim"
defStyleNum="dsVerbatimString" spellChecking="false"/>
./lua.xml:601:      <itemData name="RawStrings"
defStyleNum="dsVerbatimString"/>
./lua.xml.patch:5:       <itemData name="RawStrings"
defStyleNum="dsVerbatimString"/>
./metafont.xml:960:      <itemData name="Verbatim"
defStyleNum="dsVerbatimString"/>
./mustache.xml:467:        <itemData name="JS: Template"
defStyleNum="dsVerbatimString" />
./powershell.xml:931:      <itemData name="HereString"
defStyleNum="dsVerbatimString"/>
./python.xml:673:            <itemData name="Raw String"
defStyleNum="dsVerbatimString"/>
./python.xml:675:            <itemData name="Raw F-String"
defStyleNum="dsVerbatimString"/>
./rhtml.xml:1198:            <itemData name="Raw String"
defStyleNum="dsVerbatimString"/> <!-- #DD4A4A -->
./ruby.xml:899:            <itemData name="Raw String"
defStyleNum="dsVerbatimString" /> <!-- #DD4A4A -->
./toml.xml:121:        <itemData name="LitString"
defStyleNum="dsVerbatimString"/>
./typescript.xml:734:        <itemData name="Template"
defStyleNum="dsVerbatimString" />

~~~{.Python}
print(r'Hello world!')
~~~

→

<div class="sourceCode" id="cb1"><pre class="sourceCode Python"><code
class="sourceCode python"><span class="bu">print</span>(<span
class="vs">r&#39;Hello world!&#39;</span>)</code></pre></div>

6. code span.wa { color: var(--GW-syntax-highlight-color-warning); }
/* Warning */

> dsWarning, warnings like @warning in doxygen.

./rhtml.xml:1196:            <itemData name="Symbol"
defStyleNum="dsWarning" bold="0" underline="0" spellChecking="false"/>
<!-- #D40000 -->
./doxygenlua.xml:438:      <itemData name="Warning"
defStyleNum="dsWarning" bold="1" italic="0" />
./modula-2.xml:115:  Unsafe => dsWarning, bold
./modula-2.xml:1162:        defStyleNum="dsWarning" bold="1" italic="0"/>
./perl.xml:865:      <itemData name="Special Variable"
defStyleNum="dsWarning" bold="0" italic="0" /> <!-- #C00000 -->
./doxygen.xml:621:      <itemData name="Warning"
defStyleNum="dsWarning" bold="1" italic="0" />
./povray.xml:943:            <itemData name="Objects"
defStyleNum="dsWarning"      bold="0" spellChecking="false" /> <!--
#800000 -->
./language.xsd:76:      - dsWarning,  used for warnings in comments,
e.g. @warning in doxygen
./language.xsd:111:      <xs:enumeration value="dsWarning"/>
./d.xml:871:      <itemData name="Declarator"
defStyleNum="dsWarning"    bold="1"/> <!-- #800000 -->
./coldfusion.xml:687:            <itemData name="Script Tags"
defStyleNum="dsWarning" bold="1" spellChecking="false" /> <!-- #800000
-->
./ruby.xml:897:            <itemData name="Symbol"
defStyleNum="dsWarning" bold="0" underline="0"/> <!-- #D40000 -->

./doxygenlua.xml:208:      <item>\warning</item>          <item>@warning</item>
./doxygen.xml:198:      <item>\warning</item>          <item>@warning</item>
./language.xsd:76:      - dsWarning,  used for warnings in comments,
e.g. @warning in doxygen

~~~{.C}
...
/// @warning This is a warning.
...
~~~

→

<span class="co">/// </span><span class="wa">@warning</span><span
class="co"> This is a warning.</span>

7. code span.ss { color:
var(--GW-syntax-highlight-color-special-string); font-weight: bold;
font-style: italic } /* SpecialString */

> dsSpecialString, SQL, regexes, HERE docs, LaTeX math mode, ...

./actionscript.xml:325:      <itemData name="String Char"
defStyleNum="dsSpecialString"/>
./awk.xml:277:      <itemData name="Regex"
defStyleNum="dsSpecialString" spellChecking="false"/>
./clojure.xml:860:      <itemData name="Regexpr" defStyleNum="dsSpecialString"/>
./d.xml:916:      <itemData name="BQString"
defStyleNum="dsSpecialString"/>
./d.xml:917:      <itemData name="HexString"
defStyleNum="dsSpecialString"/>
./javascript.xml:2030:      <itemData name="Regular Expression"
defStyleNum="dsSpecialString" spellChecking="false" />
./julia.xml:690:      <itemData name="Command String"
defStyleNum="dsSpecialString"/>
./language.xsd:61:      - dsSpecialString, used for strings such as
regular expressions or LaTeX math mode
./language.xsd:98:      <xs:enumeration value="dsSpecialString"/>
./latex.xml:1004:      <itemData name="Sectioning Math"
defStyleNum="dsSpecialString" bold="1"/>
./latex.xml:989:      <itemData name="Math"
defStyleNum="dsSpecialString" spellChecking="false"/>
./makefile.xml:501:      <itemData name="VarModifier"
defStyleNum="dsSpecialString" spellChecking="0"/>
./markdown.xml:600:      <itemData name="List"
defStyleNum="dsSpecialString" bold="1" spellChecking="false"/>
./markdown.xml:601:      <itemData name="Number List"
defStyleNum="dsSpecialString" spellChecking="false"/>
./matlab.xml:153:      <itemData name="CharVector"
defStyleNum="dsSpecialString" />
./perl.xml:871:      <itemData name="String"
defStyleNum="dsSpecialString" /> <!-- #FF6C6C -->
./python.xml:674:            <itemData name="F-String"
defStyleNum="dsSpecialString"/>
./rhtml.xml:1201:            <itemData name="Regular Expression"
defStyleNum="dsSpecialString" spellChecking="false"/> <!-- #4A5704 -->
./ruby.xml:902:            <itemData name="Regular Expression"
defStyleNum="dsSpecialString"/> <!-- #4A5704 -->

~~~{.Python}
name = "Eric"
age = 74
f"Hello, {name}. You are {age}."
# 'Hello, Eric. You are 74.'
~~~

→

<div class="sourceCode" id="cb1"><pre class="sourceCode Python"><code
class="sourceCode python">name <span class="op">=</span> <span
class="st">&quot;Eric&quot;</span>
age <span class="op">=</span> <span class="dv">74</span>
<span class="ss">f&quot;Hello, </span><span
class="sc">{</span>name<span class="sc">}</span><span class="ss">. You
are </span><span class="sc">{</span>age<span class="sc">}</span><span
class="ss">.&quot;</span>
<span class="co"># &#39;Hello, Eric. You are 74.&#39;</span></code></pre></div>



-- 
gwern
https://www.gwern.net

-- 
You received this message because you are subscribed to the Google Groups "pandoc-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To view this discussion on the web visit https://groups.google.com/d/msgid/pandoc-discuss/CAMwO0gzjY4Tn_NxEUo2bRyci4%2BC9zsEwRmrREUSpH_U_fj1tNw%40mail.gmail.com.