SunMD View — bo czytanie README nie musi boleć

[SunRiver]

Pisałem instrukcję do SunGo DB Designera i chciałem zobaczyć, jak wygląda „na czysto”. Otworzyłem ją w przeglądarce Markdowna ze Sklepu Microsoft. Działała, ale czytało się to trochę jak skan kserówki z lat 90. Do tego w bocznym menu siedziała reklama, która usilnie chciała mi policzyć zyski i straty na kryptowalutach. Dzięki, ale moje jedyne kryptowaluty to drobniaki w słoiku.

Uznałem, że szybciej będzie napisać własną przeglądarkę, niż dalej się z tamtą męczyć. Tak powstał SunMD View.

Co to umie?

• Spis treści z boku. Sam się buduje z nagłówków i podświetla rozdział, w którym aktualnie jesteś. Koniec z przewijaniem 40 ekranów, żeby znaleźć „Najczęstsze problemy”.
• Szukanie (Ctrl+F) z licznikiem trafień, np. „1/33”. Teraz wiadomo, ile razy w instrukcji pada słowo „tabela” (za dużo).
• Samo się odświeża. Zapisujesz plik w edytorze, a w podglądzie po sekundzie widać zmiany i zostajesz w tym samym miejscu dokumentu.
• Kolorowanie kodu w blokach ```go, ```js, ```sql i całej reszcie.
• Trzy motywy:
  • Jasny: biały jak GitHub,
  • SunGo klasyczny: morski pasek, jak w Designerze,
  • Ciemny SunGo: czerń i zieleń #32CD32, dla nocnych marków.
• Linki działają. Kotwice #rozdzial przewijają do rozdziału, linki do innych .md otwierają się w oknie (jest przycisk Wstecz),
  a http trafia do przeglądarki.
• Obrazki z folderu dokumentu się wyświetlają.
• Druk i eksport do HTML: jeden plik ze stylami w środku, można wysłać komuś, kto nie wie, co to Markdown.
• Większa i mniejsza czcionka (Ctrl + kółko), lista ostatnich plików, przeciąganie pliku na okno.
• PL i EN.
• Zero reklam. Kryptowaluty licz sobie sam.

---

Ciekawostka z placu budowy, czyli „dlaczego wszystko jest żółte?!”

Po pierwszej wersji stwierdziłem, że kolory „męczą oczy” i że wszędzie jest beż. Przerobiłem motywy: biel jak na GitHubie,
zieleń SunGo, wszystko jak trzeba. Uruchamiam, a tam znowu beż. Biały #ffffff wyglądał jak kartka, którą ktoś zostawił
na rok na parapecie.

Winowajca: profil kolorów monitora Samsung Natural Color Pro 1.0 ICM. Edge (a więc i WebView2, na którym stoi program) od jakiejś aktualizacji „poprawia” kolory przez ten profil, i biel robi się żółta. W samym Edge'u miałem to dawno wyłączone flagą, ale programy na WebView2 nie biorą flag z Edge'a. Każdy ma swoje ustawienia.

Rozwiązałem to jedna linijka w main.go:

Kod: Zaznacz cały

os.Setenv("WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS", "--force-color-profile=srgb")

Biel znowu jest biała. Jeśli Wasze programy na WebView2 też dziwnie żółkną, możecie wziąć to na siebie.

---

Pod maską ukryłem to co zawsze

• Go + webview_go (WebView2), bez Wailsa i bez Node'a,
• goldmark zamienia Markdown na HTML (tabele, listy zadań, przypisy), chroma koloruje kod,
• cały interfejs siedzi w środku .exe, więc to jeden plik bez instalatora,
• identyfikatory nagłówków są tworzone jak na GitHubie, razem z ą, ę, ż, ź, więc linki z README działają tak samo jak w repo,
• ustawienia trafiają do %APPDATA%\SunMDView.

---

Skróty dla leniwych

Skrót	Co robi
Ctrl+O	otwórz plik
Ctrl+F lub F3	szukaj (następne trafienie)
F5	odśwież
Ctrl+B	pokaż lub ukryj spis treści
Ctrl + , - , 0	wielkość czcionki
Alt + strzałka w lewo	wstecz
Ctrl+S	zapisz jako HTML
Ctrl+P	drukuj

---

Wersja: 01.00.00-beta-01, czyli beta. Coś pewnie jeszcze wyskoczy zza krzaka.
Uwagi, pomysły i zgłoszenia błędów piszcie w tym wątku. Pochwały też przyjmuję.

[gufim]

Program za programem i tak sie rozpedza expres koło za kołem

[SunRiver]

wiesz używajać webui w zasadzie szablon mam stały zmieniam tylko funkcje , mało roboty dużo frajdy i szybki efekt
to jak z zupą ... masz kociołek na ogniu z wodą , a co do niej wrzucisz taka zupa

[SunRiver]

Drobna aktualizacja 02.00.01

• Nowy zaktualizowany frontend , wymuszony przez SunMD Editor oba programy współdzielą to samo WebUI.
  Zmiany w układzie podstawowego okna w jednym - przechodzą do drugiego.

[mortyr]

Genialne narzędzie a jakie proste i lekkie , czemu nie naumiałeś się Go szybciej ?

[SunRiver]

SunMD View — teraz z ramkami i diagramami (forum się nie obrazi mam nadzieję )

Wyszło głupio. Forum nauczyło się ramek [tip] i diagramów Mermaid, SunMD Editor też, a SunMD View, czyli program, w którym czytam pliki Markdown, dalej pokazywał w tych miejscach gołe [tip] i ścianę dziwnego tekstu ze strzałkami -->. Przeglądarka Markdowna, która gorzej czyta Markdowna niż forum? Wstyd na całą dzielnicę.

Choć nie aż tak duży, bo łatwo go było zatuszować. Ręcznie trzeba było dopisać tylko kilka linijek kodu, a resztę View dostał w spadku po Editorze.
Za to właśnie lubię pracować z Go i WebView: wspólny szablon, wspólne style i wspólny rdzeń frontendu. Wystarczy, że zadbam o rejestrację w backendzie, i w sumie to wszystko.

Szybko więc nadrobiłem zaległości.

---

Ramki, i to w dwóch smakach

Smak forumowy. Te same znaczniki, które działają i tutaj:

Kod: Zaznacz cały

[tip]Tu wpisujesz mądrą radę.[/tip]

Do wyboru są note, tip, important, warning i caution. Ramka może mieć jedną linijkę albo kilka akapitów, z pogrubieniem,
kodem i czym tam chcecie. Wreszcie widać, jak post będzie wyglądał, zanim go wyślę, a nie po trzech edycjach.

Smak GitHubowy. Bloki w stylu > [!NOTE] z README na GitHubie też wyglądają teraz jak ramki, a nie jak smutny cytat.

Wskazówka

Napis na górze ramki („Wskazówka”, „Ważne”…) zmienia się razem z językiem programu. Po angielsku ramka mówi „Tip”,
po polsku „Wskazówka”. Ramka jest dwujęzyczna, a nie każdy może o sobie tak powiedzieć. Właściwie to zasługa kluczy w plikach językowych.
Wystarczy przetłumaczyć plik en albo pl na dowolny inny język i dodać go do programu.

---

Diagramy Mermaid

Kilka magicznych linijek tekstu, a dostajesz rysunek. Dokładnie tak, jak na forum. Przykład z życia:

Kod: Zaznacz cały

flowchart TD
    A[Piszę post na forum] --> B{Podgląd w SunMD View?}
    B -->|Tak| C[Widzę ramki i diagram]
    B -->|Nie| D[Wysyłam w ciemno]
    D --> E[Edycja nr 1, 2, 3...]
    E --> B
    C --> F[Wysyłam raz i idę na kawę ☕]

Wystarczy blok kodu oznaczony jako mermaid. Program rozpozna też blok bez języka, jeśli zaczyna się od graph, flowchart, sequenceDiagram albo innego słowa Mermaida.

• Kolory jak na forum. W końcu to ten sam CSS. Przełączacie motyw, a diagram od razu rysuje się od nowa.
• Etykiety Tak i Nie na strzałkach dostają zielone i czerwone tło, żeby od razu było widać, którędy do kawy.
• Działa bez internetu. Biblioteka Mermaida siedzi w środku programu. Plik .exe przytył, ale Editor też i jemu tego nie wypominamy, bo wszyscy tyjemy.
• Drobny smaczek na dokładkę: SunMD View ma ikonkę, która przełącza do edytora. Sam go znajdzie, a jeśli mu się nie uda,
  grzecznie poprosi o wskazówkę.

Notatka

Biblioteka Mermaida ładuje się tylko wtedy, gdy w dokumencie naprawdę jest diagram. Zwykłe README otwiera się tak samo szybko jak wcześniej.

---

Diagram powyżej narysowało Wam właśnie forum. U mnie w SunMD View wygląda identycznie, i o to chodziło.
Uwagi i pomysły zostawiajcie w wątku. Bugi też, ale grzecznie, w kolejce.
W załączniku wersja dla windows:

[SunRiver]

Notatka

Szybka poprawka , bo mała wpadka z rozpoznawaniem kodu się znalazła
Teraz działa dobrze
jak to mówią jeden <div> za daleko ...

Wersja dla Windows w załączniku :