Kolorowanie logów ESPHome

Dyskusje o serwisie
1

Chyba jedynie jako plik

A to:

To trzeba zaznaczyć logi → prawym myszy → kopiuj

ESP Home - uzyskanie połączenia po WiFi z HA
2

to tak robię ale wtedy nie ma oryginalnej kolorystyki ( jak obrazek wyżej ) - jako obrazek wiem, mnie chodziło żeby jako tekst w oryginalnej kolorystyce bo się lepiej wtedy czyta

3

To jest awykonalne, dlatego skrinszot jest świetnym uzupełnieniem, ale treścią posta nie może być sam obrazek bez wklejonego tekstu jako kod, w końcu my też używamy wyszukiwarek czy AI, więc te obrazki są fajne do oglądania, ale nie do użytku jako źródło materiału do poszukiwań.
(No i nie wiem czy istnieje plugin do discourse, który by interpretował logi ESPHome tak, by je kolorować identycznie jak to robi samo ESPHome, ale jeśli zobaczysz takie kolorowanie na jakimś forum daj znać, to się spytamy jego adminów jak to ogarnęli).

4

Tu już trzeba ombinować z markdown:
Np.

Tak wklejasz logi
```
log
```
Prawidłowo powinno samo wykryć, ale ja i tak kożystam z “kolorowania” np. dla yamla:

```yaml
yaml
```
Przykład:

select:
  - platform: modbus_controller
    name: "${name} Output source priority"
    address: 108
    options:
      0: Utility first
      1: Solar first
      2: SBU priority
      3: SUB priority
      4: Solar and Utility

Albo np. dla c++:
```c++
kod c++
```
Przykład:

#include <iostream> 
int main() {
    std::cout << "Hello, World!" << std::endl; 
    
    return 0;
}

Lub python

```python

kod Python

```

Przykład

print("Hello World!")

I jest jeszcze wiele opcji trzeba by było poszukać

5

Opcji jest wiele, ale takiej nie ma, to temat dla admina…

@hazibi mogłeś zadać to pytanie w osobnym poście lub wręcz wątku we właściwym dziale, bo teraz nie ma jak ładnie ciachnąć tego odrębnego tematu…

@artur podpowiedź AI (mam nadzieję, że spróbujesz to zrealizować w wolnej chwili)

Rozwiązanie: Komponent Motywu (CSS)

  1. W panelu administratora Discourse przejdź do: Customize → Themes → Components → Install.
  2. Utwórz nowy komponent (np. “ESPHome Logs”).
  3. W sekcji CSS dodaj poniższy kod, który stylizuje bloki kodu (pre code) w oparciu o typowe prefiksy ESPHome:
/* Stylizacja logów ESPHome w blokach kodu */
code.lang-esphome {
    background-color: #1e1e1e !important; /* Ciemne tło jak w terminalu */
    color: #f1f1f1 !important;
    font-family: 'Courier New', Courier, monospace;
}

/* Kolory dla poszczególnych poziomów logów */
code.lang-esphome .hljs-string { color: #f1f1f1; } /* Treść logu */

/* INFO - zielony/biały */
code.lang-esphome span:has(> .hljs-string) { color: #55ff55; }
code.lang-esphome .hljs-formula { color: #55ff55; } /* [I] */

/* DEBUG - szary */
code.lang-esphome span:has(> .hljs-string) { color: #aaaaaa; }
code.lang-esphome .hljs-formula { color: #aaaaaa; } /* [D] */

/* WARNING - żółty */
code.lang-esphome span:has(> .hljs-string) { color: #ffff55; }
code.lang-esphome .hljs-formula { color: #ffff55; } /* [W] */

/* ERROR - czerwony */
code.lang-esphome span:has(> .hljs-string) { color: #ff5555; }
code.lang-esphome .hljs-formula { color: #ff5555; } /* [E] */

/* Podświetlenie komponentu i linii */
code.lang-esphome .hljs-doctag { color: #55ffff; } /* [component:line] */

Jak używać na forum:

Aby logi zostały pokolorowane, użytkownicy muszą umieszczać je w blokach kodu z oznaczeniem języka esphome:

[I][app:058]: Running custom init...
[D][sensor:123]: Sending state: 23.5
[W][wifi:090]: WiFi signal is weak
[E][component:010]: Error reading sensor!

to powyżej powinno się pokolorować jeśli rozwiązanie zadziała

6

W CSS (jak zresztą w cały frontend) nie jestem dobry, ale:
Jest kilka razy powtórzony selektor code.lang-esphome span:has(> .hljs-string). W CSS kaskada działa tak, że ostatnia reguła wygrywa. W tym momencie wszystkie logi (INFO, DEBUG, ERROR) będą miały kolor czerwony, bo sekcja /* ERROR */ jest na końcu i nadpisuje poprzednie.

Wkleiłem sobie lokalnie w przeglądarce:

image
image638×273 11.9 KB

7

Ja się nie znam wcale na CSS więc nie byłem w stanie stwierdzić czy to jest OK (dlatego AI się nadaje dla kogoś, kto wie co robi), ale proszę bardzo - pocisnąłem bardziej i wymyślił coś zupełnie innego

skrypt do Theme Component w Discourse

<script type="text/discourse-plugin" version="0.8">
  const esphomeLogs = function(hljs) {
    return {
      name: 'esphome',
      case_insensitive: false,
      contains: [
        // Znacznik czasu: [12:34:56]
        {
          scope: 'comment',
          begin: /^\[\d{2}:\d{2}:\d{2}\]/
        },
        // Log Levels - każdy poziom mapowany na standardową klasę CSS highlight.js
        {
          scope: 'deletion', // Error (Czerwony)
          begin: /\[E\]/,
          end: /$/,
          relevance: 10
        },
        {
          scope: 'string', // Warn (Żółty)
          begin: /\[W\]/,
          end: /$/,
          relevance: 10
        },
        {
          scope: 'addition', // Info (Zielony)
          begin: /\[I\]/,
          end: /$/,
          relevance: 10
        },
        {
          scope: 'symbol', // Debug (Cyjan/Morski)
          begin: /\[D\]/,
          end: /$/,
          relevance: 10
        },
        {
          scope: 'comment', // Verbose (Szary)
          begin: /\[V\]/,
          end: /$/,
          relevance: 5
        },
        // Tag i linia: [ota:045]
        {
          scope: 'meta',
          begin: /\[[a-zA-Z0-9_\.]+\:\d+\]/,
          relevance: 10
        }
      ]
    };
  };

  // Rejestracja języka
  api.registerHighlightJSLanguage("esphome", esphomeLogs);
</script>