From e157cd242bbed14857a59d533091515ed905f189 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9my=20F?= <yne@users.noreply.github.com>
Date: Sun, 24 Apr 2022 17:15:58 +0200
Subject: [PATCH] doc: Add syntax highlighting

For better readability
---
 docs/examples/renderer_rules.md | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/docs/examples/renderer_rules.md b/docs/examples/renderer_rules.md
index 7318b7a..ae101f9 100644
--- a/docs/examples/renderer_rules.md
+++ b/docs/examples/renderer_rules.md
@@ -2,14 +2,14 @@
 ## Default renderer rules
 Rules on how to translate markdown content to HTML elements are stored in `renderer.rules`:
 
-```
+```js
 const MarkdownIt = require('markdown-it');
 const md = new MarkdownIt();
 
 console.log(Object.keys(md.renderer.rules))
 ```
 Output:
-```
+```js
 [
   'code_inline',
   'code_block',
@@ -32,7 +32,7 @@ Let's use a Hello World example:
   [Link to Demo](https://markdown-it.github.io/#md3=%7B%22source%22%3A%22-%20Hello%20World%22%2C%22defaults%22%3A%7B%22html%22%3Afalse%2C%22xhtmlOut%22%3Afalse%2C%22breaks%22%3Afalse%2C%22langPrefix%22%3A%22language-%22%2C%22linkify%22%3Afalse%2C%22typographer%22%3Afalse%2C%22_highlight%22%3Afalse%2C%22_strict%22%3Afalse%2C%22_view%22%3A%22debug%22%7D%7D)
 
 Now take a closer look at the first element in the resulting list:
-```
+```js
 {
     "type": "bullet_list_open",
     "tag": "ul",
@@ -67,7 +67,7 @@ Create a rule to add the CSS class "lorem_ipsum" to every <ul>
 ```
 
 Rules are functions that accept a number of parameters:
-```
+```js
 const MarkdownIt = require('markdown-it');
 const md = new MarkdownIt();
 
@@ -85,7 +85,7 @@ We assign the new rule to the key that corresponds to the html tag we want to mo
 
 It is good practice however to save the default renderer for your element and only make minimal chances to the rules in place, instead of reinventing the wheel:
 
-```
+```js
 const MarkdownIt = require('markdown-it');
 const md = new MarkdownIt();
 
@@ -104,7 +104,7 @@ CSS classes are attributes on HTML elements. If we think back to the object repr
 
 Looking at [the API documention for Token objects](https://markdown-it.github.io/markdown-it/#Token.attrJoin) we find the `attrJoin` method. This method allows us to join an existing attributes value with a new value or create the attribute if it doens't exist yet. Simply pushing the value (for example with `token.attr.push(["key", "value"]`) would overwrite any previous change:
 
-```
+```js
 const MarkdownIt = require('markdown-it');
 const md = new MarkdownIt();
 
@@ -119,7 +119,7 @@ md.renderer.rules.bullet_list_open = function(tokens, idx, options, env, self) {
 };
 ```
 Let's test the finished rule:
-```
+```js
 const MarkdownIt = require('markdown-it');
 const md = new MarkdownIt();
 
@@ -136,7 +136,7 @@ md.renderer.rules.bullet_list_open = function(tokens, idx, options, env, self) {
 console.log(md.render("- Hello World"));
 ```
 Output: 
-```
+```html
 <ul class="lorem_ipsum">
 <li>Hello World</li>
 </ul>
@@ -145,7 +145,7 @@ Output:
 Let's imagine we are using CSS pseudo classes such as `:before` and `:after` to style our list because using `list-style-type` doesn't provide the bullet types we want and `list-style-image` isn't flexible enough to position itself properly across all major browsers.
 
 To keep a proper line wrapping in our list we have set all elements in our `li` to display as a block (`li * {display: block;}`). This works for our pseudo classes and other `HTMLElements`. However, it does not work for `TextNodes`. So having this output will produce weird line indents:
-```
+```html
 <ul>
   <li>Hello World</li>
 <ul>
@@ -153,7 +153,7 @@ To keep a proper line wrapping in our list we have set all elements in our `li`
 
 To fix this we can use a wrapper element which can be properly displayed as a block:
 
-```
+```html
 <ul>
   <li>
     <span>Hello World</span>
@@ -177,7 +177,7 @@ list_item_close
 
 Now use this information to add the new rules:
 
-```
+```js
 const MarkdownIt = require('markdown-it');
 const md = new MarkdownIt();
 
@@ -196,7 +196,7 @@ md.renderer.rules.list_item_close = function(tokens, idx, options, env, self) {
 ```
 Testing our modification:
 
-```
+```js
 const MarkdownIt = require('markdown-it');
 const md = new MarkdownIt();
 
@@ -216,7 +216,7 @@ md.renderer.rules.list_item_close = function(tokens, idx, options, env, self) {
 console.log(md.render("- Hello World"));
 ```
 Output:
-```
+```html
 <ul>
   <li>
     <span>Hello World</span>
@@ -225,7 +225,7 @@ Output:
 ```
 
 Of course using string manipulation might get really messy for bigger changes. So consider using `markdown-it`s Token class instead:
-```
+```js
 const MarkdownIt = require('markdown-it');
 const Token = require('markdown-it/lib/token');
 const md = new MarkdownIt();
@@ -253,7 +253,7 @@ console.log(md.render("- Hello World"));
 
 Output:
 
-```
+```html
 <ul>
   <li>
     <span>Hello World<span>