markbind/docs/userGuide/markBindSyntaxOverview.md at master · MarkBind/markbind · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
{% set title = "MarkBind Syntax Overview" %}
{% set filename = "markBindSyntaxOverview" %}
<span id="title" class="d-none">{{ title }}</span>

<frontmatter>
  title: "User Guide: {{ title }} "
  layout: userGuide.md
</frontmatter>

<span id="link" class="d-none">
[_User Guide → {{ title }}_]({{ filename }}.html)
</span>

# {{ title }}


<div class="lead" id="overview">

**A MarkBind source file may contain a mix of several popular syntax schemes** used in creating web pages. MarkBind source file can be as simple as basic Markdown, and you can use progressively more complicated syntax to create progressively more sophisticated Web pages while optimizing other aspects such as content reuse.
</div>

Given below is an overview of the syntax schemes supported by MarkBind.

<box>

{{ icon_info }} Exact usage of various MarkBind syntax is described in separate sections such as <include src="formattingContents.md#link" inline trim />
</box>

#### {{ icon_check_blue }} Support for Markdown

MarkBind supports all basic Markdown syntax.

<panel type="seamless" header="Some examples ...">
<include src="syntax/headings.md#main-example" />
<include src="syntax/textStyles.md#main-example-markdown" />
<include src="syntax/links.md#main-example" />
</panel>

<!-- ======================================================================================================= -->

#### {{ icon_check_blue }} Support for GFMD

MarkBind supports additional Markdown features provided by GitHub-Flavored Markdown (GFMD).

<panel type="seamless" header="Some examples ...">
<include src="syntax/code.md#main-example" />
<include src="syntax/lists.md#main-example-gfmd" />
<include src="syntax/emoji.md#main-example" />
</panel>


<!-- ======================================================================================================= -->

#### {{ icon_check_blue }} MarkBind Extensions to Markdown

MarkBind adds several Markdown-like features on top of GFMD.

<panel type="seamless" header="Some examples ...">
<include src="syntax/textStyles.md#main-example-markbind" />
<include src="syntax/lists.md#main-example-markbind" />
<include src="syntax/footnotes.md#main-example-markbind" />
</panel>

<!-- ======================================================================================================= -->

#### {{ icon_check_blue }} MarkBind Custom Syntax

Given below are some examples of custom syntax added by MarkBind.

{% macro quote_topic(filename) %}
<blockquote>
<include src="{{ filename }}#overview" inline />
</blockquote>

<div class="indented">
More info: <include src="{{ filename }}#link" inline trim/>
</div>
<br>
{% endmacro %}

{% for filename in ['syntax/variables.md', 'syntax/includes.md', 'usingComponents.md'] %}
{{ quote_topic(filename) }}
{% endfor %}

<!-- ======================================================================================================= -->

#### {{ icon_check_blue }} Support for HTML, JavaScript, CSS

{{ quote_topic('usingHtmlJavaScriptCss.md') }}

<!-- ======================================================================================================= -->

#### {{ icon_check_blue }} Support for Bootstrap

MarkBind has Vue.js components built on the popular [BootStrap](https://getbootstrap.com/docs/5.1/getting-started/introduction/) framework. Much of Bootstrap's features are supported in and out of these components as well. However, interactive BootStrap components like dismissible alerts and toasts are not supported.

<!-- ======================================================================================================= -->

#### {{ icon_check_blue }} Support for Nunjucks

[Nunjucks](https://mozilla.github.io/nunjucks/) is a JavaScript based templating tool. Here is a simple example:

%%CODE:%%
<div class="indented">

{% raw %}
```html
<ul>
{% for item in [1, 2, 3, 4] %}
  <li>Item {{ item }}</li>
{% endfor %}
</ul>
```
{% endraw %}

</div>

%%OUTPUT:%%
<div class="indented">

<box border-left-color="grey">

<ul>
{% for item in [1, 2, 3, 4] %}
  <li>Item {{ item }}</li>
{% endfor %}
</ul>

</box>
</div>

As MarkBind uses Nunjucks behind the scene, **MarkBind is generally compatible with Nunjucks**, which means you can use Nunjucks templating in your source files. Note that ==the code is processed for Nunjucks syntax before the rest of the MarkBind syntax are processed==.

{% from "njk/common.njk" import previous_next %}
{{ previous_next('addingPages', 'formattingContents') }}