Меню

Други

Влез Излез

Markdown

Започвайки този блог преди повече от 4 години не бях добре запознат със синтаксиса Markdown и не си давах сметка от каква полза би могъл да ми бъде. За да спестя нерви на тези от вас, които възнамеряват да си правят блог ми се иска да споделя част от опита си.

Това е синтаксис за форматиране на plain text. Това ще да рече – без използване на специализиран софтуер като MS Word или Open Office, който да ви позволи да добавяте заглавия, списъци (номерирани и неномерирани), да форматирате шрифт, големина на текста и т.н.

Макар, че е ориентиран предимно към програмисти (кой друг пише в текстов редактор в plain text формат?) си струва да се използва и за всякакви други цели, включително и лесно форматиране на блогове.

За оригиналния синтаксис можете да прочетете както пълно описание тук: https://daringfireball.net/projects/markdown/syntax, така и да разгледате следния кратък пример:

# H1
## H2
### H3
#### H4
##### H5
###### H6

* unordered list item
* another one
* final one

1. ordered list item 1
1. ordered list item 2
1. ordered list item 3

За _курсив_ се използва или една долна черта, или пък *една* звездичка около думата.

За __удебелен шрифт__ аналогично се използват по **две** долни черни или звездички.

За ключова дума (визира се основно програмен код) се използват така наречените `backticks`.

Ако искате пък да вкарате цялостен codeblock можете да го направите с по 3 `backtick`-а:

```html
<html>
    <head>
        <title>Заглавие</title>
    </head>
    <body>
        <p>Съдържание</p>
    </body>
</html>
```

И накрая можем да дадем [линк](https://gist.github.com/magadanskiuchen/479e843ca6161e683060fe82f5ec5e92) за форматирана версия на този текст.

И нека все пак напомним, че синтаксисът горе може да изглежда малко по-особено при четене, но той не е предназначен за това. Той е предназначен за писане.

Идеята зад Markdown е текст, използващ гореописания синтаксис, лесно да оформим web документ.

Та, ако последвате линка горе, или просто отворите https://gist.github.com/magadanskiuchen/479e843ca6161e683060fe82f5ec5e92 ще видите как би изглеждал в парсиран вид.

Тези три backtick-а, обаче не са описани в документацията на Markdown, за която дадох линк по-рано. Това е поради причината, че оригинално синтаксисът е замислен codeblocks просто да бъдат въвеждани с табулация (или 4 space-а) по-навътре от останалото съдържание и в този случай просто текстът да бъде ограден в <pre>.

Проблемът идва от там, че макар и <pre> таговете да дават страхотна възможност за запазване на whitespace и добавяне на основни стилове, които да разграничат код от текст, не позволява за лесен syntax highlighting.

Използвайки различни JavaScript plugin-и е възможно съдържанието на <pre> елементите да се стилизира по подходящ начин, но отново трява да имаме информация за това какъв програмен език се използва точно. Аз лично често в блога си пиша HTML, CSS, JavaScript и PHP (цели 4 езика), а на света има още много.

По тази причина, от GitHub са надградили оригиналния Markdown и го наричат GitHub Flavored Markdown. Съществуват и други реализации, така че е възможно на места да забележите малка разлика във форматирането, но основната идея си остава една и съща.

В него има и други подобрения, а не просто възможност да въвеждане на codeblock, в който се конкретизира езика, но останалите особености са доста специфични за GitHub и сега няма да ги разглеждаме.

Ако решите да използвате Markdown във вашия WordPress сайт, мога да ви препоръчам WP-Markdown plugin-а, който и аз самият си инсталирах след редизайна на сайта си.

Официалната версия на plugin-а, обаче не поддържа GitHub Flavored-like codeblocks с три backtick-а, а работи само версията на код с отстъп от една табулация (или четири интервала). Това е версия 1.5.

Ако обаче като мене се позаинтересувате кой и къде разработва plugin-а ще намерите и алфа верния на 1.6 на plugin-а (помнете, че е неслучайно alpha), която парсира правилно codebocks с три backtick-а и име на езика.

Проблемът е, че тази функционалност не е напълно готова и след като се парсира, при повторно редактиране на blogpost-а ще изглежда малко странно, което доста спъва работата и е по-близко до начина, по който преди въвеждах постовете си – суров HTML. А целта ми лично на мене беше да избягам от този начин.

Преди ако тръгнех да пиша подобен HTML трябваше да escape-вам всеки специален знак като < и да го вписвам като &lt;.

С малко желание обаче от моя страна, съм копирал plugin-а при себе си: https://github.com/magadanskiuchen/WP-MarkDown и съм добавил едно подобрение по кода, което да разреши този проблем. Писал съм и на автора на plugin-а с предложение да копира моя код в оригиналната версия: https://github.com/stephenharris/WP-MarkDown/pull/70. Въпросът е само и той да има малко свободно време да прегледа кода ми и да потвърди, че не съм объркал нещо.

Освен това работя и по вариант, при който да използвам други JS и CSS за форматирането на тези codeblocks, тъй като версиите, които са използвани в plugin-а не са ми особено присърце, а би предпочел http://prismjs.com/.

Даже може да се каже, че вече съм готов с интеграцията на тази опция, но само на копие на сайта, което имам на личния си компютър и още не съм качил всичко live, тъй като не съм направил достатъчно тестове, а и като че ли ми се иска първо версия 1.6 на WP-Markdown да излезе официално.

Все пак ето и един teaser за да получите по-добра идея какво бихте могли да очаквате за в бъдеще (малко демо на това как би изглеждал урокът ми Достъпен Слайдер (Accessible Slider) – 1/2):

accessible slider prismjs demo markdown

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax