Convert tags to markdown

Closes #293

src/pages/faq.mdx

@@ -8,7 +8,7 @@ import Layout from '../layouts/Layout.astro';
 
 # FAQ
 
-These Frequently Asked Question are real questions of developers started with BEM, answered by the GetBEM community. Feel free to <a href="https://github.com/getbem/getbem.github.io/discussions/new">ask your question</a> too.
+These Frequently Asked Question are real questions of developers started with BEM, answered by the GetBEM community. Feel free to [ask your question](https://github.com/getbem/getbem.github.io/discussions/new) too.
 
 - [Why should I choose BEM and not another CSS modular solution?](#why-bem)
 - [Why are the modifier CSS classes not represented as a combined selector?](#why-the-modifier-classes-are-prefixed)

src/pages/introduction.mdx

@@ -17,12 +17,12 @@ This is also true for long-term projects with legacy code (read ["How to Scale a
 
 ## Methodologies
 
-There are plenty of <a href="https://github.com/awesome-css-group/awesome-css#naming-conventions--methodologies-bulb">methodologies</a> out there aiming to reduce the CSS footprint, organize cooperation among programmers and maintain large CSS codebases. This is obvious in large projects like Twitter, Facebook and <a href="http://markdotto.com/2014/07/23/githubs-css/#two-bundles">GitHub</a>, but other projects often grow into some “Huge CSS file” state pretty quickly.
+There are plenty of [methodologies](https://github.com/awesome-css-group/awesome-css#naming-conventions--methodologies-bulb) out there aiming to reduce the CSS footprint, organize cooperation among programmers and maintain large CSS codebases. This is obvious in large projects like Twitter, Facebook and [GitHub](http://markdotto.com/2014/07/23/githubs-css/#two-bundles), but other projects often grow into some “Huge CSS file” state pretty quickly.
 
-- <a href="//oocss.org/">OOCSS</a> — Separating container and content with CSS “objects”
-- <a href="//smacss.com/">SMACSS</a> — Style-guide to write your CSS with five categories for CSS rules
-- <a href="//suitcss.github.io/">SUITCSS</a> — Structured class names and meaningful hyphens
-- <a href="//acss.io/">Atomic</a> — Breaking down styles into atomic, or indivisible, pieces
+- [OOCSS](https://oocss.org/) — Separating container and content with CSS “objects”
+- [SMACSS](https://smacss.com/) — Style-guide to write your CSS with five categories for CSS rules
+- [SUITCSS](https://suitcss.github.io/) — Structured class names and meaningful hyphens
+- [Atomic](https://acss.io/) — Breaking down styles into atomic, or indivisible, pieces
 
 ## Why BEM over the others?
 
@@ -60,7 +60,7 @@ A flag on a block or element. Use them to change appearance or behavior.
 
 ## Under the hood
 
-Let’s look how one particular element on a page can be implemented in BEM. We will take `button` from <a href="https://primer.style/css/components/buttons">GitHub</a>:
+Let’s look how one particular element on a page can be implemented in BEM. We will take `button` from [GitHub](https://primer.style/css/components/buttons):
 
 <Image src={import('../assets/github_buttons.jpg')} alt="GitHub buttons"/>
 
@@ -105,7 +105,7 @@ We can have a normal button for usual cases, and two more states for different o
 
 ### Modularity
 
-Block styles are never dependent on other elements on a page, so you will never experience <a href="http://www.phase2technology.com/blog/used-and-abused-css-inheritance-and-our-misuse-of-the-cascade/">problems from cascading</a>.
+Block styles are never dependent on other elements on a page, so you will never experience [problems from cascading](http://www.phase2technology.com/blog/used-and-abused-css-inheritance-and-our-misuse-of-the-cascade/).
 
 You also get the ability to transfer blocks from your finished projects to new ones.
 
@@ -121,16 +121,15 @@ BEM methodology gives your CSS code a solid structure that remains simple and ea
 
 ## Further Reading
 
-- <a href="http://blog.decaf.de/2015/06/24/why-bem-in-a-nutshell/">‘Why BEM?’ in a nutshell</a>
-- <a href="http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/">MindBEMding</a> — getting your head ’round BEM syntax
-- <a href="http://cssguidelin.es/#bem-like-naming">CSS guidelines</a>
-- <a href="http://www.smashingmagazine.com/2014/07/17/bem-methodology-for-small-projects/">BEM methodology for small projects</a>
-- <a href="http://www.slideshare.net/MaxShirshin/bem-it-for-brandwatch">BEM It! for Brandwatch</a>
-- <a href="http://www.phase2technology.com/blog/used-and-abused-css-inheritance-and-our-misuse-of-the-cascade/">Used and Abused</a> — CSS Inheritance and Our Misuse of the Cascade.
-- <a href="https://medium.com/objects-in-space/objects-in-space-f6f404727">Objects in Space</a> — A style-guide for modular SASS development using SMACSS and BEM
-- <a href="http://webuild.envato.com/blog/how-to-scale-and-maintain-legacy-css-with-sass-and-smacss/">How to Scale and Maintain Legacy CSS with Sass and SMACSS</a>
-- <a href="https://bluegg.co.uk/writing/building-my-health-skills-part-3">Building a modular My Health Skills with BEM and Sass</a>
-- <a href="https://bluegg.co.uk/writing/building-my-health-skills-part-3">Building My Health Skills — Part 3</a>
+- [‘Why BEM?’ in a nutshell](http://blog.decaf.de/2015/06/24/why-bem-in-a-nutshell/)
+- [MindBEMding](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) — getting your head ’round BEM syntax
+- [CSS guidelines](http://cssguidelin.es/#bem-like-naming)
+- [BEM methodology for small projects](http://www.smashingmagazine.com/2014/07/17/bem-methodology-for-small-projects/)
+- [BEM It! for Brandwatch](http://www.slideshare.net/MaxShirshin/bem-it-for-brandwatch)
+- [Used and Abused](http://www.phase2technology.com/blog/used-and-abused-css-inheritance-and-our-misuse-of-the-cascade/) — CSS Inheritance and Our Misuse of the Cascade.
+- [Objects in Space](https://medium.com/objects-in-space/objects-in-space-f6f404727) — A style-guide for modular SASS development using SMACSS and BEM
+- [How to Scale and Maintain Legacy CSS with Sass and SMACSS](http://webuild.envato.com/blog/how-to-scale-and-maintain-legacy-css-with-sass-and-smacss/)
+- [Building a modular My Health Skills with BEM and Sass](https://bluegg.co.uk/writing/building-my-health-skills-part-3)
 
 </div>
 </Layout>

src/pages/naming.mdx

@@ -20,15 +20,15 @@ Encapsulates a standalone entity that is meaningful on its own. While blocks can
 
 | Naming | HTML | CSS |
 | ------ | ---- | --- |
-| Block names may consist of Latin letters, digits, and dashes. To form a CSS class, add a short prefix for namespacing: `.block` | Any DOM node can be a block if it accepts a class name. `<div class="block">...</div>` | Use class name selector only. <a href="/faq/#why-not-use-ids-or-tagnames">No tag name or ids</a>. No dependency on other blocks/elements on a page. `.block { color: #042; }` |
+| Block names may consist of Latin letters, digits, and dashes. To form a CSS class, add a short prefix for namespacing: `.block` | Any DOM node can be a block if it accepts a class name. `<div class="block">...</div>` | Use class name selector only. [No tag name or ids](/faq/#why-not-use-ids-or-tagnames). No dependency on other blocks/elements on a page. `.block { color: #042; }` |
 
 ## Element
 
 Parts of a block and have no standalone meaning. Any element is semantically tied to its block.
 
 | Naming | HTML | CSS |
 | ------ | ---- | --- |
-| Element names may consist of Latin letters, digits, dashes and underscores. CSS class is formed as block name plus two underscores plus element name: `.block__elem` | Any DOM node within a block can be an element. Within a given block, all elements are semantically equal. | `<div class="block"><span class="block__elem"></span></div>` | Use class name selector only. <a href="/faq/#why-not-use-ids-or-tagnames">No tag name or ids</a>. No dependency on other blocks/elements on a page. |
+| Element names may consist of Latin letters, digits, dashes and underscores. CSS class is formed as block name plus two underscores plus element name: `.block__elem` | Any DOM node within a block can be an element. Within a given block, all elements are semantically equal. | `<div class="block"><span class="block__elem"></span></div>` | Use class name selector only. [No tag name or ids](/faq/#why-not-use-ids-or-tagnames). No dependency on other blocks/elements on a page. |
 
 ### Good
 
@@ -49,7 +49,7 @@ Flags on blocks or elements. Use them to change appearance, behavior or state.
 
 | Naming | HTML | CSS |
 | ------ | ---- | --- |
-| Modifier names may consist of Latin letters, digits, dashes and underscores. CSS class is formed as block’s or element’s name plus two dashes: <code>.block--mod</code> or <code>.block__elem--mod</code> and <code>.block--color-black</code> with <code>.block--color-red</code>. Spaces in complicated modifiers are replaced by dash. | Modifier is an extra class name which you add to a block/element DOM node. Add modifier classes only to blocks/elements they modify, and keep the original class. | Use modifier class name as selector: `.block--hidden { }` To alter elements based on a block-level modifier: `.block--mod .block__elem { }` Element modifier: `.block__elem--mod { }` |
+| Modifier names may consist of Latin letters, digits, dashes and underscores. CSS class is formed as block’s or element’s name plus two dashes: `.block--mod` or `.block__elem--mod` and `.block--color-black` with `.block--color-red`. Spaces in complicated modifiers are replaced by dash. | Modifier is an extra class name which you add to a block/element DOM node. Add modifier classes only to blocks/elements they modify, and keep the original class. | Use modifier class name as selector: `.block--hidden { }` To alter elements based on a block-level modifier: `.block--mod .block__elem { }` Element modifier: `.block__elem--mod { }` |
 
 ### Good
 
@@ -66,7 +66,7 @@ Flags on blocks or elements. Use them to change appearance, behavior or state.
 
 ## Example
 
-Suppose you have block form with modifiers <code>theme: "xmas"</code> and <code>simple: true</code> and with elements <code>input</code> and <code>submit</code>, and element <code>submit</code> with its own modifier <code>disabled: true</code> for not submitting form while it is not filled:
+Suppose you have block form with modifiers `theme: "xmas"` and `simple: true` and with elements `input` and `submit`, and element `submit` with its own modifier `disabled: true` for not submitting form while it is not filled:
 
 ### HTML