Renderowanie tagów HTML w postach

0

Nie do końca ogarniam jak działają nieistniejące tagi, tzn. jakieś słowa ubrane w nawiasy trójkątne, np. <test>. Podczas pisania/edycji wygląda to bardzo fajnie, kolorowo i w ogóle

screenshot-20220426012712.png

natomiast po zatwierdzeniu i zapisaniu posta cała magia się ulatnia i efekt jest taki:

screenshot-20220426012804.png

  1. tekst razem z tagami jest zbijany
  2. gdzie to piękne kolorowanie?
  3. czemu nie ma formatowania?
  4. kto zeżarł odstęp (a właściwie 3)
1

Noi co konkretnie Ci przeszkadza? Że <dupa> był pomarańczowy, a wyrenderowany jest czarny? Bo to że każdy poprawny HTML jest też poprawnym Markdownem to wiesz, prawda?

PS: Chociaż może faktycznie możnaby nie kolorować tagów które nie są dopuszczalne w Coyote, @Adam Boduch co myślisz?

1

Tutaj bardziej chodzi o brak odstępu oraz odmienne formatowanie tekstu. Wydaje mi się (nie jestem pewien) że to może mieć związek z parserem HTMLPurifier, który na siłę poprawia składnie.

<xxx> test </xxx>
1
abrakadaber napisał(a):

naprawdę nie widzisz różnicy między edytowanym tekstem a postem? - pomijając kolory to zerzarło znaki nowej linii (w sumie 6 sztuk) co dodatkowo zbiło pierwsze trzy linie w jedną

No dokładnie tak działa HTML, a to jest to czego użyłeś w poście. W HTML'u białe znaki i nowe linie nie są respektowane, i jeśli chcesz je dodać to musisz użyć <p>, <br/> white-space albo innych takich. Markdown zezwala na dodawanie HTML'a w nim, ale to nie oznacza że rządzą się takimi samymi prawami (np. dla przykładu: Tak samo jak HTML pozwala na osadzenie JS, to nie znaczy że HTML i JS muszą mieć to samo formatowani; tak samo osadzenie HTML'a w Markdownie nie znaczy że będą wyglądać tak samo).

Poza tym, to nie ma zupełnie żadnego związku z nowym edytorem, a sposobem renderowania HTML'a przez Coyote. Ze starym edytorem (<texarea/>) byłoby dokładnie to samo.

1

To jest edytor WYSIWYS (what you see is what you see). Na szczęście jest zakładka "Podgląd"

0

@obscurity: Masz jakiś pomysł jak rozwiązać ten problem którym chciałbyś się podzielić? Czy przyszedłeś tylko ponarzekać?

1

Ja mam pomysł: zmigrować na SMF (psychofani jedynie słusznego Coyote mnie zabiją albo przynajmniej dadzą bana za ten pomysł).

3

@TomRiddle: no jasne, już o nim pisałem
Zwykły textbox i podgląd poniżej na żywo jak na stackoverflow
Proste i genialne rozwiązanie, bez przekłamań w wyglądzie i przekombinowania.
Obecny edytor jednocześnie pokazuje markdown i podgląd, z tym że ten podgląd nie jest podglądem bo efekt końcowy często jak widać jest inny, taka dziwna i nieintuicyjna hybryda.
Można zostawić ten nowy edytor skoro już sobie jest ale podgląd byłoby miło gdyby się od razu pokazywał, bez przełączania między zakładkami.

0

Zwykły textbox i podgląd poniżej na żywo jak na stackoverflow
Proste i genialne rozwiązanie, bez przekłamań w wyglądzie i przekombinowania.

Ale wiesz że w tym Twoim pomyśle ze "zwykłym textboxem" będzie ten sam problem? Tzn ktoś wpisze

<tag>
Tekst
</tag>

to na forum wyrenderuje się

<tag>Tekst</tag>

Więc to by nic nie zmieniło, ale dzięki że się udzieliłeś.

Obecny edytor jednocześnie pokazuje markdown i podgląd, z tym że ten podgląd nie jest podglądem bo efekt końcowy często jak widać jest inny, taka dziwna i nieintuicyjna hybryda.

To nie jest podgląd, Podgląd jest specjalnie zostawiony w innej zakładce o nazwie (uwaga) "Podgląd". Edytor po prostu dodaje dekoracje Markdown oraz HTML oraz komendy pomagające w formatowaniu, autocomplete i skróty klawiszowe.

0
TomRiddle napisał(a):

Zwykły textbox i podgląd poniżej na żywo jak na stackoverflow
Proste i genialne rozwiązanie, bez przekłamań w wyglądzie i przekombinowania.

Ale wiesz że w tym Twoim pomyśle ze "zwykłym textboxem" będzie ten sam problem? Tzn ktoś wpisze

<tag>
Tekst
</tag>

to na forum wyrenderuje się

<tag>Tekst</tag>

no fajnie, ale w podglądzie poniżej też się tak wyrenderuje więc wszystko gra i jest jasne. Wejdź sobie na stackoverflow jeśli dalej nie rozumiesz o czym mowa.

To nie jest podgląd, Podgląd jest specjalnie zostawiony w innej zakładce o nazwie (uwaga) "Podgląd". Edytor po prostu dodaje dekoracje Markdown oraz HTML oraz komendy pomagające w formatowaniu, autocomplete i skróty klawiszowe.

To po co tekst się przekreśla, podkreśla i pogrubia podczas pisania i wstawiają się obrazki do edytora? Co to ma być?

3

Nie bardzo rozumiem. Na SO czy Github znaczniki HTML są po prostu usuwane. Chodzi o to, aby u nas też tak zrobić?

Nasz edytor działa tak jak chociażby edytor markdown w PHPStorm/Webstorm itp:
screenshot-20220430184812.png
Po lewej widać oryginalny tekst źródłowy, a po prawej finalny podgląd. Jak widać w trybie pisania posta, wyświetlana jest oryginalna składnia Markdown, ale jednocześnie widzimy, że tekst jest wyróżniony w zależności od użytej składni.

Jeżeli ktoś nie pamięta to wszystko zaczęło się od zgłoszenia propozycji, aby kod pisany w poście formatowany był innym fontem. Potem @TomRiddle poszedł o krok dalej i zaimplementował formatowanie tekstu na podstawie użytej składni Markdown.

0

Ja też nie do końca rozumiem ideę tego podglądu podczas pisania, który de facto podglądem nie jest. Mamy zakładkę podgląd + jakiś pseudo podgląd, gdzie formatowane są wpisywane znaczniki. Nie rozumiem po co to, nie lepszy byłby podgląd rezultatu na żywo jak na StackOverflow zamiast tego nie wiadomo czego? To chyba raczej kolorowanie składni a nie podgląd - kolorowanie składni markdown

0
Adam Boduch napisał(a):

Jeżeli ktoś nie pamięta to wszystko zaczęło się od zgłoszenia propozycji, aby kod pisany w poście formatowany był innym fontem. Potem @TomRiddle poszedł o krok dalej i zaimplementował formatowanie tekstu na podstawie użytej składni Markdown.

Dokładnie, zaczęło się od czcionki monospace w tabelce i we fragmentach kodu. Formatowanie pogrubienia, cytatów, kodu, markdown etc. doszło później.

0
Adam Boduch napisał(a):

Nie bardzo rozumiem. Na SO czy Github znaczniki HTML są po prostu usuwane. Chodzi o to, aby u nas też tak zrobić?

Nasz edytor działa tak jak chociażby edytor markdown w PHPStorm/Webstorm itp:
screenshot-20220430184812.png
Po lewej widać oryginalny tekst źródłowy, a po prawej finalny podgląd.

No właśnie chodzi o ten finalny podgląd. Nie ważne jak wygląda kolorowanie w edytorze (tak naprawdę mogłoby go po prostu nie być), ale pomocne i mniej mylące byłoby gdyby pojawiał się podgląd na żywo - tak jak na stackoverflow, albo na tym screenshocie. Zakładka "Podgląd" ze względu na potrzebę ciągłego przełączania traci swoją użyteczność (jest chociaż jakiś hotkey na to?).

Z podglądem na żywo edytor może sobie kolorować bez sensu po swojemu i nikt nie będzie błędnie zakładał że przedstawia on wygląd końcowy.

0

Problem polega na tym, że nasz edytor służy do dwóch celów — do pisania, a więc pokazywania tekstu oraz znaczników, a także służy jako podgląd wersji końcowej, w formie mocno zbliżonej. Tak więc edytor musi wyświetlać wszystkie znaczniki, ale idealnie by było, aby obsługiwał te same CSS-y, które są używane do renderowania postów. Dzięki temu korzystanie z zakładki podglądu nie będzie konieczne, tak samo jak wyświetlanie dwóch edytorów (jak na zrzucie wyżej).

Do dwóch edytorów, tak jak to pokazaliście na zrzucie, potrzeba dużego ekranu/dużej rozdzielczości poziomej. Sporo mniejszych ekranów i monitorów będzie miało z tym problem — łącznie z urządzeniami mobilnymi. Nie wyobrażam sobie tego np. na smartfonie czy na swoim laptopie/monitorku, przy rozdziałce poziomej rzędu 1280px. :D

1
furious programming napisał(a):

Tak więc edytor musi wyświetlać wszystkie znaczniki, ale idealnie by było, aby obsługiwał te same CSS-y, które są używane do renderowania postów. Dzięki temu korzystanie z zakładki podglądu nie będzie konieczne, tak samo jak wyświetlanie dwóch edytorów (jak na zrzucie wyżej).

Moim zdaniem nie musi i nie jest to nawet możliwe bo zobaczysz wynik połączony z markdownem więc siłą rzeczy nie jest to normalny podgląd tylko coś dziwnego. W dodatku możliwe jest na przykład napisanie:

<span style="font-size: 0px">coś</span>

co renderuje się tak:

coś

Gdybyś napisał tak w edytorze (na przykład redagując odpowiedź w dziale HTML) to nagle otrzymujesz tekst który podczas edycji znika i nie możesz łatwo poprawić.
Moim zdaniem edytor może zmieniać czcionkę na monospace w kodzie (bo od tego się zaczęło żeby łatwo się robiło tabelki) ale cała reszta jak pogrubienie / pochylenie / podkreślenie / wklejanie obrazków do edytora itp jest zbędne, brzydkie, wprowadzające w błąd i bezużyteczne.

Nie wyobrażam sobie tego np. na smartfonie czy na swoim laptopie/monitorku, przy rozdziałce poziomej rzędu 1280px. :D

Zauważ że podgląd na stackoverflow jest w pionie nie w poziomie i nie ma takiego problemu - na dużych ekranach widać go od razu, na mniejszych możesz sobie przewinąć i na pewno w niczym nie przeszkadza.

1
obscurity napisał(a):

W dodatku możliwe jest na przykład napisanie:

<span style="font-size: 0px">coś</span>

co renderuje się tak:

coś

Gdybyś napisał tak w edytorze (na przykład redagując odpowiedź w dziale HTML) to nagle otrzymujesz tekst który podczas edycji znika i nie możesz łatwo poprawić.

I właśnie dlatego wszelkie znaczniki powinny być widoczne, bo to edytor kodu markdown, a nie MS Word.

Zauważ że podgląd na stackoverflow jest w pionie nie w poziomie i nie ma takiego problemu - na dużych ekranach widać go od razu, na mniejszych możesz sobie przewinąć i na pewno w niczym nie przeszkadza.

Podgląd powyżej edytora zapewnia odpowiednią szerokość, ale wymaga nadmiernego scrollowania. Poza tymi bez sensu jest podgląd na żywo, skoro podczas pisania nie będzie go widać w całości na ekranie — szczególnie podczas pisania dłuższego posta lub takiego z cytatami.

Na forum Lazarusa nie ma pola podglądu widocznego cały czas i reagującego na zmiany na żywo. Jest za to przycisk Preview, po którego wciśnięciu renderowany jest podgląd posta nad edytorem. W samym edytorze znaczniki są widoczne normalnie, bez żadnego formatowania. I tam też jest masa scrollowania.

Jest dobrze tak jak jest, czyli podział na edytor z formatowanym kodem oraz przycisk do podglądu, który nie wymusza scrollowania w nieskończność. Jedyne co wymaga do doszlifowania CSS-ów, bo gdzieniegdzie coś się krzaczy. Podgląd na żywo nie jest potrzebny i implementacja takiego jest bez sensu, skoro sam kod jasno i czytelnie pokazuje jak jest formatowana zawartość, a do finalnego podglądu jest osobna zakładka.

0

Nie ma co porównywać StackOverflow do 4p bo to zupełnie inne serwisy. Na SO masz QA, odpowiedzi zawsze tematyczne, nie merytoryczne, często tym lepsze im krótsze odpowiednio sformatowane i podlegającego ścisłej ocenie, jak i wątki żyją długo.

Na 4p masz zupełnie inny tryb, wątki mają określony czas życia a potem umierają, często są długie, odpowiedzi się ciągną za sobą, często post odpowiada na wiele innych.

To są zupełnie różne aplikacje i rządzą się różnymi prawami.

0
TomRiddle napisał(a):

Na SO masz QA, odpowiedzi zawsze tematyczne, nie merytoryczne […]

No właśnie na SO odpowiedzi są wyłącznie merytoryczne — komentarze niekoniecznie. Sio do słownika.

Poza tym nie wiem skąd wytrzasnęliście porównanie 4p do SO — w moim wcześniejszym poście nie ma o tym ani słowa.

0

Moim zdaniem to też miałoby więcej sensu gdyby niedozwolone tagi się po prostu nie renderowały.

0

A nie można by niedozwolonych tagów zostawiać "as is"? To jest, nic z nimi nie robić. Skoro użytkownik je wpisał, niech je ma, ale jako zwykły tekst.

0
Silv napisał(a):

A nie można by niedozwolonych tagów zostawiać "as is"? To jest, nic z nimi nie robić. Skoro użytkownik je wpisał, niech je ma, ale jako zwykły tekst.

Niezgodne z markdownem, bo każdy HTML to poprawny markdown, więc jak ktoś wpisze tagi HTML w Markdown, to zgodnie ze standardem powinniśmy je traktować jak HTML.

Ergo jak ktoś wpisze

<span>welcome</span>

to powinniśmy zobaczyć

welcome

Bo zauważ, że to też byłoby spójne, możemy na forum pisać

<u>welcome</u>

i nie widzimy tego <u>, jest to interpretowane jak HTML, tagi znikają, a zamiast niego dodajemy jakiś styl. Nie widzę powodu czemu <span> miałby nie zniknąć.

0

OK, rozumiem problem. Ale… pomijanie przy renderowaniu jest już zgodne z Markdown?

0
Silv napisał(a):

OK, rozumiem problem. Ale… pomijanie przy renderowaniu jest już zgodne z Markdown?

To nie jest żadne pomijanie. Tak samo jak wpiszesz w markdown np **tekst** to te znaki ** nie są wyświetlane, ale nikt nie powie że są "pomijane". To po prostu składnia, tak samo jak <span>.

0

Czy Markdown ma jakieś wytyczne, co robić, gdy nie chcemy obsługiwać wszystkich znaczników?

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