Zmieńmy kolorowanie listingu

3

Obecnie kolor wewnątrz znacznika <code> to różowy co nijak ma się z kolorystyką serwisu. Proponuje zmienić ten kolor na ciemnozielony.

Dodatkowo listingi kodu. Może byśmy zmienili kolor na ciemny (taki jak w stopce oraz w nowym menu)? Tutaj przykład: https://prismjs.com/ (chodzi o tomorrow night).

2

A czy kolorystyka nie będzie wtedy zbyt jednolita?

Poza tym moim zdaniem dobrze jest obecnie, że ten kolor jest tak różny od koloru linków oraz wzmianek przez @ (które też są linkami).

0

Możesz mieć racje, z tym kolorem. Wygląda to tak:

screenshot-20200218123205.png

0

Jeśli nie uważasz różowego, lub po prostu tego jego odcienia, poszukaj jakiegoś innego, który będzie się podobnie różnił od zielonego.

2

może listingi również powinny mieć ciemne tło, podobnie jak sformatowany kod? a jeśli nie zupełnie ciemne, to przynajmniej mieć tło takie, jak np. pod nickiem OPa w wątku.

Jak dla mnie to ciemne wygląda nawet lepiej od zielonego, no i zgrywałoby się z blokami kodu

Zielone
screenshot-20200218170654.png
Ciemne
screenshot-20200218170745.png

1

@superdurszlak: jeśli miałoby być ciemne, to ja dałbym raczej darkgrey albo podobnie jakiś jaśniejszy szary. Ale nadal uważam, że różowy ożywia UI i bez niego kolorystyka byłaby zbyt jednolita.

0

tomorrow night jest fajny, lecz dobra bylaby mozliwosc wyboru miedzy ciemnym a starym jasnym jak w menu. Ten rozowoczarny to naprawde zle wyglada. Poza tym powinno sie je odpowiednio otagowac w Html zeby kazdy mogl napisac dodatek kolorujacy kod wymagajacym uzytkownikom wedlug ich potrzeb na wypadek jesli standardowe kolory nie beda komus odpowiadac. Poza tym tryb jasny/ciemny powinno sie zmieniac dla kodu i menu za jednym razem.

1

<code> służy do wyróżnienia w sposób jak najbardziej czytelny jakiegoś słowa, więc zbytnie wymyślanie jest tu nie na miejscu…
Ten różowy zawsze mnie trochę gryzł, ale tym bardziej nie rozumiem ciemnego tła.

0
Azarien napisał(a):

<code> służy do wyróżnienia w sposób jak najbardziej czytelny jakiegoś słowa (…)

Taka wydaje się praktyka, ale czy tak powinno być?


UPDATE: @Azarien: Jednak zapytam: co rozumiesz przez "czytelny sposób" oraz "jakieś słowo"? Czy chodzi Ci o jakiekolwiek wyróżnienie jakiegokolwiek słowa?

2
Azarien napisał(a):

<code> służy do wyróżnienia w sposób jak najbardziej czytelny jakiegoś słowa, więc zbytnie wymyślanie jest tu nie na miejscu…
Ten różowy zawsze mnie trochę gryzł, ale tym bardziej nie rozumiem ciemnego tła.

No to zmieńmy to :)

Tajemnica dlaczego taki styl został użyty jest prosta: to jest domyślny styl dla znacznika <code> w bootstrap :)

0

U siebie mam ten znacznik zmodowany za pomocą user-css:

:not(pre) > code { 
  background-color: #ECF7CC !important;
  color: #4C6210 !important;
 }

Znaczniki wyglądają tak:

code.png

IMO wygląda w porządku, jest dobrze wyeksponowany (ale nie za mocno) i pasuje do kolorystyki serwisu. ;)

0

Tak na marginesie - coś się stało z kolorowaniem kodu, że jak zrobię:

public static void Main()

to żadne ze słów kluczowych nie jest kolorowane?

0

A widzisz, to jest efekt użycia pluginu purgecss do webpacka, który wyciął ten styl, bo uznał że nie występuje w kodzie. Trzeba dodać od białej listy. Tutaj o tym pisałem: Ostatnio wspominałem o wykon...

Jeżeli chodzi o czarny styl, jaki zaprezentował @superdurszlak to jest on użyty w znaczniku <kbd> - np. Ctrl+X.

3

Tak by wyglądał listing gdyby użyć ciemniejszego tła (takiego jak w nowym menu):

screenshot-20200219165728.png

Do oceny.

0

Fajnie byłoby też gdyby skrypt po stronie serwera generował w miejscu listingu prosty XML jak:

<code>
<command><label>loop:</label></command>
<command><keyword>mov</keyword> <symbol>ah</symbol>,<integer>9</integer></command>
<command><keyword>mov</keyword> <symbol>dx</symbol>,<symbol>helloWorld</symbol> <comment>;load message to print</comment></command>
<command><keyword>int</keyword> <integer>21h</integer></command>
<command><keyword>jmp</keyword> <symbol>loop</symbol></command>
<command><symbol>helloWorld</symbol> <keyword>db</keyword> <string>"Hello world.$"</string></command>
</code>

A potem każdy stylowałby sobie to w CSS jak chce. Domyślnie mogłoby być tak jak np. w IDLE albo tomorrow night.
Ja na przykład zmajstrowałem coś takiego ( http://manna5.opx.pl/listing.css ):

code {
	display: block;
	background-color: #e8eae5;
}
keyword {
	color: green;
}
integer {
	color: red;
}
string {
	color: orange;
}
command {
	display: block;
}
symbol {
	color: blue;
	font-style: bold;
}
comment {
	color: gray;
	font-style: italic;
}
label {
	color: red;
	background-color: yellow;
}
3

Ponieważ nie padły żadne konkretne propozycje, to ja zaproponuje kolor #d7661c, który używany jest już w wielu miejscach w serwisie, np. do podświetlenia niektórych elementów (powiadomienia, wiadomości prywatne).

screenshot-20200220070054.png

1

Hurra, zaczęło kolorowac slowa kluczowe!

1

A może wprowadzić ustawienie w profilu (jak to jest np. na gitlabie), wtedy każdy wybierze sobie jaki mu pasuje.

0

Dla mnie kolor #d7661c wydaje się trochę zbyt idący w stronę czerwonego (a czerwony oznacza raczej zazwyczaj "niedozwolone", "uwaga", "ostrożnie"). Byłbym bardziej za propozycją @sugar_hiccup wyboru w profilu.

Przy okazji: czy nie ma u nas jakiegoś sposobu umieszczenia w treści posta takiego małego kwadracika lub kółeczka z danym kolorkiem? Mam wrażenie, że coś takiego widziałem – ale może to nie było u nas.


UPDATE: A może to aktualny różowy jest właśnie idący w stronę czerwonego, a #d7661c nie… sam nie wiem. Może kwestia przyzwyczajenia.

1

Bez jaj, wybór koloru tekstu w znaczniku <code> jako opcja panelu, aby potem korzystało z tego pare osób (tak jak z opcją przyklejonego paska menu)? Potem taki kod trzeba utrzymywać, testować.

Obecny wybór ciemnego/jasnego menu to miał być efekt przejściowy. Po prostu nie chce tego utrzymywać, bo nie mam na to czasu. W przypadku jakichś zmian w CSS, trzeba potem sprawdzać czy na pewno menu wygląda dobrze w wersji jasnej, ciemnej, na desktopie czy mobilnych. A wiem, że w większości tego typu ficzery są wykorzystywane przez garstkę osób. Niestety nie ma przestrzeni na tego typu funkcjonalności ponieważ nie ma ludzi do pracy.

0

@Adam Boduch: pomarańczowy też pasuje. Dawniej na pomarańczowo były renderowane martwe linki w kompendium, ale z tego co teraz widzę, wszystkie linki mają ten sam kolor, nieważne czy kierują do artykułu czy na stronę błędu. ;)

0

Co się stało z takim tekstem?! Ten różowo-czerwony ma bardzo słaby kontrast, źle się to czyta, jest mdły i mało widoczny.

A co do wyboru kolorowania w profilu, to nie odbieram tego poważnie. Tak jak wspomniał Adam, trzeba to potem utrzymywać. Kiedyś 4p miało różne skórki (nawet bardzo fajne), ale każda nowa zmiana w kodzie powodowała problemy, autorzy skórek nie wspierali zmian i koniec końców trzeba było zaorać.

0

Dla celów dokumentacji: kolor już zmieniony. :)

1 użytkowników online, w tym zalogowanych: 0, gości: 1