Code syntax coloring

[.oisyn]

(Ik kan me herinneren dat hier al een topic over bestond, maar die kan ik dus nergens vinden )
Er was al eerder getornd aan de kleuren van de syntax highlighting in code, maar nu gaat het echt nergens meer over.

C++:

static const unsigned cWidth = 100, cHeight = 100;
unsigned arr[cWidth * cHeight];

void update()
{
    // move all rows up
    memmove(arr, arr + cWidth, cWidth * (cHeight - 1) * sizeof(unsigned));

    unsigned * pBottom = arr + (cHeight - 1) * cWidth;

    // draw red line on next-to-last row
    for (unsigned i = x1, i <= x2, x++)
        pBottom[i - cWidth] = 0xff0000ff;

    // ...
}

Er zit amper contrast in de verschillende tokens.

Ter vergelijking, dit was hoe het eruit zag voor dat de code highligher werd gereplaced door het huidige systeem: .oisyn in "De Devschuur Coffee Corner - Iteratie 7"

[crisp]

We hebben nav de discussie in CA de GitHub styling geimplementeerd. Als je een betere suggestie hebt be my guest; hier zijn de verschillende beschikbare themes: http://richleland.github.io/pygments-css/

[.oisyn]

fruity

.edit: hey, nu ik die fruity heb gebruikt als custom stylesheet, is de oude post waar ik naar link ineens ook in de nieuwe kleuren. Voorheen was dat niet zo. Zijn die dingen opnieuw geparsed oid?

[ Voor 91% gewijzigd door .oisyn op 08-10-2014 15:06 ]

[crisp]

.oisyn schreef op woensdag 08 oktober 2014 @ 14:51:
fruity

.edit: hey, nu ik die fruity heb gebruikt als custom stylesheet, is de oude post waar ik naar link ineens ook in de nieuwe kleuren. Voorheen was dat niet zo. Zijn die dingen opnieuw geparsed oid?

Ja, ik heb alle code die met de nieuwe highlighter is gegenereerd opnieuw laten parsen

[_eXistenZ_]

Fruity is wel erg nice ja, maar vim zou ook nice zijn! Feature request: iedereen kan z'n eigen CSS kiezen voor de parser. Kwestie van parsen naar spans met color1, color2, etc. en deze default al een kleurtje geven, maar makkelijk overridebaar maken door een dropdown in je profiel, waarmee een ander stukkie CSS ingeladen wordt die de code anders highlight.

Hoef je ook niks meer opnieuw te parsen, ever.

[ Voor 16% gewijzigd door _eXistenZ_ op 08-10-2014 21:50 ]

[.oisyn]

crisp schreef op woensdag 08 oktober 2014 @ 15:18:
[...]

Ja, ik heb alle code die met de nieuwe highlighter is gegenereerd opnieuw laten parsen

Als ik een beetje door oude topics blader zie ik echter nog zat oude-stijl posts tussen opnieuw geparste posts staan.

Zie bijvoorbeeld RobIII in "[alg] Slechtste programmeervoorbeelden deel 5". Die post gebruikt de oude highlighter, terwijl de post erboven wel goed is

[_David_]

_eXistenZ_ schreef op woensdag 08 oktober 2014 @ 21:49:
Fruity is wel erg nice ja, maar vim zou ook nice zijn! Feature request: iedereen kan z'n eigen CSS kiezen voor de parser. Kwestie van parsen naar spans met color1, color2, etc. en deze default al een kleurtje geven, maar makkelijk overridebaar maken door een dropdown in je profiel, waarmee een ander stukkie CSS ingeladen wordt die de code anders highlight.

Hoef je ook niks meer opnieuw te parsen, ever.

Er was ook een setting voor verschillende soorten kleuren, maar die is weggehaald (waarschijnlijk omdat ze van al die layout settings af willen)

Je kan gewoon een import in je custom css doen als je een ander kleurtje wilt, lijkt mij een prima oplossing.

[.oisyn]

Hier is Fruity gemodificeerd voor gebruik op t.net, met een lichte aanpassing (niet alle background-colors waren gelijk, zo hadden comments een donkerdere achtergrond - dat vond ik wat storend)

Cascading Stylesheet:

.phphighlightcode pre { background-color: #333333 !important; color: white !important; }

.phphighlightcode .code_c { color: #00aa00; font-style: italic; } /* Comment */
.phphighlightcode .code_err { color: #ffffff } /* Error */
.phphighlightcode .code_g { color: #ffffff } /* Generic */
.phphighlightcode .code_k { color: #fb660a; font-weight: bold } /* Keyword */
.phphighlightcode .code_l { color: #ffffff } /* Literal */
.phphighlightcode .code_n { color: #ffffff } /* Name */
.phphighlightcode .code_o { color: #ffffff } /* Operator */
.phphighlightcode .code_x { color: #ffffff } /* Other */
.phphighlightcode .code_p { color: #ffffff } /* Punctuation */
.phphighlightcode .code_cm { color: #00aa00; font-style: italic; } /* Comment.Multiline */
.phphighlightcode .code_cp { color: #ff0007; font-weight: bold; font-style: italic; } /* Comment.Preproc */
.phphighlightcode .code_c1 { color: #00aa00; font-style: italic; } /* Comment.Single */
.phphighlightcode .code_cs { color: #00aa00; font-style: italic; } /* Comment.Special */
.phphighlightcode .code_gd { color: #ffffff } /* Generic.Deleted */
.phphighlightcode .code_ge { color: #ffffff } /* Generic.Emph */
.phphighlightcode .code_gr { color: #ffffff } /* Generic.Error */
.phphighlightcode .code_gh { color: #ffffff; font-weight: bold } /* Generic.Heading */
.phphighlightcode .code_gi { color: #ffffff } /* Generic.Inserted */
.phphighlightcode .code_go { color: #444444; background-color: #222222 } /* Generic.Output */
.phphighlightcode .code_gp { color: #ffffff } /* Generic.Prompt */
.phphighlightcode .code_gs { color: #ffffff } /* Generic.Strong */
.phphighlightcode .code_gu { color: #ffffff; font-weight: bold } /* Generic.Subheading */
.phphighlightcode .code_gt { color: #ffffff } /* Generic.Traceback */
.phphighlightcode .code_kc { color: #fb660a; font-weight: bold } /* Keyword.Constant */
.phphighlightcode .code_kd { color: #fb660a; font-weight: bold } /* Keyword.Declaration */
.phphighlightcode .code_kn { color: #fb660a; font-weight: bold } /* Keyword.Namespace */
.phphighlightcode .code_kp { color: #fb660a } /* Keyword.Pseudo */
.phphighlightcode .code_kr { color: #fb660a; font-weight: bold } /* Keyword.Reserved */
.phphighlightcode .code_kt { color: #cdcaa9; font-weight: bold } /* Keyword.Type */
.phphighlightcode .code_ld { color: #ffffff } /* Literal.Date */
.phphighlightcode .code_m { color: #0086f7; font-weight: bold } /* Literal.Number */
.phphighlightcode .code_s { color: #0086d2 } /* Literal.String */
.phphighlightcode .code_na { color: #ff0086; font-weight: bold } /* Name.Attribute */
.phphighlightcode .code_nb { color: #ffffff } /* Name.Builtin */
.phphighlightcode .code_nc { color: #ffffff } /* Name.Class */
.phphighlightcode .code_no { color: #0086d2 } /* Name.Constant */
.phphighlightcode .code_nd { color: #ffffff } /* Name.Decorator */
.phphighlightcode .code_ni { color: #ffffff } /* Name.Entity */
.phphighlightcode .code_ne { color: #ffffff } /* Name.Exception */
.phphighlightcode .code_nf { color: #ff0086; font-weight: bold } /* Name.Function */
.phphighlightcode .code_nl { color: #ffffff } /* Name.Label */
.phphighlightcode .code_nn { color: #ffffff } /* Name.Namespace */
.phphighlightcode .code_nx { color: #ffffff } /* Name.Other */
.phphighlightcode .code_py { color: #ffffff } /* Name.Property */
.phphighlightcode .code_nt { color: #fb660a; font-weight: bold } /* Name.Tag */
.phphighlightcode .code_nv { color: #fb660a } /* Name.Variable */
.phphighlightcode .code_ow { color: #ffffff } /* Operator.Word */
.phphighlightcode .code_w { color: #888888 } /* Text.Whitespace */
.phphighlightcode .code_mf { color: #0086f7; font-weight: bold } /* Literal.Number.Float */
.phphighlightcode .code_mh { color: #0086f7; font-weight: bold } /* Literal.Number.Hex */
.phphighlightcode .code_mi { color: #0086f7; font-weight: bold } /* Literal.Number.Integer */
.phphighlightcode .code_mo { color: #0086f7; font-weight: bold } /* Literal.Number.Oct */
.phphighlightcode .code_sb { color: #0086d2 } /* Literal.String.Backtick */
.phphighlightcode .code_sc { color: #0086d2 } /* Literal.String.Char */
.phphighlightcode .code_sd { color: #0086d2 } /* Literal.String.Doc */
.phphighlightcode .code_s2 { color: #0086d2 } /* Literal.String.Double */
.phphighlightcode .code_se { color: #0086d2 } /* Literal.String.Escape */
.phphighlightcode .code_sh { color: #0086d2 } /* Literal.String.Heredoc */
.phphighlightcode .code_si { color: #0086d2 } /* Literal.String.Interpol */
.phphighlightcode .code_sx { color: #0086d2 } /* Literal.String.Other */
.phphighlightcode .code_sr { color: #0086d2 } /* Literal.String.Regex */
.phphighlightcode .code_s1 { color: #0086d2 } /* Literal.String.Single */
.phphighlightcode .code_ss { color: #0086d2 } /* Literal.String.Symbol */
.phphighlightcode .code_bp { color: #ffffff } /* Name.Builtin.Pseudo */
.phphighlightcode .code_vc { color: #fb660a } /* Name.Variable.Class */
.phphighlightcode .code_vg { color: #fb660a } /* Name.Variable.Global */
.phphighlightcode .code_vi { color: #fb660a } /* Name.Variable.Instance */
.phphighlightcode .code_il { color: #0086f7; font-weight: bold } /* Literal.Number.Integer.Long */

Zo ziet de post uit de topicstart daarmee uit:

[_eXistenZ_]

Oooooh, maar hij parsed toch al naar standaard classes i.p.v. hard een hexadecimale kleur in de HTML te rammen. In dat geval kan iedereen net zo los gaan als ie zelf wil met behulp van een beetje custom CSS.

Schiet maar een PR in op Tweakers 7.5 als iemand per sé andere kleurtjes wil, maar ik ga nu al helemaal wak.

[crisp]

.oisyn schreef op woensdag 08 oktober 2014 @ 21:55:
[...]


Als ik een beetje door oude topics blader zie ik echter nog zat oude-stijl posts tussen opnieuw geparste posts staan.

Zie bijvoorbeeld RobIII in "[alg] Slechtste programmeervoorbeelden deel 5". Die post gebruikt de oude highlighter, terwijl de post erboven wel goed is

Die post erboven heeft helemaal geen highlighting omdat er geen taal is opgegeven.

.oisyn schreef op woensdag 08 oktober 2014 @ 21:58:
Hier is Fruity gemodificeerd voor gebruik op t.net, met een lichte aanpassing (niet alle background-colors waren gelijk, zo hadden comments een donkerdere achtergrond - dat vond ik wat storend)
[...]

Zo ziet de post uit de topicstart daarmee uit:
[afbeelding]

Ziet er goed uit; ik denk alleen dat we liever een lichte achtergrond houden

[ Voor 32% gewijzigd door crisp op 09-10-2014 09:06 ]

[.oisyn]

Mja, dat vind ik een beetje een mooit point eerlijk gezegd. [cmd] heeft ook geen witte achtergrond. Spoiler tags zijn ook zwart. En nou is de sample size nog niet zo groot, maar tot nu toe heeft iedereen die er wat over gezegd heeft (hier en in het crew topic) zijn voorkeur voor Fruity danwel een scheme met een donkere achtergrond uitgesproken . Dat is ook wel een beetje de consensus bij IDE's en andere professionele ontwikkeltools, ze schakelen allemaal over naar een theme met donkere achtergrond. Het werkt gewoon prettiger.

Daarnaast, hoeveel impact hebben die paar posts met code op de algemene look & feel van t.net? En waarom zijn die erger dan posts met andere niet-passende content?

Nou kan het mij niet zoveel schelen hoor, ik heb een custom css en daar ben ik tevreden mee

[ Voor 6% gewijzigd door .oisyn op 09-10-2014 10:08 ]

[Hero of Time]

Je vergeet dat wij in NOS ook redelijk veel configs en logs posten in [code] tags. En zo zijn er nog meer plekken waar ze die tag gebruiken. Wil je dan altijd een zwarte achtergrond? Zet 't dan in je eigen custom CSS, maar maak 't niet forum wide.

[.oisyn]

Hero of Time schreef op donderdag 09 oktober 2014 @ 13:17:
Je vergeet dat wij in NOS ook redelijk veel configs en logs posten in [code] tags. En zo zijn er nog meer plekken waar ze die tag gebruiken.

Dat vergeet ik helemaal niet, ik snap alleen niet welk probleem je daarmee ziet? Dus omdat het een log is en geen programmacode moet de achtergrond wit zijn? Die logica ontgaat me compleet

Ik neem aan dat in NOS ook de [cmd] veel gebruikt wordt. Die heeft zelfs een pikzwarte achtergrond. Maar dat kan dus ook niet?

Wil je dan altijd een zwarte achtergrond?

Ja. Of nee, niet #000 zwart, maar you get the point.

Zet 't dan in je eigen custom CSS, maar maak 't niet forum wide.

Zie laatste regel van mijn vorige post.

Er is mij gevraagd welke ik mooi vind, dat heb ik aangegeven. Verder heb ik niemand zien reageren dat hij liever wit wilt. Het is uiteraard nog te vroeg om conclusies te trekken, maar ik vind het opvallend welke kant het op gaat. Wat ik, ongeacht de gekozen kleur, niet wil zien is dat een code-tag zonder taal een andere kleur krijgt als een code-tag met taal.

[ Voor 63% gewijzigd door .oisyn op 09-10-2014 13:33 ]