Markdown Source

Example based on [Github markdown doc syntax](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax)

# A first-level heading
## A second-level heading
### A third-level heading
                               * * *
Inline elements
---------------

* Bold:  
  `**This is bold text**` ==> **This is bold text**  
  `__This is bold text__` ==> __This is bold text__
* Italic:  
  `*This text is italicized*` ==> *This text is italicized*  
  `_This text is italicized_` ==> _This text is italicized_
* All bold and italic:  
  `***All this text is important***` ==> ***All this text is important***
* Bold and nested italic:  
  `**This text is *extremely* important**` ==> **This text is *extremely* important**  
  `*This text is **extremely** important*` ==> *This text is **extremely** important*

* Strikethrough:  
  `~~This was mistaken text~~` ==> ~~This was mistaken text~~

* Marked:  
  `==This was marked text==` ==> ==This was marked text==

* Subscript: 
 `This is a subscript text` ==> This is a subscript text 
 `This is a ~subscript~ text` ==> This is a ~subscript~ text
* Superscript: 
 `This is a superscript text` ==> This is a superscript text 
 `This is a ^superscript^ text` ==> This is a ^superscript^ text
* Inline code: 
 `Use ``git status`` to list...` ==> Use `git status` to list...

* **Links:**
 * Link in text 
 `[GitHub Pages](https://pages.github.com/)` => [GitHub Pages](https://pages.github.com/)
 * Easy link 
 `<https://www.markdownguide.org>` ==> <https://www.markdownguide.org>
 * Easy email link 
 `<fake@example.com>` ==> <fake@example.com>
 * Link from links list at end 
 `[hobbit-hole][1]` ==> [hobbit-hole][1]
 * Local relative link 
 `</index.html>` ==> </index.html> 
 `[this page](/index.html)` ==> [this page](/index.html) 
 `[this page][self]` ==> [this page][self]
* Standard/Simple line breaks:
 * Standard: two spaces and \n 
	 break line
	* Simple: any \n
	 break line

* Mentioning people and the like:  
  `@github/support` ==> @github/support (no link)  
  `@github/ETCDema` ==> @github/ETCDema (with link from ext)

* Images: 
 `![Octocat smiling and raising a tentacle.](https://myoctocat.com/assets/images/base-octocat.svg 32*32)` => ![Octocat smiling and raising a tentacle.](https://myoctocat.com/assets/images/base-octocat.svg 32*32)
* Image in float box - `!![Text in **floating** box may be with ``Markdown``](https://myoctocat.com/assets/images/base-octocat.svg 128*)` ==>!![Text in **floating** box may be with `Markdown`](https://myoctocat.com/assets/images/base-octocat.svg 128*)<== floating box from here, _this text after floating box_

* Symbols: 
 `...` ==> ... 
 `(c)` ==> (c) 
 `(TM)` ==> (TM) 
 `(R)` ==> (R) 
 and arrows: `<-- <--> --> <== <==> ==>` <-- <--> --> <== <==> ==>

---
Block elements
--------------

### Blockquotes
					
> Text that is a quote

### Blockquotes with Other Elements

> #### The quarterly results look great!
>
> - Revenue was off the chart.
> - Profits were higher than ever.
>
>  *Everything* is going according to **plan**.
>
> New paragraph not in list.

### Alerts (_github blockquotes extension_)

> [!NOTE]
> Highlights information that users should take into account, even when skimming.

> [!IMPORTANT]
> Crucial information necessary for users to succeed.

> [!WARNING]
> Critical content demanding immediate user attention due to potential risks.

---
### Lists

- George Washington
* John Adams
+ Thomas Jefferson

To order your list, precede each line with a number.

1. James Madison
1. James Monroe
1. John Quincy Adams

Nested list

1. First list item
	- First nested list item
		- Second nested list item

List and paragraph

* This is the first list item.
* Here's the second list item.

I need to add another paragraph below the second list item.

* And here's the third list item.

List and quotes

* This is the first list item.
* Here's the second list item.

> A blockquote would look great below the second list item.

* And here's the third list item.

---
### Tables

---
### Preformatted, code blocks and embeded objects

Preformatted:
```
git status
git add
git commit
```

JS code block:
``` js
function hello()
{
	alert('Hello!');
}
// GO!
hello();
```
#### Embedded element, rendered by extension:
JSON data for extension `progress-bar` (code block started with ``````` progress-bar`):
``` json
{ "max" : 200, "value": 98, "label": "Embedded progress:" }
```
Result:
``` progress-bar
{ "max" : 200, "value": 98, "label": "Embedded progress:" }
```

### Ruler
* * *
That's All!
* * *
[self]: /index.html "This page title"
[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle "Hobbit lifestyles"

## Render extension source
``` js
// Заголовки для блоков предупреждений
const _alertLabels = {
	note : '<label>[i] Информация</label>',
	important : '<label>[!] Важно</label>',
	warning : '<label>[‼] Предупреждение</label>',
};
// Отображение встроенного объекта
function _progressBar(json)
{
	try
	{
		const data = JSON.parse(json);
		return '<label>'+(data.label || '')+' <progress value="'+data.value+'" max="'+data.max+'">'+data.value+'/'+data.max+'</progress></label>'
	} catch(e)
	{
		return 'Progress bar FAIL: '+e.message;
	}
}
// Расширения генерации HTML
const renderExt = {
	// Заголовки блоков предупреждений
	alertLabel : (alert) => _alertLabels[alert],
	// Значение атрибута target для ссылок
	linkTarget : (url) => url.url[0]!=='/' && '_blank',
	// Упоминания
	mention : (el, buf) =>
	{
		if (el.group!=='github' || el.id!=='ETCDema') return false;
		buf.html('<a href="https://github.com/ETCDema" target="_blank" class="mention">@GitHub/ETCDema</a>');
	},
	// Подсветка кода
	code : (lang, code) =>
	{
		if (lang==='progress-bar') return _progressBar(code);
		const fx		= dmSyntax[lang.toUpperCase()];
		return fx && ('<pre>'+fx(code)+'</pre>');
	},
};
```

Markdown to HTML example GitHub

Markdown Source

DOM⚙️

HTML Result