User:Thundergnat/Syntax highlighting and CSS: Difference between revisions

← Older edit

User:Thundergnat/Syntax highlighting and CSS (view source)

Revision as of 14:05, 26 May 2023

711 bytes added , 1 year ago

m

→‎Customization: clarify

Thundergnat

10,333

edits

Revision as of 20:15, 31 August 2022 (view source) Thundergnat (talk \| contribs) m (Tweaks) ← Older edit		Latest revision as of 14:05, 26 May 2023 (view source) Thundergnat (talk \| contribs) m (→‎Customization: clarify)
(5 intermediate revisions by the same user not shown)
Line 1: ===Syntax Highlighting=== As of August 24, 2022, Rosetta Code has moved to the Miraheze wiki server farm and that has several implications for how the site looks. The largest by far is that the Mediawiki software version has jumped to version 1.38.2 (a welcome upgrade); but Mediawiki has dropped support for the Geshi syntax highlighting system (which, fair enough, has not been well maintained for a while) and moved to the [https://pygments.org/ Pygments] syntax highlighter. Pygments is pretty nice but there are a few quirks with it that bother me. I did a ~~fair amount~~bunch of research into the details of how it worked, so figured it may be useful to collect the information in one place so others may find it useful. The standard markup to highlight a block of source code in Mediawiki is Line 11 ⟶ 13: is a safe, if boring choice. It is not absolutely necessary to enclose the ~~language~~lexer name in quotes, but is highly recommended, and can head ofoff parsing confusion if other parameters are added. Speaking of which; there is an option to add automatic line numbering to highlighted blocks. (See any [[:Category:Raku\|Raku]] entry for examples.) In the markup block, add the parameter 'line', and the highlighted blocks will have automatic line numbering. Line 17 ⟶ 19: <nowiki><syntaxhighlight lang="languagename" line> Code </syntaxhighlight></nowiki> If there is not an exact dedicated lexer for your language, very often, a lexer for some other language will yield good results. The language name ~~in the~~ for the syntax highlighter '''does not''' need to match the language name in the header block. ===Supported languages=== Line 37 ⟶ 40: VBScript Verilog, SystemVerilog VHDL Visual Basic.NET Visual FoxPro Whiley Xtend XQuery Zeek Zephir Zig Remember that the lexer name is (in general) the lowercase version of the language name. The Raku lexer is "raku". The official (larger) list of languages supported by Pygments is available [https://pygments.org/languages/ here]. There are several languages that, under Geshi, had separate lexers, but using Pygments, have been remapped to use a different common lexer under the hood. You can continue to use the old name, but if you want to use the actual lexer name, the list is [https://github.com/wikimedia/mediawiki-extensions-SyntaxHighlight_GeSHi/blob/master/includes/SyntaxHighlightGeSHiCompat.php#L21 here]. ===Look and Feel=== Mediawiki provides quite a bit of customization for layout and "look & feel" available in the Appearance tab of your preferences settings page. I don't really care much for the Mediawiki default skin. (Vector) While it ''looks'' nice, I think it wastes too much space in the interest of aesthetics. I find the Monobook skin much more to my liking. (Your opinion may vary and that's OK, it's just like, my opinion, man!) ===Customization=== There are a few things about the default syntax highlighting that don't thrill me. Luckily Mediawiki makes it easy to customize skins with CSS. You can individually customize each skin, Globally across all Rosetta Code skins, or (!) globally across all Miraheze hosted Mediawiki software instances (probably not a great idea unless you are very sure of what you are doing.) ATo ~~few~~scratch ~~things~~my ~~bother me about the default syntax highlighting~~itch, so I added some customizations to the Shared CSS settings. 1. The default background color for the syntax highlighted blocks is exactly the same as for the output <code><nowiki><pre></pre></nowiki></code> blocks. Both are by default a light grey. While the grey isn't bad, I prefer that the code blocks look different than the output blocks, and I prefer a slightly lighter background color for the code blocks. Conveniently, every syntax highlighted code block has several CSS classes attached so you can easily modify elements with pretty fine control. I want to modify '''all''' of the code blocks to be distinctive from the output blocks so I added: <syntaxhighlight lang="css">.mw-highlight pre { Line 79 ⟶ 84: Number.Oct: 'mo' SoThe "mi" elements are integers, and "mf" are floating point numbers. ~~Now, the~~The classifications in Python may not match up exactly with numerics in your language. For instance, in Raku, 1.5 is a rational number not a floating point, but we can only work with what's available. Probably should include the other numerics too in our customization. <div style="background-color:#fafaf8;font-style:italic;padding:1em;margin:1em;border:solid 1px;">On a side note: Speaking of working with what's available, the Raku lexer in Pygments gets octal numbers incorrect. It treats a decimal number that starts with a zero (0) is being octal but that's a holdover from Perl. In Raku an octal number is denoted by beginning with 0o. (Much like binary is 0b and hexadecimal is 0x.) Probably should file a bug report with Pygments.</div> So. I'd like the make the numbers black instead of grey and to make them stand out a bit, I'll make them bold. Now I really only want to affect the particular language I'm mostly interested in. (Raku, if you hadn't guessed.) So I want to only apply my changes to the Raku examples. Luckily There is a class for each different highlighting lexer.▼ ▲So. I'd like the make the numbers black instead of grey and to make them stand out a bit, I'll make them bold. ~~Now~~ I really only want to affect the particular language I'm mostly interested in., (Raku, if you hadn't guessed.) ~~So I~~so want to only apply my changes to the Raku examples. Luckily ~~There~~there is a class for each different highlighting lexer. For Raku the highlighted code class is '''.mw-highlight-lang-raku'''. ===Putting it all together=== I've added these elements to my shared CSS file: Line 108 ⟶ 118: } .mw-highlight-lang-raku .momb { font-weight: bold; color: black; Line 121 ⟶ 131: Theoretically I should be able to combine all of the numerics that are sharing the same markup in to one declaration but it doesn't seem to work correctly with the site. You can look right at [[User:Thundergnat/common.css\|my shared CSS file]] any time you like. Hope this may be helpful to somebody. --[[User:Thundergnat\|Thundergnat]] ([[User talk:Thundergnat\|talk]]) 20:30, 31 August 2022 (UTC)