From cc575d6b740411d8123aed017f07904e2bb73fc0 Mon Sep 17 00:00:00 2001 From: MAEDA Go Date: Sun, 27 Sep 2026 13:40:54 +0900 Subject: [PATCH 2/2] Map the Pygments "colorful" syntax highlighting colors to similar Open Color colors --- app/assets/stylesheets/application.css | 137 +++++++++--------- app/assets/stylesheets/wiki_syntax.css | 10 +- .../stylesheets/wiki_syntax_detailed.css | 18 +-- 3 files changed, 82 insertions(+), 83 deletions(-) diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 8c452df3b..abd2fd652 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -1982,7 +1982,6 @@ div.wiki pre { overflow-x: auto; overflow-y: hidden; } -div.wiki pre .syntaxhl { background: var(--oc-gray-0); } /* Override Rouge style */ div.wiki *:not(pre)>code, div.wiki>code { background: rgba(var(--oc-gray-9-rgb), 0.08); @@ -2551,77 +2550,77 @@ div.news .reaction { .tribute-container li.highlight {background-color: var(--oc-blue-7); color:var(--oc-white);} /************* Rouge styles *************/ -/* generated by: pygmentize -f html -a .syntaxhl -S colorful */ -.syntaxhl .hll { background-color: #ffffcc } -.syntaxhl { background: #fafafa; } -.syntaxhl .c { color: #888888 } /* Comment */ -.syntaxhl .err { color: #FF0000; background-color: #FFAAAA } /* Error */ -.syntaxhl .k { color: #008800; font-weight: bold } /* Keyword */ -.syntaxhl .o { color: #333333 } /* Operator */ -.syntaxhl .ch { color: #888888 } /* Comment.Hashbang */ -.syntaxhl .cm { color: #888888 } /* Comment.Multiline */ -.syntaxhl .cp { color: #557799 } /* Comment.Preproc */ -.syntaxhl .cpf { color: #888888 } /* Comment.PreprocFile */ -.syntaxhl .c1 { color: #888888 } /* Comment.Single */ -.syntaxhl .cs { color: #cc0000; font-weight: bold } /* Comment.Special */ -.syntaxhl .gd { color: #A00000 } /* Generic.Deleted */ +/* Based on the Pygments "colorful" theme, with colors mapped to Open Color */ +.syntaxhl .hll { background-color: var(--oc-yellow-1) } +.syntaxhl { background: var(--oc-gray-0); } +.syntaxhl .c { color: var(--oc-gray-6) } /* Comment */ +.syntaxhl .err { color: var(--oc-red-8); background-color: var(--oc-red-3) } /* Error */ +.syntaxhl .k { color: var(--oc-green-9); font-weight: bold } /* Keyword */ +.syntaxhl .o { color: var(--oc-gray-8) } /* Operator */ +.syntaxhl .ch { color: var(--oc-gray-6) } /* Comment.Hashbang */ +.syntaxhl .cm { color: var(--oc-gray-6) } /* Comment.Multiline */ +.syntaxhl .cp { color: var(--oc-blue-8) } /* Comment.Preproc */ +.syntaxhl .cpf { color: var(--oc-gray-6) } /* Comment.PreprocFile */ +.syntaxhl .c1 { color: var(--oc-gray-6) } /* Comment.Single */ +.syntaxhl .cs { color: var(--oc-red-9); font-weight: bold } /* Comment.Special */ +.syntaxhl .gd { color: var(--oc-red-9) } /* Generic.Deleted */ .syntaxhl .ge { font-style: italic } /* Generic.Emph */ .syntaxhl .ges { font-weight: bold; font-style: italic } /* Generic.EmphStrong */ -.syntaxhl .gr { color: #FF0000 } /* Generic.Error */ -.syntaxhl .gh { color: #000080; font-weight: bold } /* Generic.Heading */ -.syntaxhl .gi { color: #00A000 } /* Generic.Inserted */ -.syntaxhl .go { color: #888888 } /* Generic.Output */ -.syntaxhl .gp { color: #c65d09; font-weight: bold } /* Generic.Prompt */ +.syntaxhl .gr { color: var(--oc-red-8) } /* Generic.Error */ +.syntaxhl .gh { color: var(--oc-indigo-9); font-weight: bold } /* Generic.Heading */ +.syntaxhl .gi { color: var(--oc-green-9) } /* Generic.Inserted */ +.syntaxhl .go { color: var(--oc-gray-6) } /* Generic.Output */ +.syntaxhl .gp { color: var(--oc-orange-9); font-weight: bold } /* Generic.Prompt */ .syntaxhl .gs { font-weight: bold } /* Generic.Strong */ -.syntaxhl .gu { color: #800080; font-weight: bold } /* Generic.Subheading */ -.syntaxhl .gt { color: #0044DD } /* Generic.Traceback */ -.syntaxhl .kc { color: #008800; font-weight: bold } /* Keyword.Constant */ -.syntaxhl .kd { color: #008800; font-weight: bold } /* Keyword.Declaration */ -.syntaxhl .kn { color: #008800; font-weight: bold } /* Keyword.Namespace */ -.syntaxhl .kp { color: #003388; font-weight: bold } /* Keyword.Pseudo */ -.syntaxhl .kr { color: #008800; font-weight: bold } /* Keyword.Reserved */ -.syntaxhl .kt { color: #333399; font-weight: bold } /* Keyword.Type */ -.syntaxhl .m { color: #6600EE; font-weight: bold } /* Literal.Number */ -.syntaxhl .s { background-color: #fff0f0 } /* Literal.String */ -.syntaxhl .na { color: #0000CC } /* Name.Attribute */ -.syntaxhl .nb { color: #007020 } /* Name.Builtin */ -.syntaxhl .nc { color: #BB0066; font-weight: bold } /* Name.Class */ -.syntaxhl .no { color: #003366; font-weight: bold } /* Name.Constant */ -.syntaxhl .nd { color: #555555; font-weight: bold } /* Name.Decorator */ -.syntaxhl .ni { color: #880000; font-weight: bold } /* Name.Entity */ -.syntaxhl .ne { color: #FF0000; font-weight: bold } /* Name.Exception */ -.syntaxhl .nf { color: #0066BB; font-weight: bold } /* Name.Function */ -.syntaxhl .nl { color: #997700; font-weight: bold } /* Name.Label */ -.syntaxhl .nn { color: #0e84b5; font-weight: bold } /* Name.Namespace */ -.syntaxhl .nt { color: #007700 } /* Name.Tag */ -.syntaxhl .nv { color: #996633 } /* Name.Variable */ -.syntaxhl .ow { color: #000000; font-weight: bold } /* Operator.Word */ -.syntaxhl .w { color: #bbbbbb } /* Text.Whitespace */ -.syntaxhl .mb { color: #6600EE; font-weight: bold } /* Literal.Number.Bin */ -.syntaxhl .mf { color: #6600EE; font-weight: bold } /* Literal.Number.Float */ -.syntaxhl .mh { color: #005588; font-weight: bold } /* Literal.Number.Hex */ -.syntaxhl .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */ -.syntaxhl .mo { color: #4400EE; font-weight: bold } /* Literal.Number.Oct */ -.syntaxhl .sa { background-color: #fff0f0 } /* Literal.String.Affix */ -.syntaxhl .sb { background-color: #fff0f0 } /* Literal.String.Backtick */ -.syntaxhl .sc { color: #0044DD } /* Literal.String.Char */ -.syntaxhl .dl { background-color: #fff0f0 } /* Literal.String.Delimiter */ -.syntaxhl .sd { color: #DD4422 } /* Literal.String.Doc */ -.syntaxhl .s2 { background-color: #fff0f0 } /* Literal.String.Double */ -.syntaxhl .se { color: #666666; font-weight: bold; background-color: #fff0f0 } /* Literal.String.Escape */ -.syntaxhl .sh { background-color: #fff0f0 } /* Literal.String.Heredoc */ -.syntaxhl .si { background-color: #eeeeee } /* Literal.String.Interpol */ -.syntaxhl .sx { color: #DD2200; background-color: #fff0f0 } /* Literal.String.Other */ -.syntaxhl .sr { color: #000000; background-color: #fff0ff } /* Literal.String.Regex */ -.syntaxhl .s1 { background-color: #fff0f0 } /* Literal.String.Single */ -.syntaxhl .ss { color: #AA6600 } /* Literal.String.Symbol */ -.syntaxhl .bp { color: #007020 } /* Name.Builtin.Pseudo */ -.syntaxhl .fm { color: #0066BB; font-weight: bold } /* Name.Function.Magic */ -.syntaxhl .vc { color: #336699 } /* Name.Variable.Class */ -.syntaxhl .vg { color: #dd7700; font-weight: bold } /* Name.Variable.Global */ -.syntaxhl .vi { color: #3333BB } /* Name.Variable.Instance */ -.syntaxhl .vm { color: #996633 } /* Name.Variable.Magic */ -.syntaxhl .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */ +.syntaxhl .gu { color: var(--oc-grape-9); font-weight: bold } /* Generic.Subheading */ +.syntaxhl .gt { color: var(--oc-indigo-9) } /* Generic.Traceback */ +.syntaxhl .kc { color: var(--oc-green-9); font-weight: bold } /* Keyword.Constant */ +.syntaxhl .kd { color: var(--oc-green-9); font-weight: bold } /* Keyword.Declaration */ +.syntaxhl .kn { color: var(--oc-green-9); font-weight: bold } /* Keyword.Namespace */ +.syntaxhl .kp { color: var(--oc-indigo-9); font-weight: bold } /* Keyword.Pseudo */ +.syntaxhl .kr { color: var(--oc-green-9); font-weight: bold } /* Keyword.Reserved */ +.syntaxhl .kt { color: var(--oc-indigo-9); font-weight: bold } /* Keyword.Type */ +.syntaxhl .m { color: var(--oc-violet-9); font-weight: bold } /* Literal.Number */ +.syntaxhl .s { background-color: var(--oc-red-0) } /* Literal.String */ +.syntaxhl .na { color: var(--oc-indigo-9) } /* Name.Attribute */ +.syntaxhl .nb { color: var(--oc-green-9) } /* Name.Builtin */ +.syntaxhl .nc { color: var(--oc-pink-9); font-weight: bold } /* Name.Class */ +.syntaxhl .no { color: var(--oc-indigo-9); font-weight: bold } /* Name.Constant */ +.syntaxhl .nd { color: var(--oc-gray-7); font-weight: bold } /* Name.Decorator */ +.syntaxhl .ni { color: var(--oc-red-9); font-weight: bold } /* Name.Entity */ +.syntaxhl .ne { color: var(--oc-red-8); font-weight: bold } /* Name.Exception */ +.syntaxhl .nf { color: var(--oc-blue-9); font-weight: bold } /* Name.Function */ +.syntaxhl .nl { color: var(--oc-orange-9); font-weight: bold } /* Name.Label */ +.syntaxhl .nn { color: var(--oc-blue-8); font-weight: bold } /* Name.Namespace */ +.syntaxhl .nt { color: var(--oc-green-9) } /* Name.Tag */ +.syntaxhl .nv { color: var(--oc-orange-9) } /* Name.Variable */ +.syntaxhl .ow { color: var(--oc-gray-9); font-weight: bold } /* Operator.Word */ +.syntaxhl .w { color: var(--oc-gray-5) } /* Text.Whitespace */ +.syntaxhl .mb { color: var(--oc-violet-9); font-weight: bold } /* Literal.Number.Bin */ +.syntaxhl .mf { color: var(--oc-violet-9); font-weight: bold } /* Literal.Number.Float */ +.syntaxhl .mh { color: var(--oc-violet-9); font-weight: bold } /* Literal.Number.Hex */ +.syntaxhl .mi { color: var(--oc-violet-9); font-weight: bold } /* Literal.Number.Integer */ +.syntaxhl .mo { color: var(--oc-violet-9); font-weight: bold } /* Literal.Number.Oct */ +.syntaxhl .sa { background-color: var(--oc-red-0) } /* Literal.String.Affix */ +.syntaxhl .sb { background-color: var(--oc-red-0) } /* Literal.String.Backtick */ +.syntaxhl .sc { color: var(--oc-indigo-9) } /* Literal.String.Char */ +.syntaxhl .dl { background-color: var(--oc-red-0) } /* Literal.String.Delimiter */ +.syntaxhl .sd { color: var(--oc-orange-9) } /* Literal.String.Doc */ +.syntaxhl .s2 { background-color: var(--oc-red-0) } /* Literal.String.Double */ +.syntaxhl .se { color: var(--oc-gray-7); font-weight: bold; background-color: var(--oc-red-0) } /* Literal.String.Escape */ +.syntaxhl .sh { background-color: var(--oc-red-0) } /* Literal.String.Heredoc */ +.syntaxhl .si { background-color: var(--oc-gray-2) } /* Literal.String.Interpol */ +.syntaxhl .sx { color: var(--oc-orange-9); background-color: var(--oc-red-0) } /* Literal.String.Other */ +.syntaxhl .sr { color: var(--oc-gray-9); background-color: var(--oc-grape-0) } /* Literal.String.Regex */ +.syntaxhl .s1 { background-color: var(--oc-red-0) } /* Literal.String.Single */ +.syntaxhl .ss { color: var(--oc-orange-9) } /* Literal.String.Symbol */ +.syntaxhl .bp { color: var(--oc-green-9) } /* Name.Builtin.Pseudo */ +.syntaxhl .fm { color: var(--oc-blue-9); font-weight: bold } /* Name.Function.Magic */ +.syntaxhl .vc { color: var(--oc-blue-9) } /* Name.Variable.Class */ +.syntaxhl .vg { color: var(--oc-yellow-9); font-weight: bold } /* Name.Variable.Global */ +.syntaxhl .vi { color: var(--oc-indigo-9) } /* Name.Variable.Instance */ +.syntaxhl .vm { color: var(--oc-orange-9) } /* Name.Variable.Magic */ +.syntaxhl .il { color: var(--oc-violet-9); font-weight: bold } /* Literal.Number.Integer.Long */ /***** Media print specific styles *****/ @media print { diff --git a/app/assets/stylesheets/wiki_syntax.css b/app/assets/stylesheets/wiki_syntax.css index 333f5c302..1cad8ff6e 100644 --- a/app/assets/stylesheets/wiki_syntax.css +++ b/app/assets/stylesheets/wiki_syntax.css @@ -67,11 +67,11 @@ table.sample th, table.sample td { border: solid 1px var(--oc-gray-5); padding: a, a:link, a:visited{ color: var(--oc-blue-9); text-decoration: none; } a:hover, a:active{ color: var(--oc-red-9); text-decoration: underline;} -.syntaxhl .mi { color: #0000DD; font-weight: bold } -.syntaxhl .nf { color: #0066BB; font-weight: bold } -.syntaxhl .k { color: #008800; font-weight: bold } -.syntaxhl .nb { color: #007020 } -.syntaxhl .s1 { background-color: #fff0f0 } +.syntaxhl .mi { color: var(--oc-violet-9); font-weight: bold } +.syntaxhl .nf { color: var(--oc-blue-9); font-weight: bold } +.syntaxhl .k { color: var(--oc-green-9); font-weight: bold } +.syntaxhl .nb { color: var(--oc-green-9) } +.syntaxhl .s1 { background-color: var(--oc-red-0) } span.more_info { font-weight: normal; } diff --git a/app/assets/stylesheets/wiki_syntax_detailed.css b/app/assets/stylesheets/wiki_syntax_detailed.css index bde14c578..fdecdb5d3 100644 --- a/app/assets/stylesheets/wiki_syntax_detailed.css +++ b/app/assets/stylesheets/wiki_syntax_detailed.css @@ -60,15 +60,15 @@ table.list td { background-color: var(--oc-gray-0); vertical-align: middle; padd blockquote { font-style: italic; border-inline-start: 3px solid var(--oc-gray-3); padding-inline-start: 0.6em; margin-inline-start: 0;} -.syntaxhl .c1 { color: #888888 } -.syntaxhl .k { color: #008800; font-weight: bold } -.syntaxhl .nc { color: #BB0066; font-weight: bold } -.syntaxhl .nf { color: #0066BB; font-weight: bold } -.syntaxhl .nb { color: #007020 } -.syntaxhl .vi { color: #3333BB } -.syntaxhl .o { color: #333333 } -.syntaxhl .s2 { background-color: #fff0f0 } -.syntaxhl .si { background-color: #eeeeee } +.syntaxhl .c1 { color: var(--oc-gray-6) } +.syntaxhl .k { color: var(--oc-green-9); font-weight: bold } +.syntaxhl .nc { color: var(--oc-pink-9); font-weight: bold } +.syntaxhl .nf { color: var(--oc-blue-9); font-weight: bold } +.syntaxhl .nb { color: var(--oc-green-9) } +.syntaxhl .vi { color: var(--oc-indigo-9) } +.syntaxhl .o { color: var(--oc-gray-8) } +.syntaxhl .s2 { background-color: var(--oc-red-0) } +.syntaxhl .si { background-color: var(--oc-gray-2) } .markdown-alert { -- 2.55.0