Colors/text decoration/font weight/font style changed because of non-scope classes #45
Description
Description
When using style = "class" in the syntax highlighting configuration, Giallo generates CSS classes without scope. Multiple distinct syntax tokens are being mapped to the same generic class names (e.g., .z-punctuation), leading to style overrides and unintended combinations (like unexpected underlines, bolding, or incorrect colors).
Steps to Reproduce
Highlighting a standard HTML block containing CSS and JavaScript:
<!doctype html>
<title>Title</title>
<style>
body {
width: 500px;
}
</style>
<script type="application/javascript">
function $init() {
return true;
}
</script>
<body>
<p checked class="title" id="title">Title</p>
<!-- here goes the rest of the page -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" rx="10" ry="10" width="200" height="200" stroke="black" fill="none" />
<foreignObject x="20" y="20" width="160" height="160">
<p>@message</p>
</foreignObject>
</svg>
</body>Config:
[markdown.highlighting]
style = "class"
theme = "tokyo-night"Actual - Highlighted by Zola/Giallo
Expected - Highlighted by TextMate
Issues
Giallo doesn't inlcude scope in the class names, therefore the CSS contains many conflicted styles for the same class:
/*
* theme "tokyo-night" generated by giallo
*/
/* z-comment */
.z-comment { font-style: italic; }
.z-comment { color: #51597D; }
/* z-punctuation */
.z-punctuation { color: #89DDFF; }
.z-punctuation { color: #51597D; }
.z-punctuation { color: #C0CAF5; font-style: italic; }
.z-punctuation { color: #C0CAF5; font-weight: bold; }
.z-punctuation { text-decoration: underline; }
.z-punctuation { color: #C0CAF5; font-weight: bold;font-style: italic; }
/* z-keyword */
.z-keyword { color: #BB9AF7; }
.z-keyword { color: #5A638C; }
/* z-variable */
.z-variable { color: #C0CAF5; }
.z-variable { color: #5A638C; }
.z-variable { color: #7DCFFF; }
.z-variable { color: #E0AF68; }
/* z-storage.z-modifier */
.z-storage.z-modifier { font-style: italic; }
.z-storage.z-modifier { color: #9D7CD8; }
/* z-storage.z-type */
.z-storage.z-type { color: #BB9AF7; }
.z-storage.z-type { font-style: italic; }
.z-storage.z-type { color: #646E9C; }
.z-storage.z-type { color: #9D7CD8; }
/* z-keyword.z-other */
.z-keyword.z-other { color: #89DDFF; }
.z-keyword.z-other { color: #7DCFFF; }
/* z-keyword.z-control */
.z-keyword.z-control { color: #BB9AF7; }
.z-keyword.z-control { color: #0DB9D7; }
.z-keyword.z-control { color: #7AA2F7; }
/* z-meta.z-tag */
.z-meta.z-tag { color: #DE5971; }
.z-meta.z-tag { color: #89DDFF; }
/* z-constant.z-character */
.z-constant.z-character { color: #BB9AF7; }
.z-constant.z-character { color: #9ECE6A; }
/* z-support.z-class */
.z-support.z-class { color: #0DB9D7; }
.z-support.z-class { color: #5A638C; }
.z-support.z-class { color: #646E9C; }
/* z-entity.z-name */
.z-entity.z-name { color: #C0CAF5; }
.z-entity.z-name { color: #89DDFF; font-weight: bold; }
.z-entity.z-name { color: #61BDF2; font-weight: bold; }
.z-entity.z-name { color: #7AA2F7; font-weight: bold; }
.z-entity.z-name { color: #6D91DE; font-weight: bold; }
.z-entity.z-name { color: #9AA5CE; font-weight: bold; }
.z-entity.z-name { color: #747CA1; font-weight: bold; }
/* z-meta.z-property-list */
.z-meta.z-property-list { color: #9ABDF5; }
.z-meta.z-property-list { color: #9ABDF5; }
/* z-markup.z-italic */
.z-markup.z-italic { color: #C0CAF5; font-style: italic; }
.z-markup.z-italic { color: #C0CAF5; font-weight: bold;font-style: italic; }