środa, 29 lipca 2015

Założę sobie bloga - część 3: formatowanie pól kodu na blogu


Dla mnie dużym problemem gdy rozpoczynałem pisanie bloga stało się prezentowanie instrukcji czy też kodu programów/skryptów. Chodzi o to by wyróżnić polecenia lub fragmenty kodu. Potrzebowałem trochę czasu na znalezienie sposobu. Efekt prezentuję poniżej.


 Jeśli chodzi o wyróżnienie kodu, to znalazłem trzy podstawowe metody:
  • wykorzystanie wbudowanego znacznika <code>,
  • dodanie kawałka arkuszy stylów i zdefiniowanie własnego stylu,
  • skorzystanie z rozbudowanej biblioteki SyntaxHighlighter.
Pierwsze dwie z powyższych metod zaprezentuję, jeśli zaś chodzi o trzecią, to jeszcze jej nie testowałem - pewnie kiedyś przetestuję i podzielę się swoimi spostrzeżeniami.

Wykorzystanie wbudowanego znacznika <code>

Wszystko co potrzebujemy zrobić, to przejść do edycji posta w HTML i dopisać znacznik (pamiętając koniecznie o zamknięciu go!). Przykład poniżej.

ls -all

Tutaj to wyedytowałem:

Dodanie kawałka arkusza stylów i zdefiniowanie własnego stylu

Ta metoda daje duże możliwości. Jej znaczny minus, to usunięcie stylów przy przełączaniu się na inny projekt.
Budowanie ramek przy pomocy własnych stylów, to nawet nie jest wierzchołek góry lodowej. To jedynie taka igiełka w stogu siana - jeśli chodzi o to co można osiągnąć. Jednak póki co tyle potrzebujemy, więc jedynie tak używamy.

Otwieramy: Szablon > Dostosuj :
 ...a tam: Zaawansowane > Dodaj arkusz CSS :

Proste ramki


Na przykład takie -
 - definicje stylów:
.ciagla{  border: 1px solid red; }  
.przerywana{  border: 1px dashed green; }
.kropkowana{  border: 1px doted blue; }
.podwojna{  border: 3px double black; }


- definicje pól:
<div class="ciagla">
  Prezentacja krawędzi: solid.
</div>

<div class="przerywana">
  Prezentacja krawędzi: dashed.
</div>

<div class="kropkowana">
  Prezentacja krawędzi: dotted.
</div>

<div class="podwojna">
  Prezentacja krawędzi: double.
</div>


- dają w efekcie:
Prezentacja krawędzi: solid.
Prezentacja krawędzi: dashed.
Prezentacja krawędzi: dotted.
Prezentacja krawędzi: double (3px).

 Pseudo-konsola PowerShell

Szukając mojego rozwiązania natknąłem się na bardzo ciekawy pomysł prezentacji kodu. Zamiast umieszczać grafikę, która zajmuje przestrzeń, łącze i nie umożliwia kopiowania tekstu - lepiej sformatować tekst by wyglądał jak konsola.

Należy dodać kod:

.PoshConsole {
  color: #EEEDF0;
  background-color: #012456;
  font-family: consolas;
  font-size: 0.99em;
  font-weight: bold;
  padding: .25em;
  padding-top: 0.25em;
  padding-right: 0.25em;
  padding-bottom: 0.25em;
  padding-left: 0.25em;
}

Przykład użycia:
PS C:\Users\zabawyit-admin> get-date


27 lipca 2015 23:24:27


Więcej w temacie można znaleźć tu: http://www.lazywinadmin.com/2013/10/blogger-adding-powershell-code-in-your.html

Brak komentarzy:

Prześlij komentarz