Czcionka monospace w widoku edycji artykułów w Kompendium

Czcionka monospace w widoku edycji artykułów w Kompendium
(* możesz oddać maksymalnie 2 głosy)
Zostawić "ludzką czcionkę"
29%
29% [8]
Dodać "programistyczną czcionkę" (monospace)
68%
68% [19]
Nie mam zdania
4%
4% [1]
Riddle
Administrator
  • Rejestracja:ponad 14 lat
  • Ostatnio:3 minuty
  • Lokalizacja:Laska, z Polski
  • Postów:10045
1
obscurity napisał(a):

Wtf, myślałem dzisiaj że mi się style nie załadowały. Czemu edycja posta ma używać innej czcionki niż jest później wyświetlana w poście? Zmiana nie do przyjęcia, instaluję własne style do 4p jeśli to zostaje

Kurcze, naprawiam jeszcze wsadzanie linków do edytora i pokażę wam demo.

Od paru H pracuję nad wersją edytora, poczekajcie jeszcze chwile i sobie zobaczycie prototyp. Jak się nie spodoba to możemy wrócić do zwykłej czcionki na forum.

edytowany 1x, ostatnio: Riddle
flowCRANE
Moderator Delphi/Pascal
  • Rejestracja:ponad 13 lat
  • Ostatnio:minuta
  • Lokalizacja:Tuchów
  • Postów:12152
2
TomRiddle napisał(a):

Kurcze, naprawiam jeszcze wsadzanie linków do edytora i pokażę wam demo.

No to sobie rób prototypy ile chcesz, ale oddajcie normalny font na forum!!!


Pracuję nad własną, arcade'ową, docelowo komercyjną grą z gatunku action/adventure w stylu retro (pixel art), programując silnik i powłokę gry od zupełnych podstaw, przy użyciu Free Pascala i SDL3. Więcej informacji znajdziesz na moim mikroblogu.
Riddle
No przecież tam jest normalny font na forum, tak samo jak na discordzie. Font będzie inny tylko w kawałkach kodu.
flowCRANE
To co „tam” będzie jest nieistotne, skoro teraz trzeba mono-dziadostwa używać.
Riddle
@furious programming: Próbuję Ci wytłumaczyć, że od kilku godzin pracuję nad wersją edytora która ma dokładnie taką samą czcionkę jak miała stara wersja forum; tak że każdemu będzie pasować.
flowCRANE
A ja próbuję Ci wytłumaczyć, że dopóki nie masz gotowego rozwiązania, zmuszanie wszystkich do używania monospace jest absolutnie bez sensu. A biorąc pod uwagę to, że nie wiadomo kiedy i czy w ogóle cokolwiek zrobisz, ma to jeszcze mniej sensu. To chyba logiczne.
Silv
@furious programming: bądź sprawiedliwy, zauważ tytuł tego wątku: "Czcionka monospace w widoku edycji artykułów w Kompendium".
Silv
Moderator Wiki
  • Rejestracja:ponad 10 lat
  • Ostatnio:prawie 3 lata
  • Lokalizacja:Warszawa
0

Dla równowagi opinii – ja nie widzę większej różnicy póki co. Tak samo chętnie zobaczę propozycję @TomRiddle .


edytowany 1x, ostatnio: Silv
Manna5
  • Rejestracja:prawie 6 lat
  • Ostatnio:4 minuty
  • Lokalizacja:Kraków
  • Postów:636
1

Dla mnie czcionka o stałej szerokości znaków nie sprawia problemów (nawet mi się podoba), ale mimo to można by dodać taką opcję w profilu aby to można było zmieniać. Nie będzie z tym dużego problemu, gdyż przekazywanie ustawiań przechowywanych po stronie serwera do arkuszy stylów jest łatwe, ponieważ skrypt serwera może dodawać odpowiednie klasy do body, a arkusz je wykrywać, np.:

Kopiuj
#...
if ($settings['monospaced_font_for_markdown_editor']) {
  array_push ($body_classes, "markdown-editor-monospaced");
} else {
  array_push ($body_classes, "markdown-editor-proportional");
}
#...
echo "<body class=\"" . implode (" ", $body_classes) . "\">";
#...
Kopiuj
/*...*/
.markdown-editor-proportional .markdown-editor { /*...*/ font-family: sans-serif; /*...*/ }
.markdown-editor-monospaced .markdown-editor { /*...*/ font-family: monospace; /*...*/ }
/*...*/

edytowany 1x, ostatnio: Manna5
Riddle
Administrator
  • Rejestracja:ponad 14 lat
  • Ostatnio:3 minuty
  • Lokalizacja:Laska, z Polski
  • Postów:10045
6

Dobra, pierwsza wersja gotowa do zaobserwowania. Nie wrzucam jeszcze na dev.4programmers.net, za pozwoleniem @Adam Boduch, bo jeszcze nikt tego nie widział.

Od razu mówię, że decyzje dotyczące stylów (kolorki, czcionki, rozmiary) są do dogadania. Starałem się odwzorować style z 4programmers.net (orginalnego), i zrobiłem najlepiej jak mogłem, jednak mogę zbierać sugestie.

Myślę że najlepiej będzie jak czcionka domyślna będzie taka sama jak na 4p przed zmianą (@furious programming wink).

Featury jakie teraz są:

  • Domyślna czcionka zwykła (nie mono-space)
  • We fragmentach kodu czcionka monospace
  • Kolorowanie markdownu (**bold**, *italics*, ## heading)
  • Wklejanie linków, obrazków i cytatów
  • Shortcuty, Ctrl+B na pogrubienie, Ctrl+L na link, etc.

DEMO: https://danon.github.io/4programmers/

flowCRANE
No i ładnie, cieszę się, że powoli rodzi się rozwiązanie z Discord. Ale na forum nadal jest monospace, a już nie kilka, a kilkadziesiąt godzin minęło.
Adam Boduch
Administrator
  • Rejestracja:około 23 lata
  • Ostatnio:31 minut
  • Postów:11948
1

Wygląda nieźle. A myślisz, że uda się zintegrować z obecnymi komponentami napisanymi w vue? Tzn. mam tu na myśli podpowiadanie użytkownika (@), wklejanie obrazów ze schowka (Ctrl+V) czy też tzw. "autosave" (przechowywany w local storage). To wszystko obecnie jest zintegrowane z <textarea> i nie wiem czy do codemirror trzeba by było osobno pisać te komponenty? :(

Riddle
Administrator
  • Rejestracja:ponad 14 lat
  • Ostatnio:3 minuty
  • Lokalizacja:Laska, z Polski
  • Postów:10045
0
Adam Boduch napisał(a):

Wygląda nieźle. A myślisz, że uda się zintegrować z obecnymi komponentami napisanymi w vue?

Mój komponent też jest w Vue, i zrobiłem go "zgodnie ze sztuką", więc powinno się dać.

  • podpowiadanie użytkownika (@) - No właśnie myślałem o tym jak to ugryźć.
  • wklejanie obrazów ze schowka (Ctrl+V) - to na 100%
  • "autosave" (przechowywany w local storage) - chodzi o to że podczas pisania treść jest trzymana w localStorage, i podczas otwarcia tematu bierze się tą treść z localStorage'a? Hmm.. myślę że zrobienie tego od nowa byłoby całkiem proste, żeby użyć gotowego rozwiązania z 4programmers.net; musiałbym się przyjrzeć.

To wszystko obecnie jest zintegrowane z <textarea> i nie wiem czy do codemirror trzeba by było osobno pisać te komponenty?

W moim przykładzie też mamy <textarea>, więc może będzie działało samo.

edytowany 3x, ostatnio: Riddle
somekind
Moderator
  • Rejestracja:około 17 lat
  • Ostatnio:4 dni
  • Lokalizacja:Wrocław
1

Ten ctrl + P na pewno tak ma działać? (Efekt po zaznaczeniu tekstu Obczaj to: Praca z kodem w formularzu: skrawki kodu i użyciu skrótu.)
screenshot-20210930130855.png

Ogólnie nie jestem pewien, czy to daje dużą wartość, skoro ctrl + V pozwala przecież na wklejanie obrazków ze schowka. Często ktoś linkuje obrazki zamiast wklejać w posty?
No, a poza tym, nadpisujesz domyślny skrót przeglądarki. Niektórzy programiści Delphi pewnie wciąż drukują strony, żeby je czytać jak im się pakiet internetowy TP skończy.

Co do linków, to ja bym tu jakąś sztuczną inteligencję zastosował, bo ta prawdziwa często sobie rady nie daje, i ludzie często wstawiają linki błędnie (czyli w efekcie url jest tekstem, który nie prowadzi pod ten url, a na bieżącą stronę, bo faktyczny url jest pusty).
Optymalnie by było, żeby w momencie wstawiania odgadnąć, czy w schowku jest url czy tekst i wstawić w odpowiednie nawiasy, a drugie pozostawił puste. A jak jest link w schowku, a zaznaczmy tekst i wciskamy skrót, to niech tekst będzie opisem, a link się wklei do likowania. To będzie super wygodne.
No i obecnie chyba też coś szwankuje:
screenshot-20210930131601.png

A poza tym wielki szacun wielki za wysiłek, to jest świetne!
Zrób jeszcze wydzielanie postów do nowych wątków, to postawię Ci kratę piwa.


Po dopracowaniu rozwiązania każdy będzie mógł założyć własny drzewiasty wątek.
edytowany 1x, ostatnio: somekind
Marooned
bo ta prawdziwa często sobie rady nie daje ja z pamięci jak klepię linki to mam 80% szans, że pomieszam nawiasy - ten markup nadal jest dla mnie bardziej obcy niż hieroglify w piramidach.
Riddle
@Marooned: To jakie rozwiązanie mógłbyś zaproponować? Co dla Ciebie byłoby najlepsze?
Marooned
To jest tak proste do poprawy, że najprostszym sposobem jest, bym nauczył się kolejności nawiasów :D
Riddle
@somekind: Czy powinny działać też linki które nie mają scheme? Tzn nie mają http:///https://? Np jak mam w schowku www.google.com, to powinno dodać go jako link? what about google.com/plik.jpg?
Marooned
No to są klasyczne linki względne.
Riddle
Administrator
  • Rejestracja:ponad 14 lat
  • Ostatnio:3 minuty
  • Lokalizacja:Laska, z Polski
  • Postów:10045
1
somekind napisał(a):

Ten ctrl + P na pewno tak ma działać? (Efekt po zaznaczeniu tekstu Obczaj to: Praca z kodem w formularzu: skrawki kodu i użyciu skrótu.)
screenshot-20210930130855.png
Ogólnie nie jestem pewien, czy to daje dużą wartość, skoro ctrl + V pozwala przecież na wklejanie obrazków ze schowka. Często ktoś linkuje obrazki zamiast wklejać w posty?
No, a poza tym, nadpisujesz domyślny skrót przeglądarki.

No ja się kierowałem tym, żeby się dało wklejać na dwa sposoby. Tzn jeśli ktoś ma w schowku obrazek, to robi Ctrl+V (jak teraz na 4programmers.net). Jak ma w schowku link do obrazka (np z zewnętrznego serwisu z memia) to klika Ctrl+P i wkleja obrazek, którego nie ma w załączniku. Czyli: jak masz w schowku obrazek, klikaj Ctrl+V, jak masz w schowku link do obrazka, klikaj Ctrl+P. Chociaż to w sumie można by wykryć automatycznie?

Ale może to głupi pomysł?

Co do linków, to ja bym tu jakąś sztuczną inteligencję zastosował, bo ta prawdziwa często sobie rady nie daje, i ludzie często wstawiają linki błędnie (czyli w efekcie url jest tekstem, który nie prowadzi pod ten url, a na bieżącą stronę, bo faktyczny url jest pusty).
Optymalnie by było, żeby w momencie wstawiania odgadnąć, czy w schowku jest url czy tekst i wstawić w odpowiednie nawiasy, a drugie pozostawił puste. A jak jest link w schowku, a zaznaczmy tekst i wciskamy skrót, to niech tekst będzie opisem, a link się wklei do likowania. To będzie super wygodne.

Czyli masz na myśli takie coś?

  • Jeśli w schowku jest URL, to wstaw [](http://url)
  • Jeśli w schowku jest nie-URL to wstaw [tekst]()

No spoko, można coś takiego zrobić.

Ja pod to widziałem taki use case.

  • Masz w schowku link (np do dokumentacji biblioteki)
  • Zaznaczasz jakiś tekst, np "Laravel"
  • Klikasz Ctrl+L
  • I Twój tekst Może użyj do tego Laravel? zamienia się w Może użyj do tego [Laravel](http://laravel)?.

Ale again, może to głupie. Może ten tool mógłby się zachowywać inaczej jeśli istnieje zaznaczenie i jeśli nie istnieje. Np jeśli coś zaznaczyłes, i chcesz wkleić coś co nie jest linkiem, to nie wklejaj nic.

No i obecnie chyba też coś szwankuje:
screenshot-20210930131601.png

Tak, po prostu nie robi reseta zaznaczenia. Dopisałem do bugów do poprawnia.

A poza tym wielki szacun wielki za wysiłek, to jest świetne!
Zrób jeszcze wydzielanie postów do nowych wątków, to postawię Ci kratę piwa.

Ale masz na myśli że świetny UX? To cieszę się :D A zajęło tylko 10h :D

edytowany 2x, ostatnio: Riddle
Riddle
10h... hahhaha... dobre. 160h na to już przeznaczyłem.
Manna5
  • Rejestracja:prawie 6 lat
  • Ostatnio:4 minuty
  • Lokalizacja:Kraków
  • Postów:636
0

CodeMirror trzeba by było przede wszystkim lepiej ostylować. Bo on domyślnie jest bardziej w starym stylu, a strony 4P dosyć modernistyczne.


Azarien
  • Rejestracja:około 21 lat
  • Ostatnio:około 7 godzin
4

Pomysł jest OK (wielokrotnie musiałem liczyć spacje żeby mieć pewność że post wyjdzie równo..)
ale font który jest w tej chwili nie przypada mi do gustu.

Może w edytorze posta powinien być jakiś checkbox czy coś do włączania monospace.

edytowany 1x, ostatnio: Azarien
Zobacz pozostałe 9 komentarzy
Azarien
ja nawet nie wiem co to jest "local storage". jeśli to ma automatycznie powodować że stronka pamięta treść wpisaną w formularzu, to czasami to działa a czasami nie. albo na jednej stronie działa a na innej nie. po prostu mechanizm niegodny zaufania.
Silv
@Azarien: tak, to działa z założenia różnie na różnych stronach – działa, jeśli któraś to obsługuje. Zobacz tu: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
Azarien
no to jeśli albo działa albo nie działa to znaczy że nie działa, bo ja nie mam głowy do tego by pamiętać gdzie działa a gdzie nie.
Silv
PS Przy czym ja piszę o "tych" local storage, ponieważ nie znam wszystkich mechanizmów, dzięki którym można ten efekt uzyskać. Znam "local storage" (no i wspomnianą na stronie pod powyższym linkiem "session storage").
somekind
@Azarien: local storage to ficzer przeglądarki, tak jak ciasteczka czy cache. Nie działa to automatycznie, podobnie jak do ciasteczka programista musi coś zapisać do tego miejsca, a później pewnie odczytać. W każdym razie, u mnie zawartość niewysłanego posta/komentarza jest odtwarzania nie tylko po zamknięciu karty, ale i całej przeglądarki, więc moim zdaniem to działa.
Manna5
  • Rejestracja:prawie 6 lat
  • Ostatnio:4 minuty
  • Lokalizacja:Kraków
  • Postów:636
1

Checkbox byłby najlepszy. A w cookies można by zapamiętywać jego stan. Wtedy nie trzeba by było żadnej ingerencji na backendzie.


Zobacz pozostałe 13 komentarzy
KamilAdam
@PerlMonk: Racja. Ale są jeszcze inne sesje które mogą wyciec. Wielu nie chciało by stracić swojego FB czy innego Social Media (wliczając w to GitHuba oczywiście)
Manna5
Mogą wyciec, jeśli ktoś przechwyci dane wymieniane podczas synchronizacji. Jeśli jednak już ktoś ma możliwośćasz przechwytywania danych, które przesyłasz, to może równie dobrze podsłuchać cookies odsyłane do serwera.
Riddle
@Manna5: Przecież możesz sobie napisać klienta HTTP jak chcesz, np opartego na chromium i możesz implementować co chcesz, nawet sharowanie ile razy odwiedziłeś pornhub.
Silv
@TomRiddle: "operatego"? Poza tym ten wymieniony serwis nietrafiony, zważywszy wiek @Manna5 (patrz: jego profil).
Silv
PS A, chyba "opartego".
obscurity
  • Rejestracja:około 6 lat
  • Ostatnio:10 minut
2

No propsy się należą, fajnie to wygląda, choć jeszcze dużo do dopracowania, a jak zwykle 10% szczegółów zajmuje 90% czasu.
Podoba mi się też to że napisałeś że wrócisz z prototypem za godzinkę, dwie a wróciłeś po 24h - fajnie ukazuje jak wygląda estymacja tasków

Ja szczerze jak piszę dłuższego posta albo jakieś tabelki to robię to w notatniku i potem przeklejam. 4p już tyle razy mi wywalił błędem po kliknięciu "Zapisz" i wywalił z pamięci całą treść posta że wolę mieć kopię w schowku.
Choć w sumie tabelkę na 4p zrobiłem może z raz, bardziej do jiry by się przydało takie rozwiązanie.


"A car won't take your job, another horse driving a car will." - Horse influencer, 1910
flowCRANE
Moderator Delphi/Pascal
  • Rejestracja:ponad 13 lat
  • Ostatnio:minuta
  • Lokalizacja:Tuchów
  • Postów:12152
2

Dobrze by też było, gdyby działało kolorwanie składni w edytorze. To by wykluczyło konieczność używania zakładki Podgląd i sprawdzania, czy wszystko gra. W sumie to jeśli by zaimplementować ten komponent w serwisie, to zakładka ta w ogóle już nie będzie potrzebna.

Ale zlitujcie się i przywróćcie normalny font w edytorze na forum. Jak pisałem wcześniej, nie ma sensu aby był monospace, bo i tak treść większości postów nie wymaga tego — ani się kodu w nim nie pisze, ani tabelek nie robi.


Pracuję nad własną, arcade'ową, docelowo komercyjną grą z gatunku action/adventure w stylu retro (pixel art), programując silnik i powłokę gry od zupełnych podstaw, przy użyciu Free Pascala i SDL3. Więcej informacji znajdziesz na moim mikroblogu.
Riddle
Administrator
  • Rejestracja:ponad 14 lat
  • Ostatnio:3 minuty
  • Lokalizacja:Laska, z Polski
  • Postów:10045
1
furious programming napisał(a):

Ale zlitujcie się i przywróćcie normalny font w edytorze na forum. Jak pisałem wcześniej, nie ma sensu aby był monospace, bo i tak treść większości postów nie wymaga tego — ani się kodu w nim nie pisze, ani tabelek nie robi.

@Adam Boduch No w sumie możemy przywrócić teraz, jeśli przeszkadza @furious programming, a mój edytor dodamy po poprawkach.

Riddle
Administrator
  • Rejestracja:ponad 14 lat
  • Ostatnio:3 minuty
  • Lokalizacja:Laska, z Polski
  • Postów:10045
1
furious programming napisał(a):

Dobrze by też było, gdyby działało kolorwanie składni w edytorze. To by wykluczyło konieczność używania zakładki Podgląd i sprawdzania, czy wszystko gra. W sumie to jeśli by zaimplementować ten komponent w serwisie, to zakładka ta w ogóle już nie będzie potrzebna.

No właśnie nie do końca, bo parser Markdownu w Coyote to nie jest taki 1:1 Markdown, tylko tam są różne implementecje ParserInterface, więc nie zawsze to co pokazuje mój komponent, to jest to samo co zobaczymy w "Podgląd".

edytowany 1x, ostatnio: Riddle
flowCRANE
Moderator Delphi/Pascal
  • Rejestracja:ponad 13 lat
  • Ostatnio:minuta
  • Lokalizacja:Tuchów
  • Postów:12152
2

@TomRiddle: masz w planach pociągnąć ten projekt i zrobić pełne rozwiązanie, czy tylko jakąś uproszczoną wersję?


Pracuję nad własną, arcade'ową, docelowo komercyjną grą z gatunku action/adventure w stylu retro (pixel art), programując silnik i powłokę gry od zupełnych podstaw, przy użyciu Free Pascala i SDL3. Więcej informacji znajdziesz na moim mikroblogu.
somekind
Moderator
  • Rejestracja:około 17 lat
  • Ostatnio:4 dni
  • Lokalizacja:Wrocław
1
TomRiddle napisał(a):

Ale może to głupi pomysł?

Pomysł dobry, tylko obawiam się, że nikt nie będzie pamiętał, że skrót do drukowania wkleja obrazki.

Czyli masz na myśli takie coś?

  • Jeśli w schowku jest URL, to wstaw [](http://url)
  • Jeśli w schowku jest nie-URL to wstaw [tekst]()

No spoko, można coś takiego zrobić.

To jeszcze dodajmy:

  • Jeśli w schowku jest obraz, to wstaw obraz (jak teraz).
  • Jeśli w schowku jest URL do obrazu to wstaw ![](http://url.jpg)
  • Jeśli wklejamy URL (czy do strony czy do obrazka) i mamy zaznaczony tekst, to tekst idzie do [tekst].

I będzie w ogóle super.

Ale again, może to głupie. Może ten tool mógłby się zachowywać inaczej jeśli istnieje zaznaczenie i jeśli nie istnieje. Np jeśli coś zaznaczyłes, i chcesz wkleić coś co nie jest linkiem, to nie wklejaj nic.

No takie zabezpieczenie też może mieć sens.

Ale masz na myśli że świetny UX? To cieszę się :D A zajęło tylko 10h :D

No to to było najsensowniejsze 10h jakie ktokolwiek spędził na tym forum. :P


Po dopracowaniu rozwiązania każdy będzie mógł założyć własny drzewiasty wątek.
edytowany 1x, ostatnio: somekind
Riddle
Administrator
  • Rejestracja:ponad 14 lat
  • Ostatnio:3 minuty
  • Lokalizacja:Laska, z Polski
  • Postów:10045
0
furious programming napisał(a):

@TomRiddle: masz w planach pociągnąć ten projekt i zrobić pełne rozwiązanie, czy tylko jakąś uproszczoną wersję?

No, idealnie byłoby zrobić żeby było pełnoprawne rozwiązanie. I myślę że wskoczę w temat. Najbardziej mnie martwią te customowe implementacje backendowe parsera.

somekind napisał(a):
TomRiddle napisał(a):

Ale może to głupi pomysł?

Pomysł dobry, tylko obawiam się, że nikt nie będzie pamiętał, że skrót do drukowania wkleja obrazki.

No to skrót można zmienić. Jakiś pomysł na wklejanie obrazka? CTRL+O jak "obrazek"? :D

Czyli masz na myśli takie coś?

  • Jeśli w schowku jest URL, to wstaw [](http://url)
  • Jeśli w schowku jest nie-URL to wstaw [tekst]()

No spoko, można coś takiego zrobić.

To jeszcze dodajmy:

  • Jeśli w schowku jest obraz, to wstaw obraz (jak teraz).
  • Jeśli w schowku jest URL do obrazu to wstaw ![](http://url.jpg)
  • Jeśli wklejamy URL (czy do strony czy do obrazka) i mamy zaznaczony tekst, to tekst idzie do [tekst].

I będzie w ogóle super.

No, zgadzam się. Czyli 3 dodatkowe if, dopiszę to do listy "do zrobienia". Tylko to pod obrazki. Czy na takiej samej zasadzie powinny być linki w schowku?

Bo co innego jest URL w schowku (np do dokumentacji), a co innego jest obrazek w schowku (np link do obrazka z memem). Wtedy dwa skróty by się przydały, np CTRL+V wkleja jako link, a Ctrl+? wkleja jako obrazek.

Wykrycie URL jest proste automatycznie; ale wykrycie czy link prowadzi do dokumentu czy do obrazka jest nie wiem czy nie możliwe (no bo co, po rozszerzeniu? może nie pokryć wszystkich przypadków).

Ale masz na myśli że świetny UX? To cieszę się :D A zajęło tylko 10h :D

No to to było najsensowniejsze 10h jakie ktokolwiek spędził na tym forum. :P

Jupi.

edytowany 1x, ostatnio: Riddle
Adam Boduch
Administrator
  • Rejestracja:około 23 lata
  • Ostatnio:31 minut
  • Postów:11948
4

@furious programming: zakładka "Podgląd" i tak będzie potrzebna. Zauważ, że tryb markdown edytora codemirror zachowuje oryginalną składnię markdown, a jednocześnie np. pogrubia font czy zmienia kolory: https://codemirror.net/mode/markdown/

Dodatkowo my mamy parę dodatkowy funkcji w stosunku do markdown, które codemirror niekoniecznie obsługuje.

No i wreszcie kolorowanie składni w codemirror niekoniecznie musi być takie samo jak prism.js którego używamy :)

edytowany 1x, ostatnio: cerrato
Manna5
CodeMirrora i tak by trzeba modyfikować ze względu na style - jak pisałem wyżej.
Silv
Moderator Wiki
  • Rejestracja:ponad 10 lat
  • Ostatnio:prawie 3 lata
  • Lokalizacja:Warszawa
1
TomRiddle napisał(a):

Dobra, pierwsza wersja gotowa do zaobserwowania. Nie wrzucam jeszcze na dev.4programmers.net, za pozwoleniem @Adam Boduch, bo jeszcze nikt tego nie widział.

4programmers.dev, dokładnie rzecz biorąc. :)

Featury jakie teraz są:

  • Domyślna czcionka zwykła (nie mono-space)
  • We fragmentach kodu czcionka monospace

Obecna czcionka na 4p (monospace) ma mniejsze odstępy między znakami niż czcionka użyta przez Ciebie (wybaczcie użycie słowa "czcionka", nie znam się). Uważam, że mniejsze odstępy są na plus, nawet podczas pisania kodu.

  • Kolorowanie markdownu (**bold**, *italics*, ## heading)
  • Wklejanie linków, obrazków i cytatów
  • Shortcuty, Ctrl+B na pogrubienie, Ctrl+L na link, etc.

oraz

somekind napisał(a):

Ten ctrl + P na pewno tak ma działać? (Efekt po zaznaczeniu tekstu Obczaj to: Praca z kodem w formularzu: skrawki kodu i użyciu skrótu.)

screenshot-20210930130855.png

Ogólnie nie jestem pewien, czy to daje dużą wartość, skoro ctrl + V pozwala przecież na wklejanie obrazków ze schowka. Często ktoś linkuje obrazki zamiast wklejać w posty?
No, a poza tym, nadpisujesz domyślny skrót przeglądarki.

TomRiddle napisał(a):

Ja pod to widziałem taki use case.

  • Masz w schowku link (np do dokumentacji biblioteki)
  • Zaznaczasz jakiś tekst, np "Laravel"
  • Klikasz Ctrl+L
  • I Twój tekst Może użyj do tego Laravel? zamienia się w Może użyj do tego [Laravel](http://laravel)?.

Nie jestem przekonany co do wprowadzania skrótów poza obecnym CTRL-V wklejającym obrazki na serwer 4p – ale może to moje nieprzezwyczajenie? Obawiam się, że wielu użytkowników może korzystać z niektórych skrótów. Na przykład ja preferowałbym, by skrót CTRL+L pozostał nieprzypisany; przenosi on zazwyczaj w przeglądarkach do pola adresu. Oczywiście można argumentować, że do wszystkiego można się przyzwyczaić, ale bo ja wiem, czy zawsze warto…


edytowany 2x, ostatnio: Silv
Zobacz pozostałe 3 komentarze
Silv
Hm, nie zawsze muszę, bo CTRL jest z dwóch stron klawiatury; ale masz rację, że tutaj też jest różnica.
Riddle
@Silv: No chyba że używasz prawego Ctrl (żyg), albo masz mega długie palce i sięgniesz (albo siedzisz na hiper małej klawiaturze).
Silv
Generalnie chodzi w tym wypadku o zmianę przyzwyczajeń. :) Ja może jeszcze mógłbym zmienić, ale czy inni?
Silv
(Tak, wiem, najpewniejsza droga do dowiedzenia się to wprowadzić zmiany i czekać na krytyczne opinie ;) ).
somekind
WOW, nie wiedziałem, ze ctrl + l robi to samo co f6. Po co? Bez sensu! Usunąć to!
Riddle
Administrator
  • Rejestracja:ponad 14 lat
  • Ostatnio:3 minuty
  • Lokalizacja:Laska, z Polski
  • Postów:10045
1
furious programming napisał(a):

Dobrze by też było, gdyby działało kolorwanie składni w edytorze.

Można podpiąć prism.js, powinno być prosto; tylko najpierw muszę ogarnąć różnicę pomiędzy blockiem a linią kodu ` vs ```.

flowCRANE
Moderator Delphi/Pascal
  • Rejestracja:ponad 13 lat
  • Ostatnio:minuta
  • Lokalizacja:Tuchów
  • Postów:12152
2

Frazę ``` również można używać do linii, z czego niektórzy tutaj na forum korzystają.


Pracuję nad własną, arcade'ową, docelowo komercyjną grą z gatunku action/adventure w stylu retro (pixel art), programując silnik i powłokę gry od zupełnych podstaw, przy użyciu Free Pascala i SDL3. Więcej informacji znajdziesz na moim mikroblogu.
somekind
Moderator
  • Rejestracja:około 17 lat
  • Ostatnio:4 dni
  • Lokalizacja:Wrocław
1
TomRiddle napisał(a):

No to skrót można zmienić. Jakiś pomysł na wklejanie obrazka? CTRL+O jak "obrazek"? :D

Ja bym wolał ctrl + v do wszystkiego. Ja chcę wkleić "coś". A jak to "coś" powinno być wklejone, to już niech komputer się martwi. Komputer jest wystarczająco głupi, żeby to ogarnąć.

Wykrycie URL jest proste automatycznie; ale wykrycie czy link prowadzi do dokumentu czy do obrazka jest nie wiem czy nie możliwe (no bo co, po rozszerzeniu? może nie pokryć wszystkich przypadków).

Krata harnasia z najlepszego rocznika się chłodzi, a Ty mówisz, że coś jest niemożliwe? :P

Po rozszerzeniu chyba starczy. Jak ktoś jest ciężko chory i hostuje tekst pod urlem z jpg na końcu, to my mu i tak nie pomożemy. Jeśli zaś pod urlem bez graficznego rozszerzenia jest obrazek... no od biedy można w locie uderzyć pod ten url i sprawdzić. Ale to wersja 2.0

A w wersji 3.0 sprawdzić, czy to nie link do obrazka na jakimś syfiastym serwisie typu fejsbuk, zrobić kopię obrazka i wkleić normalnie jako załącznik do posta, a autora zbanować na 3 dni, żeby miał czas na zrozumienie, czemu hotlinkowanie do głupota.


Po dopracowaniu rozwiązania każdy będzie mógł założyć własny drzewiasty wątek.
Marooned
I popup na całą stronę Czy wiesz, że Twój obrazek zostanie zablokowany przez Facebook container? bez możliwości zamknięcia.
somekind
No też może być. :)
Manna5
lajk za syfiastym serwisie typu fejsbuk
Aventus
  • Rejestracja:prawie 9 lat
  • Ostatnio:ponad 2 lata
  • Lokalizacja:UK
  • Postów:2235
3

Mi ta czcionka niestety przeszkadza. Co ciekawe to nigdy nie miałem takich problemów kiedy czytałem ją na ciemnym tle. W jasnym edytorze jest dla mnie jednak znacznie mniej czytelna, tym bardziej że kolor czcionki jest również jaśniejszy (a może tylko mi się tak wydaje). Chociaż i tak uważam że ona się nadaje do kodu, a nie do zwykłego tekstu.

Także ogólnie jestem na nie, ale niestety już po fakcie dokonanym.


Na każdy złożony problem istnieje rozwiązanie które jest proste, szybkie i błędne.
GH
  • Rejestracja:prawie 4 lata
  • Ostatnio:około 3 lata
  • Postów:811
1

To dlatego jest taka paskudna czcionka przy dodawaniu postów? Zastanawiałem się, kto mądry to wymyślił. Bezsens i wygląda to źle:

Zgadzam się z @Aventus - chyba ktoś tu nie rozumie, że czcionki monosospace nie używa się do pisania dłuższych tekstów, bo się tego nie da po prostu czytać. A treść posta jest tekstem, a nie kodem.

Skoro chcecie iść w tym kierunku, to proponuję dać monosospace także po wstawieniu posta, a nie tylko przed. Cały post czcionką monospace, po co się ograniczać.

edytowany 2x, ostatnio: Ghost_
Adam Boduch
Administrator
  • Rejestracja:około 23 lata
  • Ostatnio:31 minut
  • Postów:11948
0

Ja tam głosowałem na "nie", ale zrobiliśmy tak jak głosowała większość. To co, zakładamy nową ankietę? :P Czy po prostu ignorujemy wole większości.

Riddle
Administrator
  • Rejestracja:ponad 14 lat
  • Ostatnio:3 minuty
  • Lokalizacja:Laska, z Polski
  • Postów:10045
2
Adam Boduch napisał(a):

Ja tam głosowałem na "nie", ale zrobiliśmy tak jak głosowała większość. To co, zakładamy nową ankietę? :P Czy po prostu ignorujemy wole większości.

Ja proponuję przywrócić starą czcionkę na forum; i poczekać aż wrzucimy mój prototyp.

PS: Albo po prostu wrzucić mój prototyp dużo szybciej :D

edytowany 2x, ostatnio: Riddle
cerrato
Moderator Kariera
  • Rejestracja:około 7 lat
  • Ostatnio:około 3 godziny
  • Lokalizacja:Poznań
  • Postów:8753
4

@Adam Boduch: A może jednak zróbmy jak było już gdzieś (może nawet w tym wątku) zaproponowane, czyli możliwość ustawienia tego z poziomu usera?
Wtedy każdy sobie przełączy tak, jak będzie chciał i będzie szczęśliwy.
Mi się nowa czcionka podoba, ale patrząc na wypowiedzi innych - zdania są podzielone ;)

A wystarczy w ustawieniach konta dodać przełącznik typu czcionki - mono lub zmiennej szerokości. Do tego jeszcze można dodać taki switch bezpośrednio w polu edycji. W ten sposób każdy sobie ustawi domyślną czcionkę, ale w razie potrzeby (jak np. będzie tworzyć tabelkę #pdk) to sobie doraźnie przełączy.


Adam Boduch
Administrator
  • Rejestracja:około 23 lata
  • Ostatnio:31 minut
  • Postów:11948
5

Wiesz co, ale to jest czas potrzebny na stworzenie funkcji, której prawdopodobnie 99% osób nawet nie użyje. W szczególności gdy trwają prace nad nowym edytorem. Po prostu na przyszłość trzeba będzie ostrożniej podejmować decyzje, nawet w oparciu o wyniki ankiety :/

Szczególnie, że przed wdrożeniem na produkcje, była informacja że na serwerze testowym jest już wdrożenie i można podejrzeć jak to wygląda. Zapewne nikt nawet nie spojrzał. Tak więc testujemy na produkcji ;)

edytowany 1x, ostatnio: Adam Boduch
cerrato
Tak więc testujemy na produkcji norma :D :D :D
PerlMonk
@cerrato: Przy okazji testowanie na zwierzętach :D
Kliknij, aby dodać treść...

Pomoc 1.18.8

Typografia

Edytor obsługuje składnie Markdown, w której pojedynczy akcent *kursywa* oraz _kursywa_ to pochylenie. Z kolei podwójny akcent **pogrubienie** oraz __pogrubienie__ to pogrubienie. Dodanie znaczników ~~strike~~ to przekreślenie.

Możesz dodać formatowanie komendami , , oraz .

Ponieważ dekoracja podkreślenia jest przeznaczona na linki, markdown nie zawiera specjalnej składni dla podkreślenia. Dlatego by dodać podkreślenie, użyj <u>underline</u>.

Komendy formatujące reagują na skróty klawiszowe: Ctrl+B, Ctrl+I, Ctrl+U oraz Ctrl+S.

Linki

By dodać link w edytorze użyj komendy lub użyj składni [title](link). URL umieszczony w linku lub nawet URL umieszczony bezpośrednio w tekście będzie aktywny i klikalny.

Jeżeli chcesz, możesz samodzielnie dodać link: <a href="link">title</a>.

Wewnętrzne odnośniki

Możesz umieścić odnośnik do wewnętrznej podstrony, używając następującej składni: [[Delphi/Kompendium]] lub [[Delphi/Kompendium|kliknij, aby przejść do kompendium]]. Odnośniki mogą prowadzić do Forum 4programmers.net lub np. do Kompendium.

Wspomnienia użytkowników

By wspomnieć użytkownika forum, wpisz w formularzu znak @. Zobaczysz okienko samouzupełniające nazwy użytkowników. Samouzupełnienie dobierze odpowiedni format wspomnienia, zależnie od tego czy w nazwie użytkownika znajduje się spacja.

Znaczniki HTML

Dozwolone jest używanie niektórych znaczników HTML: <a>, <b>, <i>, <kbd>, <del>, <strong>, <dfn>, <pre>, <blockquote>, <hr/>, <sub>, <sup> oraz <img/>.

Skróty klawiszowe

Dodaj kombinację klawiszy komendą notacji klawiszy lub skrótem klawiszowym Alt+K.

Reprezentuj kombinacje klawiszowe używając taga <kbd>. Oddziel od siebie klawisze znakiem plus, np <kbd>Alt+Tab</kbd>.

Indeks górny oraz dolny

Przykład: wpisując H<sub>2</sub>O i m<sup>2</sup> otrzymasz: H2O i m2.

Składnia Tex

By precyzyjnie wyrazić działanie matematyczne, użyj składni Tex.

<tex>arcctg(x) = argtan(\frac{1}{x}) = arcsin(\frac{1}{\sqrt{1+x^2}})</tex>

Kod źródłowy

Krótkie fragmenty kodu

Wszelkie jednolinijkowe instrukcje języka programowania powinny być zawarte pomiędzy obróconymi apostrofami: `kod instrukcji` lub ``console.log(`string`);``.

Kod wielolinijkowy

Dodaj fragment kodu komendą . Fragmenty kodu zajmujące całą lub więcej linijek powinny być umieszczone w wielolinijkowym fragmencie kodu. Znaczniki ``` lub ~~~ umożliwiają kolorowanie różnych języków programowania. Możemy nadać nazwę języka programowania używając auto-uzupełnienia, kod został pokolorowany używając konkretnych ustawień kolorowania składni:

```javascript
document.write('Hello World');
```

Możesz zaznaczyć również już wklejony kod w edytorze, i użyć komendy  by zamienić go w kod. Użyj kombinacji Ctrl+`, by dodać fragment kodu bez oznaczników języka.

Tabelki

Dodaj przykładową tabelkę używając komendy . Przykładowa tabelka składa się z dwóch kolumn, nagłówka i jednego wiersza.

Wygeneruj tabelkę na podstawie szablonu. Oddziel komórki separatorem ; lub |, a następnie zaznacz szablonu.

nazwisko;dziedzina;odkrycie
Pitagoras;mathematics;Pythagorean Theorem
Albert Einstein;physics;General Relativity
Marie Curie, Pierre Curie;chemistry;Radium, Polonium

Użyj komendy by zamienić zaznaczony szablon na tabelkę Markdown.

Lista uporządkowana i nieuporządkowana

Możliwe jest tworzenie listy numerowanych oraz wypunktowanych. Wystarczy, że pierwszym znakiem linii będzie * lub - dla listy nieuporządkowanej oraz 1. dla listy uporządkowanej.

Użyj komendy by dodać listę uporządkowaną.

1. Lista numerowana
2. Lista numerowana

Użyj komendy by dodać listę nieuporządkowaną.

* Lista wypunktowana
* Lista wypunktowana
** Lista wypunktowana (drugi poziom)

Składnia Markdown

Edytor obsługuje składnię Markdown, która składa się ze znaków specjalnych. Dostępne komendy, jak formatowanie , dodanie tabelki lub fragmentu kodu są w pewnym sensie świadome otaczającej jej składni, i postarają się unikać uszkodzenia jej.

Dla przykładu, używając tylko dostępnych komend, nie możemy dodać formatowania pogrubienia do kodu wielolinijkowego, albo dodać listy do tabelki - mogłoby to doprowadzić do uszkodzenia składni.

W pewnych odosobnionych przypadkach brak nowej linii przed elementami markdown również mógłby uszkodzić składnie, dlatego edytor dodaje brakujące nowe linie. Dla przykładu, dodanie formatowania pochylenia zaraz po tabelce, mogłoby zostać błędne zinterpretowane, więc edytor doda oddzielającą nową linię pomiędzy tabelką, a pochyleniem.

Skróty klawiszowe

Skróty formatujące, kiedy w edytorze znajduje się pojedynczy kursor, wstawiają sformatowany tekst przykładowy. Jeśli w edytorze znajduje się zaznaczenie (słowo, linijka, paragraf), wtedy zaznaczenie zostaje sformatowane.

  • Ctrl+B - dodaj pogrubienie lub pogrub zaznaczenie
  • Ctrl+I - dodaj pochylenie lub pochyl zaznaczenie
  • Ctrl+U - dodaj podkreślenie lub podkreśl zaznaczenie
  • Ctrl+S - dodaj przekreślenie lub przekreśl zaznaczenie

Notacja Klawiszy

  • Alt+K - dodaj notację klawiszy

Fragment kodu bez oznacznika

  • Alt+C - dodaj pusty fragment kodu

Skróty operujące na kodzie i linijkach:

  • Alt+L - zaznaczenie całej linii
  • Alt+, Alt+ - przeniesienie linijki w której znajduje się kursor w górę/dół.
  • Tab/⌘+] - dodaj wcięcie (wcięcie w prawo)
  • Shit+Tab/⌘+[ - usunięcie wcięcia (wycięcie w lewo)

Dodawanie postów:

  • Ctrl+Enter - dodaj post
  • ⌘+Enter - dodaj post (MacOS)