Jak sformatować bloki kodu?

Question

Jak sformatować bloki kodu?

Jak dodać tekst, aby był sformatowany jako kod?

Co muszę zrobić, aby mój kod wyświetlał się poprawnie-nie uciekł lub usunięty-po opublikowaniu? A jak uzyskać poprawne podświetlanie składni?

Aby uzyskać więcej informacji, zobacz " Jak sformatować moje posty w HTML lub Markdown? " w Centrum pomocy .

Wróć do FAQ index

193

code-formatting markdown support faq code

Author: Jason C, 2014-04-20

Source

1 answers

score 252 · Accepted Answer

Dla kodu inline (który nie zawiera nowych linii), które będą działać:

załączyć za pomocą backsticków: `<html>`.
osadzanie w znacznikach <code> i ręczne kodowanie encji HTML: <code><html></code>
wybierz częściowy tekst i naciśnij CtrlK (⌘K na OS X) lub kliknij przycisk {} nad edytorem (na zdjęciu poniżej)

Dla bloków kodu , aby zachować nowe linie, użyj jednego z następujące metody:

użyj przycisku {} nad edytorem (na zdjęciu poniżej)
Wklej kod, wybierz pełne linie i naciśnij CtrlK (⌘K na OS X)
użyj ogrodzonych bloków kodu , otaczając swój kod ```, lub ~~~ (otwieranie i zamykanie ogrodzenia muszą znajdować się w ich własnej linii i mogą być wcięte maksymalnie trzema spacjami; można użyć więcej niż trzech tyld lub tyld, tak długo, jak zamknięcie ogrodzenie używa tego samego znaku i jest co najmniej tak długie jak ogrodzenie otwierane) [48]}
wciąć wszystkie cztery (4) spacje lub jedną (1) kartę (upewnij się, że między górną częścią bloku a innym tekstem jest pusta linia)
Encase in <pre> or <pre><code> tags (in that order; using <code><pre> is invalid), and encode HTML entities (like < for <) yourself

Kod skopiowany / wklejony z IDE jest często już w kartach. Podczas renderowania karty są zastępowane przez miejsca.

Kod w blockquote

Aby włączyć kod do cytatu blokowego, należy umieścić spację po > oraz cztery spacje przed kodem.

> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

>     for(;;) 
        echo 'badger ';

Lub, umieść znak cytatu blokowego (i jego spację) na początku każdej pustej linii, w tym tej bezpośrednio przed kodem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
> 
    for(;;) 
        echo 'badger ';

Kod na liście numerowanej lub punktowanej

Jeśli twój kod pojawi się wewnątrz listy, musi wciąć dodatkowe cztery spacje dla każdego poziomu zagnieżdżenia.

- First bullet (is the deepest)

        for(;;) 
          echo 'ow ';

- Second bullet

Jeśli chcesz, aby blok kodu podążał za listą, ale nie był zagnieżdżony pod ostatnią pozycją listy, możesz użyć komentarza HTML jako"punktu przerwania". Jeśli to zrobisz, blok kodu musi być wcięty tylko normalnymi czterema spacjami:

- First bullet
- Second bullet

<!-- -->

    for(;;) 
      echo 'ow ';

Podświetlanie składni

jest używany do dodawania koloru do kodu, ale tylko wtedy, gdy język może być jednoznacznie określone, biorąc pod uwagę tagi pytania, lub jeśli ręczne podpowiedzi zostały dostarczone.

Dla dowolnego bloku kodu, możesz użyć tych komentarzy HTML, aby określić język:

<!-- language: lang-or-tag-here -->

    code goes here

<!-- language: lang-or-tag-here -->

    code goes here

<!-- language: lang-or-tag-here -->

```
code goes here
```

<!-- language: lang-or-tag-here -->

~~~
code goes here
~~~

Możesz również określić składnię dla wszystkich codeblocks w swoim poście z language-all podpowiedź:

<!-- language-all: lang-or-tag-here -->

    code goes here

More text not in code blocks

    code goes here

Alternatywnie, jeśli używasz bloków kodu ogrodzonego, możesz określić język zaraz po pierwszym ogrodzeniu:

```lang-or-tag-here
code goes here
```

~~~lang-or-tag-here
code goes here
~~~

Zobacz pełną specyfikację oraz lista podpowiedzi językowych .

Zauważ, że:

komentarze HTML muszą nie być wcięte
pusta linia pomiędzy  a wciętym blokiem kodu jest wymagana
spacja pomiędzy language: a językiem jest wymagana
podczas używania znacznika do określenia języka, nazwa znacznika jest rozróżniana wielkość liter
jeśli połączysz styl ogrodzony z komentarzami HTML, komentarze HTML będą ignored

Jeśli nie zdefiniowano żadnego języka, to w ogóle nie występuje podświetlenie. Ale w podglądzie lub jeśli wiele tagów językowych definiuje bardzo różne języki i nie jest używana ręczna definicja, używane jest domyślne podświetlenie, w którym Prettify najlepiej zgaduje.

Po zakończeniu edycji źródła znaczników występuje opóźnienie przed podświetleniem tekstu podglądu, wynoszące około 5 sekund.

Stack Snippets – wykonywalny JavaScript / HTML/CSS snippets

Urywki stosu mogą grupować urywki kodu JavaScript, HTML i CSS i sprawiać, że mogą być uruchamiane. Dostęp do tej funkcji można uzyskać po ikonie, która wygląda jak strona z <> na niej. Alternatywnie możesz nacisnąć CtrlNa (⌘m na OS X).

Narzędzie wycinek kodu pozwala sformatować Kod automatycznie za pomocą przycisku Tidy po lewej stronie. Możesz użyć tej opcji aby zająć się zastępowaniem tabulatorów spacjami, poprawnym wcięciem kodu i ogólną poprawą czytelności

Kiedy zapiszesz swój fragment, dostaniesz coś takiego w edytorze:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    // JavaScript code

<!-- language: lang-css -->

    /* CSS code */

<!-- language: lang-html -->

    HTML code

<!-- end snippet -->

Jeśli usuniesz komentarze begin snippet i end snippet, pozostaną ci trzy sąsiadujące fragmenty kodu, które nie są wykonywalne. Możesz również zachować pojedynczy blok kodu, który będzie miał poprawne formatowanie i wcięcia.

Korzystanie z urządzeń mobilnych

One sometimes musi nacisnąć i przytrzymać zwykły cytat, aby uzyskać backtick.

Backticks in text

Aby włączyć backstick bez przypadkowego uruchamiania kodu inline, należy go usunąć: \`
- like \` so daje: like ` so
- <kbd>Alt Gr</kbd>+<kbd>\`</kbd> gets `|` daje: Alt Gr+` gets |

Backticks wewnątrz backticks

Aby używać dosłownych backsticków w obrębie zakresu kodu, użyj dowolnego unikalna Liczba wielu backtików jako ograniczników otwarcia i zamknięcia: zarówno ``literal backtick (`) here``, jak i, na przykład, ``````literal backtick (`) here`````` dają literal backtick (`) here. To działa również w komentarzach.
Aby użyć literalnych backtików na początku i / lub końcu, dodaj jedną spację do ograniczników otwarcia i zamknięcia: `` `<html>` `` daje `<html>`, a `` $` `` daje operator Perla $`. W komentarzach dodatkowe spacje w ogranicznikach nie są obsługiwane. Zamiast tego, uciec backtick: `\`<html>\`` i `$\`` aby uzyskać `<html>` lub $` w komentarzu .