Markdown
Започвайки този блог преди повече от 4 години не бях добре запознат със синтаксиса Markdown. Не си давах сметка от каква полза би могъл да ми бъде. За да спестя нерви на тези от вас, които възнамеряват да си правят блог ми се иска да споделя част от опита си.
Това е синтаксис за форматиране на plain text. Това ще да рече – без използване на специализиран софтуер като MS Word или Open Office, който да ви позволи да добавяте заглавия, списъци (номерирани и неномерирани), да форматирате шрифт, големина на текста и т.н.
Макар, че е ориентиран предимно към програмисти си струва да се използва и за всякакви други цели. Включително и лесно форматиране на блогове.
За оригиналния синтаксис можете да прочетете пълно описание тук: 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 ще видите как би изглеждал в парсиран вид.
Codeblocks
Тези три backtick-а, обаче не са описани в документацията на Markdown, за която дадох линк по-рано. Това е поради причината, че оригинално синтаксисът е замислен codeblocks просто да бъдат въвеждани с табулация (или 4 space-а) по-навътре от останалото съдържание. В този случай просто текстът ще бъде ограден в <pre>.
<pre> таговете дават страхотна възможност за запазване на whitespace и добавяне на основни стилове. Могат да разграничат код от текст. Проблемът обаче е, че не позволява лесен syntax highlighting.
Използвайки различни JavaScript plugin-и е възможно съдържанието на <pre> елементите да се стилизира по подходящ начин. Но трябва да имаме информация за това какъв програмен език се използва точно. Аз лично често в блога си пиша HTML, CSS, JavaScript и PHP (цели 4 езика), а на света има още много.
GitHub Flavored Markdown
По тази причина, от GitHub са надградили оригиналния Markdown и го наричат GitHub Flavored Markdown. Съществуват и други реализации, така че е възможно на места да забележите малка разлика във форматирането. Основната идея обаче, си остава една и съща.
В него има и други подобрения, а не просто възможност да въвеждане на codeblock, в който се конкретизира езика. Останалите особености са доста специфични за GitHub и сега няма да ги разглеждаме.
WP-Markdown
Ако решите да използвате Markdown във вашия WordPress сайт, мога да ви препоръчам WP-Markdown plugin-а. Аз самият си го инсталирах след редизайна на сайта си.
Официалната версия на plugin-а, обаче не поддържа GitHub Flavored-like codeblocks с три backtick-а. Тя работи само версията на код с отстъп от една табулация (или четири интервала). Това е версия 1.5.
Ако обаче като мене се позаинтересувате кой и къде разработва plugin-а ще намерите и алфа верния на 1.6 на plugin-а. Помнете, че е неслучайно alpha. Тя парсира правилно codebocks с три backtick-а и име на езика.
Проблемът е, че тази функционалност не е напълно готова и след като се парсира, при повторно редактиране на blogpost-а ще изглежда малко странно. Това доста спъва работата и е по-близко до начина, по който преди въвеждах постовете си – суров HTML. А целта ми лично на мене беше да избягам от този начин.
Преди ако тръгнех да пиша подобен HTML трябваше да escape-вам всеки специален знак като < и да го вписвам като <.
Magadanski WP-Markdown Fork
С малко желание обаче от моя страна, съм копирал 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):
