diff --git a/CNAME b/CNAME new file mode 100644 index 0000000..a53954b --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +markbind.org diff --git a/LazyLiveReloadLoadingSite.html b/LazyLiveReloadLoadingSite.html deleted file mode 100644 index 8347735..0000000 --- a/LazyLiveReloadLoadingSite.html +++ /dev/null @@ -1,66 +0,0 @@ - - - - - Building ... - - -
-
... building your page ...
- - - - diff --git a/about.html b/about.html new file mode 100644 index 0000000..b6e3042 --- /dev/null +++ b/about.html @@ -0,0 +1,32 @@ + + + + + + + + MarkBind - About Us + + + + + + + + + + + + + + + + +

About Us

MarkBind is a project based in National University of Singapore, School of Computing, and is funded by an education grant from NUS Center for Development of Teaching and Learning.

The project team:

Contributors:

Past Members:

You can email us at markbind at comp.nus.edu.sg

Interested in contributing to MarkBind? Visit the MarkBind project on GitHub.

+ + + diff --git a/about.page-vue-render.js b/about.page-vue-render.js new file mode 100644 index 0000000..adebb33 --- /dev/null +++ b/about.page-vue-render.js @@ -0,0 +1,13 @@ + + var pageVueRenderFn = function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',[_c('header',{attrs:{"fixed":""}},[_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/index.html","title":"Home"}},[_c('img',{attrs:{"src":"/images/logo-darkbackground.svg","height":"20"}})])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('form',{staticClass:"navbar-form"},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback,"menu-align-right":""}})],1)])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/index.html"}},[_v("HOME")])]),_v(" "),_c('div',{attrs:{"tags":"environment--ug"}},[_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"sibling-or-child","href":"/userGuide/index.html"}},[_v("USER GUIDE")])])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/showcase.html"}},[_v("SHOWCASE")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/about.html"}},[_v("ABOUT")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_c('span',[_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}})])])])])],1)]),_v(" "),_m(0),_v(" "),_m(1)])} +}; + var pageVueStaticRenderFns = [function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"flex-body"}},[_c('div',{staticClass:"fixed-header-padding",attrs:{"id":"content-wrapper"}},[_c('h1',{attrs:{"id":"about-us"}},[_c('span',{staticClass:"anchor",attrs:{"id":"about-us"}}),_v("About Us"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#about-us","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('span',{staticClass:"lead"},[_v("MarkBind is a project "),_c('strong',[_v("based in "),_c('a',{attrs:{"href":"http://www.comp.nus.edu.sg/"}},[_v("National University of Singapore, School of Computing")])]),_v(", and is funded by an education grant from "),_c('a',{attrs:{"href":"http://www.cdtl.nus.edu.sg/"}},[_v("NUS Center for Development of Teaching and Learning")]),_v(".")])]),_v(" "),_c('p',[_v("The "),_c('strong',[_v("project team")]),_v(":")]),_v(" "),_c('ul',[_c('li',[_c('a',{attrs:{"href":"https://github.com/acjh"}},[_c('strong',[_v("Aaron Chong Jun Hao")])]),_v(": "),_c('em',[_v("Project Mentor")]),_v(" since Jul 2018, "),_c('em',[_v("Team Lead")]),_v(" for Aug 2017 - Jun 2018")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/ang-zeyu"}},[_c('strong',[_v("Ang Ze Yu")])]),_v(": "),_c('em',[_v("Project Member")]),_v(" since Jan 2020")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://github.com/Chng-Zhi-Xuan"}},[_c('strong',[_v("Chng Zhi Xuan")])]),_v(": "),_c('em',[_v("Project Member")]),_v(" since May 2018")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://github.com/nicholaschuayunzhi"}},[_c('strong',[_v("Chua Yun Zhi Nicholas")])]),_v(": "),_c('em',[_v("Project Member")]),_v(" since Jan 2018")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.comp.nus.edu.sg/~damithch/"}},[_c('strong',[_v("Damith C. Rajapakse")])]),_v(": "),_c('em',[_v("Project Mentor")]),_v(" since Aug 2016")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/openorclose"}},[_c('strong',[_v("Daryl Tan")])]),_v(": "),_c('em',[_v("Project Member")]),_v(" since May 2019")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://github.com/jamos-tay"}},[_c('strong',[_v("Jamos Tay")])]),_v(": "),_c('em',[_v("Project Member")]),_v(" since Aug 2018")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/nbriannl"}},[_c('strong',[_v("Labayna Neil Brian Narido")])]),_v(": "),_c('em',[_v("Project Member")]),_v(" since Jan 2020")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/marvinchin"}},[_c('strong',[_v("Marvin Chin Kun Song")])]),_v(": "),_c('em',[_v("Project Mentor")]),_v(" since Jan 2020, "),_c('em',[_v("Project Member")]),_v(" for Jan 2019 - Aug 2019")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://github.com/yamgent"}},[_c('strong',[_v("Tan Wang Leng")])]),_v(": Current "),_c('em',[_v("Team Lead")]),_v(" since Jul 2018, "),_c('em',[_v("Project Member")]),_v(" for May 2018 - Jun 2018")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/le0tan"}},[_c('strong',[_v("Tan Yuanhong")])]),_v(": "),_c('em',[_v("Project Member")]),_v(" since Jan 2020")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/yash-chowdhary"}},[_c('strong',[_v("Yash Chowdhary")])]),_v(": "),_c('em',[_v("Project Member")]),_v(" since Jan 2020")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/alyip98"}},[_c('strong',[_v("Yip Seng Yeun")])]),_v(": "),_c('em',[_v("Project Member")]),_v(" since May 2019")])]),_v(" "),_c('p',[_v("Contributors:")]),_v(" "),_c('ul',[_c('li',[_c('a',{attrs:{"href":"https://www.github.com/madanalogy"}},[_c('strong',[_v("Ahmed Bahajjaj")])]),_v(": "),_c('em',[_v("Contributor")]),_v(" since Jan 2020")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/dvrylc"}},[_c('strong',[_v("Daryl Chan")])]),_v(": "),_c('em',[_v("Contributor")]),_v(" since Jan 2020")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/Parcly-Taxel"}},[_c('strong',[_v("Jeremy Tan Jie Rui")])]),_v(": "),_c('em',[_v("Contributor")]),_v(" since Jan 2020")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/hcwong"}},[_c('strong',[_v("Joshua Wong")])]),_v(": "),_c('em',[_v("Contributor")]),_v(" since Jan 2020")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/crphang"}},[_c('strong',[_v("Phang Chun Rong")])]),_v(": "),_c('em',[_v("Contributor")]),_v(" since Jan 2020")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/Tejas2805"}},[_c('strong',[_v("Tejas Bhuwania")])]),_v(": "),_c('em',[_v("Contributor")]),_v(" since Jan 2020")])]),_v(" "),_c('p',[_v("Past Members:")]),_v(" "),_c('ul',[_c('li',[_c('a',{attrs:{"href":"https://github.com/danielbrzn"}},[_c('strong',[_v("Daniel Berzin Chua Yuan Siang")])]),_v(": "),_c('em',[_v("Project Member")]),_v(" for Jan 2018 - Aug 2018")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://github.com/nusjzx"}},[_c('strong',[_v("Jia Zhixin")])]),_v(": "),_c('em',[_v("Project Member")]),_v(" for May 2018 - Aug 2018")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://github.com/Gisonrg"}},[_c('strong',[_v("Jiang Sheng")])]),_v(": "),_c('em',[_v("Founding Member")]),_v(" and "),_c('em',[_v("Team Lead")]),_v(" for Aug 2016 - Jul 2017")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/sijie123"}},[_c('strong',[_v("Lin Si Jie")])]),_v(": "),_c('em',[_v("Project Member")]),_v(" for Jan 2019 - Aug 2019")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://github.com/luyangkenneth"}},[_c('strong',[_v("Lu Yang Kenneth")])]),_v(": "),_c('em',[_v("Project Member")]),_v(" for Jan 2019 - Aug 2019")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/amad-person"}},[_c('strong',[_v("Maddi Aadyaa")])]),_v(": "),_c('em',[_v("Project Member")]),_v(" for Jan 2019 - Aug 2019")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://github.com/rachx"}},[_c('strong',[_v("Rachael Sim Hwee Ling")])]),_v(": "),_c('em',[_v("Project Member")]),_v(" for Jan 2018 - Dec 2018")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/Xenonym"}},[_c('strong',[_v("Tan Zhen Yong")])]),_v(": "),_c('em',[_v("Project Member")]),_v(" for Jan 2019 - Aug 2019")])]),_v(" "),_c('p',[_c('span',{staticClass:"glyphicon glyphicon-send",attrs:{"aria-hidden":"true"}}),_v(" You can "),_c('strong',[_v("email us")]),_v(" at "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind")]),_v(" at "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("comp.nus.edu.sg")])]),_v(" "),_c('p',[_c('span',{staticClass:"glyphicon glyphicon-console",attrs:{"aria-hidden":"true"}}),_v(" Interested in "),_c('strong',[_v("contributing to MarkBind")]),_v("? Visit the "),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind"}},[_v("MarkBind project on GitHub")]),_v(".")]),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})])])} +},function anonymous( +) { +with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 3.1.1")]),_v(" on Sat, 22 Jan 2022, 16:49:34 UTC]")]),_c('br'),_v(" "),_c('small',[_v("This site is powered by "),_c('a',{attrs:{"href":"https://www.netlify.com/"}},[_v("Netlify")]),_v(".")])])])])} +}]; + \ No newline at end of file diff --git a/index.html b/index.html index 85fefa8..261b487 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - + MarkBind - Generate More Dynamic Websites from Markdown Text @@ -12,8 +12,8 @@ - - + + @@ -24,11 +24,9 @@ const baseUrl = '' -

MarkBind

Generate as opposed to one-size-fits-all static contentmore dynamic websites from Markdown text. +

MarkBind

Generate as opposed to one-size-fits-all static contentmore dynamic websites from Markdown text. Optimized for creating text-heavy websites e.g., eLearning websites, online instruction manuals, project documentation etc.. -

Get Started

Simple syntax. Dynamic content.

MarkBind source files can be as simple as basic Markdown, but you can also use a mix of several popular syntax schemes (GitHub Flavored MarkdownGFMD, BootStrap, NunJucks, etc. as well as MarkBind's own custom syntax) to create more dynamic content that you cannot normally get from a typical markdown-to-html site generator.

Here are some simple text-formatting examples:

Syntax scheme Code Output
Markdown **bold text** _italic text_ bold text italic text
GFMD ~~striked out text~~ striked out text
MarkBind extensions to Markdown ==highlighted text==
%%grey text%%
!!underlined text!!		 highlighted text
grey text
underlined text

More examples of generating static content

The example paragraph below has the following dynamic elements: a tooltip, a popover, and a modal. Hover/click on the underlined words to see each.

In Computer ScienceCS, a binary tree is a tree data structure in which each node has at most two children, which are referred to as the left child and the right child. Primitive data types on the other hand ...

An example tree data structure


[source:wikipedia]

More examples of generating dynamic content

Everything you need for text-heavy websites, built-in.

MarkBind is highly optimized for creating text-heavy websites e.g., eLearning websites, online instruction manuals, project documentation etc. Anything that you might need for creating such websites are built-in, sparing you the hassle of finding/installing/searching plugins that you need.

Here are some examples:

Icons can improve the readability of a text-heavy document. MarkBind comes with a wide selection of icons and emoji.
With MarkBind's search feature, you can allow readers to search for keywords in your site.
MarkBind allows you to add site/page navigation menus, headers, footers easily.

More control to the reader, without duplicating code.

A MarkBind website can be a buffet of content, as opposed to a set menu: a site can have optional contents that the reader can access at her discretion, and the same content can be organized in multiple ways so that the reader can choose the one that fits the need. To cater (pun intended) for creating such buffet style websites, MarkBind has reuse mechanisms for presenting the same content in multiple ways without duplicating the source file.

For example, MarkBind has a powerful include mechanism that allows content fragments (i.e., a file or part of a file) to be reused at multiple places in the website. In the example below, both the modal and the expandable panel reuse the same content originating from a single source file.

In CS, a binary tree is a tree data structure in which each node has at most two children, which are referred to as the left child and the right child. Primitive data types on the other hand ...

Some example primitive data types

Easy to set up, modify, deploy, integrate.

Installing MarkBind takes just one command. Creating a new MarkBind site too takes just one command. With MarkBind's live preview feature, you can see how your site will look like as you modify the source file. Deploying the site to a server can be as simple as one command too.

As MarkBind is also optimized for project documentation, it can easily integrate with the workflow of a software project.

Get Started

Developer Guide

- If you are a user, please visit MarkBind.org instead. -

This is the latest Developer Guide for MarkBind.

For contributors: please access the Developer Guide here

+

Get Started

Simple syntax. Dynamic content.

MarkBind source files can be as simple as basic Markdown, but you can also use a mix of several popular syntax schemes (GitHub Flavored MarkdownGFMD, BootStrap, NunJucks, etc. as well as MarkBind's own custom syntax) to create more dynamic content that you cannot normally get from a typical markdown-to-html site generator.

Here are some simple text-formatting examples:

Syntax scheme Code Output
Markdown **bold text** _italic text_ bold text italic text
GFMD ~~striked out text~~ striked out text
MarkBind extensions to Markdown ==highlighted text==
%%grey text%%
!!underlined text!!		 highlighted text
grey text
underlined text

More examples of generating static content

The example paragraph below has the following dynamic elements: a tooltip, a popover, and a modal. Hover/click on the underlined words to see each.

In Computer ScienceCS, a binary tree is a tree data structure in which each node has at most two children, which are referred to as the left child and the right child. Primitive data types on the other hand ...

An example tree data structure


[source:wikipedia]

More examples of generating dynamic content

Everything you need for text-heavy websites, built-in.

MarkBind is highly optimized for creating text-heavy websites e.g., eLearning websites, online instruction manuals, project documentation etc. Anything that you might need for creating such websites are built-in, sparing you the hassle of finding/installing/searching plugins that you need.

Here are some examples:

Icons can improve the readability of a text-heavy document. MarkBind comes with a wide selection of icons and emoji.
With MarkBind's search feature, you can allow readers to search for keywords in your site.
MarkBind allows you to add site/page navigation menus, headers, footers easily.

More control to the reader, without duplicating code.

A MarkBind website can be a buffet of content, as opposed to a set menu: a site can have optional contents that the reader can access at her discretion, and the same content can be organized in multiple ways so that the reader can choose the one that fits the need. To cater (pun intended) for creating such buffet style websites, MarkBind has reuse mechanisms for presenting the same content in multiple ways without duplicating the source file.

For example, MarkBind has a powerful include mechanism that allows content fragments (i.e., a file or part of a file) to be reused at multiple places in the website. In the example below, both the modal and the expandable panel reuse the same content originating from a single source file.

In CS, a binary tree is a tree data structure in which each node has at most two children, which are referred to as the left child and the right child. Primitive data types on the other hand ...

Some example primitive data types

Easy to set up, modify, deploy, integrate.

Installing MarkBind takes just one command. Creating a new MarkBind site too takes just one command. With MarkBind's live preview feature, you can see how your site will look like as you modify the source file. Deploying the site to a server can be as simple as one command too.

As MarkBind is also optimized for project documentation, it can easily integrate with the workflow of a software project.

Get Started

+ + + + + + + + + +

Examples of MarkBind Websites

Course Websites

Online Books

Product/Project Websites

+ + + diff --git a/showcase.page-vue-render.js b/showcase.page-vue-render.js new file mode 100644 index 0000000..fcf76d3 --- /dev/null +++ b/showcase.page-vue-render.js @@ -0,0 +1,13 @@ + + var pageVueRenderFn = function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',[_c('header',{attrs:{"fixed":""}},[_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/index.html","title":"Home"}},[_c('img',{attrs:{"src":"/images/logo-darkbackground.svg","height":"20"}})])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('form',{staticClass:"navbar-form"},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback,"menu-align-right":""}})],1)])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/index.html"}},[_v("HOME")])]),_v(" "),_c('div',{attrs:{"tags":"environment--ug"}},[_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"sibling-or-child","href":"/userGuide/index.html"}},[_v("USER GUIDE")])])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/showcase.html"}},[_v("SHOWCASE")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/about.html"}},[_v("ABOUT")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_c('span',[_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}})])])])])],1)]),_v(" "),_m(0),_v(" "),_m(1)])} +}; + var pageVueStaticRenderFns = [function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"flex-body"}},[_c('div',{staticClass:"fixed-header-padding",attrs:{"id":"content-wrapper"}},[_c('h1',{attrs:{"id":"examples-of-markbind-websites"}},[_c('span',{staticClass:"anchor",attrs:{"id":"examples-of-markbind-websites"}}),_v("Examples of MarkBind Websites"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#examples-of-markbind-websites","onclick":"event.stopPropagation()"}})]),_v(" "),_c('h2',{attrs:{"id":"course-websites"}},[_c('span',{staticClass:"anchor",attrs:{"id":"course-websites"}}),_v("Course Websites"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#course-websites","onclick":"event.stopPropagation()"}})]),_v(" "),_c('ul',[_c('li',[_c('a',{attrs:{"href":"https://www.comp.nus.edu.sg/~cs2103"}},[_c('strong',[_v("CS2103/T Software Engineering")])])]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.comp.nus.edu.sg/~cs2113"}},[_c('strong',[_v("CS2113/T Software Engineering and OOP")])])]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://nus-cs3281.github.io/website/"}},[_c('strong',[_v("CS3281&2 Thematic Systems Project")])])]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://nus-tic2002-2019.github.io/website/"}},[_c('strong',[_v("TIC2002 Introduction to Software Engineering")])])]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://nus-te3201.github.io/2020/"}},[_c('strong',[_v("TE3201 Software Engineering")])])])]),_v(" "),_c('h2',{attrs:{"id":"online-books"}},[_c('span',{staticClass:"anchor",attrs:{"id":"online-books"}}),_v("Online Books"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#online-books","onclick":"event.stopPropagation()"}})]),_v(" "),_c('ul',[_c('li',[_c('a',{attrs:{"href":"https://se-education.org/se-book/"}},[_c('strong',[_v("Software Engineering for Self-Directed Learners")])])]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://se-education.org/learningresources/"}},[_c('strong',[_v("A Student's Guide to Software Engineering Tools & Techniques")])])])]),_v(" "),_c('h2',{attrs:{"id":"product-project-websites"}},[_c('span',{staticClass:"anchor",attrs:{"id":"product-project-websites"}}),_v("Product/Project Websites"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#product-project-websites","onclick":"event.stopPropagation()"}})]),_v(" "),_c('ul',[_c('li',[_v("This website "),_c('span',{staticClass:"dimmed"},[_v("(i.e., MarkBind website)")])]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://reposense.org"}},[_c('strong',[_v("reposense.org")])])]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://se-education.org"}},[_c('strong',[_v("se-education.org")])])])]),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})])])} +},function anonymous( +) { +with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 3.1.1")]),_v(" on Sat, 22 Jan 2022, 16:49:34 UTC]")]),_c('br'),_v(" "),_c('small',[_v("This site is powered by "),_c('a',{attrs:{"href":"https://www.netlify.com/"}},[_v("Netlify")]),_v(".")])])])])} +}]; + \ No newline at end of file diff --git a/siteData.json b/siteData.json index 19715f4..ec827a7 100644 --- a/siteData.json +++ b/siteData.json @@ -1,6 +1,115 @@ { "enableSearch": true, "pages": [ + { + "src": "about.md", + "title": "About Us", + "headings": { + "about-us": "About Us" + }, + "headingKeywords": {} + }, + { + "src": "showcase.md", + "title": "Showcase", + "headings": { + "examples-of-markbind-websites": "Examples of MarkBind Websites", + "course-websites": "Course Websites", + "online-books": "Online Books", + "product-project-websites": "Product/Project Websites" + }, + "headingKeywords": {} + }, + { + "src": "userGuide/addingPages.md", + "title": "User Guide: Adding Pages", + "headings": { + "adding-pages": "Adding Pages" + }, + "headingKeywords": {} + }, + { + "src": "userGuide/authoringContents.md", + "title": "User Guide: Authoring Contents", + "headings": { + "authoring-contents": "Authoring Contents" + }, + "headingKeywords": {} + }, + { + "src": "userGuide/cliCommands.md", + "title": "User Guide: Command Line Interface (CLI)", + "headings": { + "markbind-cli": "MarkBind CLI", + "overview": "Overview", + "init-command": "init Command", + "serve-command": "serve Command", + "build-command": "build Command", + "deploy-command": "deploy Command", + "help-option": "--help Option" + }, + "headingKeywords": {} + }, + { + "src": "userGuide/components/advanced.md", + "title": "User Guide: Advanced Component Usage", + "headings": { + "advanced-tips-and-tricks": "Advanced Tips and Tricks", + "richer-formatting-of-attributes-using-slots": "Richer formatting of attributes using slots", + "inserting-custom-classes-into-components": "Inserting custom classes into components" + }, + "headingKeywords": {} + }, + { + "src": "userGuide/components/imagesAndDiagrams.md", + "title": "User Guide: Image & Diagram Components", + "headings": { + "image-and-amp-diagram-components": "Image & Diagram Components", + "pictures": "Pictures", + "thumbnails": "Thumbnails", + "diagrams": "Diagrams" + }, + "headingKeywords": {} + }, + { + "src": "userGuide/components/navigation.md", + "title": "User Guide: Navigation Components", + "headings": { + "navigation-components": "Navigation Components", + "dropdowns": "Dropdowns", + "search-bars": "Search Bars", + "navbars": "Navbars", + "site-navigation-menus": "Site Navigation Menus", + "page-navigation-menus": "Page Navigation Menus" + }, + "headingKeywords": {} + }, + { + "src": "userGuide/components/others.md", + "title": "User Guide: Other Components", + "headings": { + "other-components": "Other Components", + "questions-and-quizzes": "Questions and Quizzes", + "introduction": "Introduction", + "mcq-and-checkbox-questions": "MCQ and Checkbox Questions", + "which-of-the-following-is-true": "Which of the following is true?", + "text-questions": "Text Questions", + "quizzes": "Quizzes", + "which-of-the-following-is-true-2": "Which of the following is true?" + }, + "headingKeywords": {} + }, + { + "src": "userGuide/components/popups.md", + "title": "User Guide: Pop-Up Components", + "headings": { + "pop-up-components": "Pop-Up Components", + "tooltips": "Tooltips", + "popovers": "Popovers", + "modals": "Modals" + }, + "headingKeywords": {} + }, { "src": "userGuide/components/presentation.md", "title": "User Guide: Presentational Components", @@ -12,7 +121,86 @@ "header-markdown": "Header markdown 🚀", "header-markdown-2": "Header markdown 🚀", "panels": "Panels", - "tabs": "Tabs" + "tabs": "Tabs", + "relevant-tips-and-amp-tricks": "Relevant Tips & Tricks" + }, + "headingKeywords": {} + }, + { + "src": "userGuide/deployingTheSite.md", + "title": "User Guide: Deploying the Site", + "headings": { + "generating-a-github-personal-access-token": "Generating a Github Personal Access Token", + "deploying-via-github-actions": "Deploying via Github Actions", + "deploying-via-travis-ci": "Deploying via Travis CI", + "deploying-via-appveyor-ci": "Deploying via AppVeyor CI", + "deploying-via-circle-ci": "Deploying via Circle CI", + "deploying-the-site": "Deploying the Site", + "generic-steps-for-deploying-a-markbind-site": "Generic steps for deploying a MarkBind site", + "deploying-to-github-pages": "Deploying to Github Pages", + "using-the-markbind-deploy-command": "Using the markbind deploy command", + "using-ci-platforms": "Using CI Platforms", + "deploying-to-netlify": "Deploying to Netlify", + "previewing-pull-requests-for-markbind-sites": "Previewing Pull Requests for MarkBind sites", + "previewing-prs-using-netlify": "Previewing PRs using Netlify", + "previewing-prs-using-surge": "Previewing PRs using Surge", + "relevant-tips-and-amp-tricks": "Relevant Tips & Tricks" + }, + "headingKeywords": {} + }, + { + "src": "userGuide/formattingContents.md", + "title": "User Guide: Formatting Contents", + "headings": { + "formatting-contents": "Formatting Contents", + "headings": "Headings", + "heading-level-3": "Heading level 3", + "heading-level-6": "Heading level 6", + "heading-level-3-2": "Heading level 3", + "heading-level-6-2": "Heading level 6", + "paragraphs": "Paragraphs", + "line-breaks": "Line Breaks", + "text-styles": "Text Styles", + "blockquotes": "Blockquotes", + "lists": "Lists", + "code": "Code", + "themes": "Themes", + "fenced-code": "Fenced Code", + "syntax-coloring": "Syntax coloring", + "line-numbering": "Line numbering", + "line-highlighting": "Line highlighting", + "heading": "Heading", + "using-multiple-features": "Using multiple features", + "copy-button": "Copy button", + "wrap-text-button": "Wrap text button", + "inline-code": "Inline Code", + "syntax-coloring-2": "Syntax coloring", + "horizontal-rules": "Horizontal Rules", + "different-types-of-horizontal-rules": "Different Types Of Horizontal Rules", + "links": "Links", + "intra-site-links": "Intra-Site Links", + "footnotes": "Footnotes", + "images": "Images", + "classes-attributes-and-amp-identifiers": "Classes, Attributes & Identifiers", + "heading-2": "heading", + "tables": "Tables", + "emoji": "Emoji", + "icons": "Icons", + "using-font-awesome-icons": "Using Font Awesome Icons", + "using-glyphicons": "Using Glyphicons", + "using-octicons": "Using Octicons", + "using-material-icons": "Using Material Icons", + "embeds": "Embeds", + "embedding-youtube-videos": "Embedding Youtube Videos", + "embedding-powerpoint-slides-using-the-embed-url-from-powerpoint-online": "Embedding Powerpoint Slides (using the embed url from Powerpoint online)", + "dates": "Dates", + "using-variables": "Using variables", + "custom-formatting": "Custom formatting", + "adding-days": "Adding days", + "page-variables": "Page variables", + "advanced-formatting": "Advanced Formatting", + "math-formulae": "Math Formulae", + "relevant-tips-and-amp-tricks": "Relevant Tips & Tricks" }, "headingKeywords": {} }, @@ -24,11 +212,240 @@ }, "headingKeywords": {} }, + { + "src": "userGuide/glossary.md", + "title": "Glossary", + "headings": { + "live-preview": "Live Preview ", + "mbd-extension": ".mbd extension" + }, + "headingKeywords": {} + }, { "src": "userGuide/index.md", "title": "", "headings": {}, "headingKeywords": {} + }, + { + "src": "userGuide/makingTheSiteSearchable.md", + "title": "User Guide: Making the Site Searchable", + "headings": { + "making-the-site-searchable": "Making the Site Searchable", + "search-bars": "Search Bars", + "keywords": "Keywords", + "including-or-excluding-headings": "Including or Excluding Headings", + "using-external-search-services": "Using External Search Services" + }, + "headingKeywords": { + "keywords": [ + "regress", + "regression testing", + "regressions" + ] + } + }, + { + "src": "userGuide/markBindInTheProjectWorkflow.md", + "title": "User Guide: MarkBind in the Project Workflow", + "headings": { + "markbind-in-the-project-workflow": "MarkBind in the Project Workflow", + "authoring-workflow": "Authoring Workflow", + "github-project-workflow": "GitHub Project Workflow", + "using-markbind-for-project-documentation": "Using MarkBind for Project Documentation", + "converting-existing-project-documentation-wiki": "Converting existing project documentation/wiki" + }, + "headingKeywords": {} + }, + { + "src": "userGuide/markBindSyntaxOverview.md", + "title": "User Guide: MarkBind Syntax Overview ", + "headings": { + "markbind-syntax-overview": "MarkBind Syntax Overview", + "support-for-markdown": " Support for Markdown", + "support-for-gfmd": " Support for GFMD", + "markbind-extensions-to-markdown": " MarkBind Extensions to Markdown", + "markbind-custom-syntax": " MarkBind Custom Syntax", + "support-for-html-javascript-css": " Support for HTML, JavaScript, CSS", + "markbind-vue-components-and-bootstrap": " MarkBind Vue components and BootStrap", + "support-for-nunjucks": " Support for Nunjucks" + }, + "headingKeywords": {} + }, + { + "src": "userGuide/reusingContents.md", + "title": "User Guide: Reusing Contents", + "headings": { + "reusing-contents": "Reusing Contents", + "variables": "Variables", + "global-variables": "Global Variables", + "built-in-global-variables": "Built-in Global Variables", + "importing-variables-from-other-external-file-formats": "Importing variables from other external file formats", + "includes": "Includes", + "include-inside-an-included-file": "<include> Inside an Included File", + "specifying-variables-in-an-include": "Specifying Variables in an <include>", + "using-boilerplate-files": "Using Boilerplate Files", + "reusing-contents-across-sites": "Reusing Contents Across Sites", + "creating-content-variations": "Creating Content Variations", + "allowing-users-to-remove-some-contents": "Allowing users to remove some contents", + "giving-alternative-contents": "Giving alternative contents", + "giving-access-to-additional-contents": "Giving access to additional contents", + "organizing-contents-in-alternative-ways": "Organizing contents in alternative ways", + "optimizing-the-print-view": "Optimizing the Print View", + "hiding-some-info-in-the-generated-content": "Hiding some info in the generated content", + "creating-slight-variations-of-content": "Creating slight variations of content" + }, + "headingKeywords": { + "optimizing-the-print-view": [ + "hide minimized panels in the print view" + ] + } + }, + { + "src": "userGuide/settingSiteProperties.md", + "title": "site.json File", + "headings": { + "setting-site-properties": "Setting Site Properties" + }, + "headingKeywords": {} + }, + { + "src": "userGuide/siteJsonFile.md", + "title": "site.json File", + "headings": { + "site-json-file": "site.json File", + "baseurl": "baseUrl", + "faviconpath": "faviconPath", + "titleprefix": "titlePrefix", + "style": "style", + "pages": "pages", + "pagesexclude": "pagesExclude", + "externalscripts": "externalScripts", + "globaloverride": "globalOverride", + "ignore": "ignore", + "deploy": "deploy", + "plugins-pluginscontext": "plugins, pluginsContext", + "headingindexinglevel": "headingIndexingLevel", + "enablesearch": "enableSearch", + "timezone": "timeZone", + "locale": "locale", + "intrasitelinkvalidation": "intrasiteLinkValidation" + }, + "headingKeywords": {} + }, + { + "src": "userGuide/templates.md", + "title": "User Guide: Templates", + "headings": { + "templates": "Templates", + "supported-templates": "Supported Templates" + }, + "headingKeywords": {} + }, + { + "src": "userGuide/themes.md", + "title": "User Guide: Themes", + "headings": { + "themes": "Themes", + "specifying-a-theme": "Specifying a Theme", + "supported-themes": "Supported Themes", + "bootswatch-cerulean": "bootswatch-cerulean", + "bootswatch-cosmo": "bootswatch-cosmo", + "bootswatch-flatly": "bootswatch-flatly", + "bootswatch-journal": "bootswatch-journal", + "bootswatch-litera": "bootswatch-litera", + "bootswatch-lumen": "bootswatch-lumen", + "bootswatch-lux": "bootswatch-lux", + "bootswatch-materia": "bootswatch-materia", + "bootswatch-minty": "bootswatch-minty", + "bootswatch-pulse": "bootswatch-pulse", + "bootswatch-sandstone": "bootswatch-sandstone", + "bootswatch-simplex": "bootswatch-simplex", + "bootswatch-sketchy": "bootswatch-sketchy", + "bootswatch-spacelab": "bootswatch-spacelab", + "bootswatch-united": "bootswatch-united", + "bootswatch-yeti": "bootswatch-yeti" + }, + "headingKeywords": {} + }, + { + "src": "userGuide/tipsAndTricks.md", + "title": "User Guide: Tips & Tricks", + "headings": { + "tips-and-amp-tricks": "Tips & Tricks", + "escaping-characters": " Escaping Characters", + "using-raw-endraw-to-display-content": " Using {% raw %}{% endraw %} to display {{ content }}", + "unwanted-starting-space-in-links-and-triggers": " Unwanted starting space in links and triggers", + "configuring-online-deployment-platforms-to-use-specific-markbind-version": " Configuring Online Deployment platforms to use specific MarkBind version", + "indent-components": " Indent components" + }, + "headingKeywords": {} + }, + { + "src": "userGuide/tweakingThePageStructure.md", + "title": "User Guide: Tweaking the Page Structure", + "headings": { + "tweaking-the-page-structure": "Tweaking the Page Structure", + "front-matter": "Front Matter", + "layouts": "Layouts", + "inserting-content-into-the-head": "Inserting content into the <head>", + "inserting-scripts-after-the-body-tag": "Inserting scripts after the <body> tag", + "fixing-the-header-to-the-top": "Fixing the header to the top", + "constructing-a-site-navigation-menu-easily": "Constructing a site navigation menu easily", + "constructing-a-page-navigation-menu": "Constructing a page navigation menu", + "plugin-tags": "Plugin: Tags", + "toggling-alternative-contents": "Toggling alternative contents", + "advanced-tagging-tips": "Advanced Tagging Tips", + "hiding-tags": "Hiding Tags" + }, + "headingKeywords": {} + }, + { + "src": "userGuide/usingComponents.md", + "title": "User Guide: Using Components", + "headings": { + "using-components": "Using Components" + }, + "headingKeywords": {} + }, + { + "src": "userGuide/usingHtmlJavaScriptCss.md", + "title": "User Guide: Using HTML, JavaScript, CSS", + "headings": { + "using-html-javascript-css": "Using HTML, JavaScript, CSS", + "apples-bananas-cherries": "Apples Bananas Cherries" + }, + "headingKeywords": {} + }, + { + "src": "userGuide/usingPlugins.md", + "title": "User Guide: Using Plugins", + "headings": { + "using-plugins": "Using Plugins", + "managing-plugins": "Managing Plugins", + "using-built-in-plugins": "Using Built-in Plugins", + "plugin-algolia": "Plugin: Algolia", + "plugin-codeblockcopybuttons": "Plugin: codeBlockCopyButtons", + "plugin-codeblockwrapbuttons": "Plugin: codeBlockWrapButtons", + "plugin-tags": "Plugin: Tags", + "toggling-alternative-contents": "Toggling alternative contents", + "advanced-tagging-tips": "Advanced Tagging Tips", + "hiding-tags": "Hiding Tags", + "plugin-googleanalytics": "Plugin: GoogleAnalytics", + "plugin-disqus": "Plugin: Disqus", + "using-external-plugins": "Using External Plugins", + "adding-external-plugins": "Adding External Plugins", + "writing-plugins": "Writing Plugins" + }, + "headingKeywords": {} + }, + { + "src": "userGuide/workingWithSites.md", + "title": "User Guide: Working with Sites", + "headings": { + "working-with-sites": "Working with Sites" + }, + "headingKeywords": {} } ] } diff --git a/userGuide/addingPages.html b/userGuide/addingPages.html new file mode 100644 index 0000000..ee61db3 --- /dev/null +++ b/userGuide/addingPages.html @@ -0,0 +1,32 @@ + + + + + + + + MarkBind - User Guide: Adding Pages + + + + + + + + + + + + + + + + +

Adding Pages

User Guide → Adding Pages

Adding Pages

It is easy to add files to a MarkBind site as any file inside the The directory that contains all the project files. It is also the directory in which the site.json configuration file is located.root directory becomes a part of the generated website.

Example If you have a file tutorial/code.txt in your root directory, it will be available as <website-url>/tutorial/code.txt in the generated website.

You can specify which files to be omitted from the site by using the ignore field in the site.config file as explained here.

More importantly, .md and .mbd files can be transformed into html pages with matching names.

Example <root>/tutorial/setup.md can be transformed into <website-url>/tutorial/setup.html

Here are the steps to add a new page to your site:

  1. Add a .md (or .mbd) file anywhere inside the root directory.
  2. Update the pages attribute of the site.json to cover the new file, if necessary.
  3. Use the live preview to view the generated web page for the new file.

Authoring Contents

MarkBind Syntax Overview


+ + + diff --git a/userGuide/addingPages.page-vue-render.js b/userGuide/addingPages.page-vue-render.js new file mode 100644 index 0000000..d86bb9a --- /dev/null +++ b/userGuide/addingPages.page-vue-render.js @@ -0,0 +1,43 @@ + + var pageVueRenderFn = function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',[_c('header',{attrs:{"fixed":""}},[_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/index.html","title":"Home"}},[_c('img',{attrs:{"src":"/images/logo-darkbackground.svg","height":"20"}})])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('form',{staticClass:"navbar-form"},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback,"menu-align-right":""}})],1)])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/index.html"}},[_v("HOME")])]),_v(" "),_c('div',{attrs:{"tags":"environment--ug"}},[_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"sibling-or-child","href":"/userGuide/index.html"}},[_v("USER GUIDE")])])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/showcase.html"}},[_v("SHOWCASE")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/about.html"}},[_v("ABOUT")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_c('span',[_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}})])])])])],1)]),_v(" "),_c('div',{attrs:{"id":"flex-body"}},[_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"site-nav","tag-name":"nav","to":"site-nav"}},[_c('div',{staticClass:"site-nav-top"},[_c('div',{staticClass:"font-weight-bold mb-2",staticStyle:{"font-size":"1.25rem"}},[_v("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tipsAndTricks.html"}},[_v("Tips & Tricks")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/glossary.html"}},[_v("Glossary")])])])])])])],1)],1)]),_v(" "),_c('div',{staticClass:"fixed-header-padding",attrs:{"id":"content-wrapper"}},[_m(0),_v(" "),_m(1),_v(" "),_m(2),_v(" "),_c('span',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p',[_c('strong',[_v("It is easy to add files to a MarkBind site as any file inside the "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_m(3),_v("root directory")]),_v(" becomes a part of the generated website.")])])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" If you have a file "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tutorial/code.txt")]),_v(" in your root directory, it will be available as "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("/tutorial/code.txt")]),_v(" in the generated website.")],1)]),_v(" "),_m(4),_v(" "),_m(5),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("/tutorial/")]),_m(6),_v(" can be transformed into "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("/tutorial/")]),_m(7)],1)]),_v(" "),_c('p',[_v("Here are the steps to add a new page to your site:")]),_v(" "),_c('ol',[_m(8),_v(" "),_m(9),_v(" "),_c('li',[_v("Use the "),_c('trigger',{attrs:{"trigger":"click","for":"modal:addingPages-livePreview"}},[_v("live preview")]),_v(" to view the generated web page for the new file.")],1)]),_v(" "),_c('b-modal',{ref:"modal:addingPages-livePreview",attrs:{"id":"modal:addingPages-livePreview","hide-footer":"","size":"lg","modal-class":"mb-zoom"},scopedSlots:_u([{key:"modal-title",fn:function(){return [_v("Live Preview")]},proxy:true}])},[_v(" "),_c('span',[_c('strong',[_c('em',[_v("Live preview")])]),_v(" is:\n- Regeneration of affected content upon any change to "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".md")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".mbd")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".mbdf")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".njk")]),_v(" files ... anything your content depends on!")]),_v("source files")]),_v(", then reloading the updated site in the Browser.\n\n- Regeneration will also occur upon any modification to attributes in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" with the exception of "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#baseurl"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")])]),_v(".\n\n- Copying "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("files that don't affect page generation (eg. images), but are used in the site")]),_v("assets")]),_v(" to the site output folder.\n\nUse "),_c('a',{attrs:{"href":"/userGuide/cliCommands.html#serve-command"}},[_v("the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("serve")]),_v(" command")]),_v(" to launch a live preview.\n\n")])]),_v(" "),_m(10),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})],1),_v(" "),_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"})])],1),_v(" "),_m(11)])} +}; + var pageVueStaticRenderFns = [function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}},[_v("Adding Pages")])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_c('em',[_v("User Guide → Adding Pages")])])])])} +},function anonymous( +) { +with(this){return _c('h1',{attrs:{"id":"adding-pages"}},[_c('span',{staticClass:"anchor",attrs:{"id":"adding-pages"}}),_v("Adding Pages"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#adding-pages","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("The directory that contains all the project files. It is also the directory in which the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" configuration file is located.")])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("You can specify which files to be omitted from the site by using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("ignore")]),_v(" field in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.config")]),_v(" file as explained "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#ignore"}},[_v("here")]),_v(".")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("More importantly, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".md")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".mbd")]),_v(" files can be transformed into html pages with matching names.")])])} +},function anonymous( +) { +with(this){return _c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("setup.md")])])} +},function anonymous( +) { +with(this){return _c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("setup.html")])])} +},function anonymous( +) { +with(this){return _c('li',[_v("Add a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".md")]),_v(" (or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".mbd")]),_v(") file anywhere inside the root directory.")])} +},function anonymous( +) { +with(this){return _c('li',[_v("Update the "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#pages"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pages")]),_v(" attribute of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")])]),_v(" to cover the new file, if necessary.")])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-left"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/authoringContents.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Authoring Contents")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-right"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_c('span',[_c('span',[_v("MarkBind Syntax Overview")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} +},function anonymous( +) { +with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 3.1.1")]),_v(" on Sat, 22 Jan 2022, 16:49:34 UTC]")]),_c('br'),_v(" "),_c('small',[_v("This site is powered by "),_c('a',{attrs:{"href":"https://www.netlify.com/"}},[_v("Netlify")]),_v(".")])])])])} +}]; + \ No newline at end of file diff --git a/userGuide/authoringContents.html b/userGuide/authoringContents.html new file mode 100644 index 0000000..4af5faa --- /dev/null +++ b/userGuide/authoringContents.html @@ -0,0 +1,38 @@ + + + + + + + + MarkBind - User Guide: Authoring Contents + + + + + + + + + + + + + + + + +

Authoring Contents

Authoring Contents

Adding Pages

It is easy to add files to a MarkBind site as any file inside the The directory that contains all the project files. It is also the directory in which the site.json configuration file is located.root directory becomes a part of the generated website.

More info in: User Guide → Adding Pages

MarkBind Syntax 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. +

More info in: User Guide → MarkBind Syntax Overview

Formatting Contents

MarkBind supports a wide collection of Markdown-like basic content formatting syntax such as text styling, tables, lists, images, links, etc. + +

More info in: User Guide → Formatting Contents

Using Components

MarkBind provides a number of components (e.g., expandable panels, tabbed displays, navigation bars, etc.) that you can use to enhance the appearance/behavior of your pages. +

More info in: User Guide → Using Components

Using HTML, JavaScript, CSS

A MarkBind source file can contain a mixture of HTML, JavaScript, and CSS as a normal web page would. +

More info in: User Guide → Using HTML, JavaScript, CSS

Tweaking the Page Structure

MarkBind offers several ways to easily tweak the overall structure of a page, for example, using headers, footers, scripts, or stylesheets.

More info in: User Guide → Tweaking the Page Structure

Reusing Contents

MarkBind is highly-optimized for content reuse. It offers several mechanisms to provide readers with many variations of the content while minimizing duplication at source file level. As a result, instead of creating a one-size-fits-all site, MarkBind can create a site in which readers can chart their own path of reading. +

More info in: User Guide → Reusing Contents

Getting Started

Adding Pages


+ + + diff --git a/userGuide/authoringContents.page-vue-render.js b/userGuide/authoringContents.page-vue-render.js new file mode 100644 index 0000000..192509c --- /dev/null +++ b/userGuide/authoringContents.page-vue-render.js @@ -0,0 +1,61 @@ + + var pageVueRenderFn = function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',[_c('header',{attrs:{"fixed":""}},[_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/index.html","title":"Home"}},[_c('img',{attrs:{"src":"/images/logo-darkbackground.svg","height":"20"}})])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('form',{staticClass:"navbar-form"},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback,"menu-align-right":""}})],1)])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/index.html"}},[_v("HOME")])]),_v(" "),_c('div',{attrs:{"tags":"environment--ug"}},[_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"sibling-or-child","href":"/userGuide/index.html"}},[_v("USER GUIDE")])])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/showcase.html"}},[_v("SHOWCASE")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/about.html"}},[_v("ABOUT")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_c('span',[_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}})])])])])],1)]),_v(" "),_c('div',{attrs:{"id":"flex-body"}},[_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"site-nav","tag-name":"nav","to":"site-nav"}},[_c('div',{staticClass:"site-nav-top"},[_c('div',{staticClass:"font-weight-bold mb-2",staticStyle:{"font-size":"1.25rem"}},[_v("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tipsAndTricks.html"}},[_v("Tips & Tricks")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/glossary.html"}},[_v("Glossary")])])])])])])],1)],1)]),_v(" "),_c('div',{staticClass:"fixed-header-padding",attrs:{"id":"content-wrapper"}},[_m(0),_v(" "),_m(1),_v(" "),_c('p',[_c('big',[_c('strong',[_v("Adding Pages")])])],1),_v(" "),_c('blockquote',[_c('span',[_c('strong',[_v("It is easy to add files to a MarkBind site as any file inside the "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_m(2),_v("root directory")]),_v(" becomes a part of the generated website.")])])]),_v(" "),_m(3),_v(" "),_c('p',[_c('big',[_c('strong',[_v("MarkBind Syntax Overview")])])],1),_v(" "),_m(4),_v(" "),_m(5),_v(" "),_c('p',[_c('big',[_c('strong',[_v("Formatting Contents")])])],1),_v(" "),_m(6),_v(" "),_m(7),_v(" "),_c('p',[_c('big',[_c('strong',[_v("Using Components")])])],1),_v(" "),_m(8),_v(" "),_m(9),_v(" "),_c('p',[_c('big',[_c('strong',[_v("Using HTML, JavaScript, CSS")])])],1),_v(" "),_m(10),_v(" "),_m(11),_v(" "),_c('p',[_c('big',[_c('strong',[_v("Tweaking the Page Structure")])])],1),_v(" "),_m(12),_v(" "),_m(13),_v(" "),_c('p',[_c('big',[_c('strong',[_v("Reusing Contents")])])],1),_v(" "),_m(14),_v(" "),_m(15),_v(" "),_m(16),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})]),_v(" "),_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"})])],1),_v(" "),_m(17)])} +}; + var pageVueStaticRenderFns = [function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}},[_v("Authoring Contents")])])} +},function anonymous( +) { +with(this){return _c('h1',{attrs:{"id":"authoring-contents"}},[_c('span',{staticClass:"anchor",attrs:{"id":"authoring-contents"}}),_v("Authoring Contents"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#authoring-contents","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("The directory that contains all the project files. It is also the directory in which the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" configuration file is located.")])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"indented"},[_v("More info in: "),_c('span',[_c('span',[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_c('em',[_v("User Guide → Adding Pages")])])])])])])} +},function anonymous( +) { +with(this){return _c('blockquote',[_c('span',[_c('strong',[_v("A MarkBind source file may contain a mix of several popular syntax schemes")]),_v(" 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.\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"indented"},[_v("More info in: "),_c('span',[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_c('em',[_v("User Guide → MarkBind Syntax Overview")])])])])])} +},function anonymous( +) { +with(this){return _c('blockquote',[_c('span',[_c('strong',[_v("MarkBind supports a wide collection of Markdown-like basic content formatting syntax")]),_v(" such as text styling, tables, lists, images, links, etc.\n\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"indented"},[_v("More info in: "),_c('span',[_c('span',[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_c('em',[_v("User Guide → Formatting Contents")])])])])])])} +},function anonymous( +) { +with(this){return _c('blockquote',[_c('span',[_c('strong',[_v("MarkBind provides a number of components")]),_v(" (e.g., expandable panels, tabbed displays, navigation bars, etc.) that you can use to enhance the appearance/behavior of your pages.\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"indented"},[_v("More info in: "),_c('span',[_c('span',[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_c('em',[_v("User Guide → Using Components")])])])])])])} +},function anonymous( +) { +with(this){return _c('blockquote',[_c('span',[_c('strong',[_v("A MarkBind source file can contain a mixture of HTML, JavaScript, and CSS")]),_v(" as a normal web page would.\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"indented"},[_v("More info in: "),_c('span',[_c('span',[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_c('em',[_v("User Guide → Using HTML, JavaScript, CSS")])])])])])])} +},function anonymous( +) { +with(this){return _c('blockquote',[_c('span',[_c('strong',[_v("MarkBind offers several ways to easily tweak the overall structure of a page")]),_v(", for example, using headers, footers, scripts, or stylesheets.")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"indented"},[_v("More info in: "),_c('span',[_c('span',[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_c('em',[_v("User Guide → Tweaking the Page Structure")])])])])])])} +},function anonymous( +) { +with(this){return _c('blockquote',[_c('span',[_c('strong',[_v("MarkBind is highly-optimized for content reuse")]),_v(". It offers several mechanisms to provide readers with many variations of the content while minimizing duplication at source file level. As a result, instead of creating a one-size-fits-all site, MarkBind can create a site in which readers can chart their own path of reading.\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"indented"},[_v("More info in: "),_c('span',[_c('span',[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_c('em',[_v("User Guide → Reusing Contents")])])])])])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-left"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Getting Started")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-right"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/addingPages.html"}},[_c('span',[_c('span',[_v("Adding Pages")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} +},function anonymous( +) { +with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 3.1.1")]),_v(" on Sat, 22 Jan 2022, 16:49:34 UTC]")]),_c('br'),_v(" "),_c('small',[_v("This site is powered by "),_c('a',{attrs:{"href":"https://www.netlify.com/"}},[_v("Netlify")]),_v(".")])])])])} +}]; + \ No newline at end of file diff --git a/userGuide/cliCommands.html b/userGuide/cliCommands.html new file mode 100644 index 0000000..901fa09 --- /dev/null +++ b/userGuide/cliCommands.html @@ -0,0 +1,61 @@ + + + + + + + + MarkBind - User Guide: Command Line Interface (CLI) + + + + + + + + + + + + + + + + +

MarkBind CLI

Overview

An overview of MarkBind's Command Line Interface (CLI) can be referenced with markbind --help:

$ markbind --help
+Usage: markbind <command>
+ 
+ Options:
+   -V, --version                      output the version number
+   -h, --help                         output usage information
+ 
+ Commands:
+   init|i [options] [root]            init a markbind website project
+   serve|s [options] [root]           build then serve a website from a directory
+   build|b [options] [root] [output]  build a website
+   deploy|d [options]                 deploy the site to the repo's Github pages
+

init Command


Format: markbind init [options] [root]

Alias: markbind i

Description: Initializes a directory into a MarkBind site by creating a skeleton structure for the website which includes a index.md and a site.json.

Arguments:

  • [root]
    +Root directory. Default is the current directory.
    Example ./myWebsite

Options

Examples

  • markbind init : Initializes the site in the current working directory.
  • markbind init ./myWebsite : Initializes the site in ./myWebsite directory.
  • markbind init --convert : Converts the Github wiki or docs folder in the current working directory into a MarkBind website.

serve Command


Format: markbind serve [options] [root]

Alias: markbind s

Description: Does the following steps:

  1. Builds the site and puts the generated files in a directory named _site.
  2. Starts a web server instance locally and makes the site available at http://127.0.0.1:8080.
  3. Opens a live preview of the website.

Arguments:

  • [root]
    +Root directory. The default is the directory where this command was executed.
    Example ./myWebsite

Options

  • -o <file>, --one-page <file>
    +Serves only a single page from your website initially. If <file> is not specified, it defaults to index.md/mbd.
    • Thereafter, when changes to source files have been made, the opened pages will be rebuilt if it was affected.
    • Navigating to a new page will build the new page, if it has not been built before, or there were some changes to source files that affected it before navigating to it.
    • Example --one-page guide/index.md

Caveats

Essentially, this optional feature is very useful when writing content, more so if your build times are starting to slow down!

The caveat is that not building all pages during the initial process, or not rebuilding all affected pages when a file changes, will cause your search results for these pages to be empty or outdated, until you navigate to them to trigger a rebuild.

  • -b, --background-build [BETA]
    +If --one-page is specified, this mode enhances the single-page serve by building the pages that are not yet built +or marked to be rebuilt in the background.

    You can still edit the pages during the background build. When MarkBind detects changes to the source +files, the background build will stop, rebuild the files affected, then resumes the background build with the +remaining pages.

  • -s <file>, --site-config <file>
    +Specify the site config file (default: site.json)
    Example -s otherSite.json

  • -n, --no-open
    +Don't open a live preview in the browser automatically.

  • -f, --force-reload
    +Force live reload to process all files in the site, instead of just the relevant files. This option is useful when you are modifying a file that is not a file type monitored by the live preview feature.

  • -p <port>, --port <port>
    +Serve the website in the specified port.

Examples

  • markbind serve
  • markbind serve ./myWebsite
  • markbind serve -p 8888 -s otherSite.json

build Command


Format: markbind build [options] [root] [output]

Alias: markbind b

Description: Generates the site to the directory named _site in the current directory.

Arguments:

  • [output]
    +Put the generated files in the specified directory
    Example ../myOutDir

  • [root] [output]
    +Read source files from the [root] directory and put the generated files in the specified [output] directory
    Example ./myWebsite ../myOutDir

Options

  • --baseUrl <base>
    +Override the baseUrl property (read from the site.json) with the give <base> value.
    Example --baseUrl staging

  • -s <file>, --site-config <file>
    +Specify the site config file (default: site.json)
    Example -s otherSite.json

Examples

  • markbind build
  • markbind build ./myWebsite ./myOutDir
  • markbind build ./stagingDir --baseUrl staging

deploy Command


Format: markbind deploy [options]

Alias: markbind d

Description: Deploys the site to the repo's Github pages by pushing everything in the generated site (default dir: _site) to the gh-pages branch of the current git working directory's remote repo.

Options

  • -c <githubTokenName>, --ci <githubTokenName>
    +Deploy the site in CI Environments using the GitHub personal access token stored in <githubTokenName>. (default: GITHUB_TOKEN)
    Example -c PA_TOKEN

Related: User Guide: Deploying the Website.

--help Option


Format: markbind [command] --help

Alias: markbind [command] -h

Description: Prints a summary of MarkBind commands or a detailed usage guide for the given command.

Examples

  • markbind --help : Prints a summary of MarkBind commands.
  • markbind serve --help : Prints a detailed usage guide for the serve command.
+ + + diff --git a/userGuide/cliCommands.page-vue-render.js b/userGuide/cliCommands.page-vue-render.js new file mode 100644 index 0000000..003aa37 --- /dev/null +++ b/userGuide/cliCommands.page-vue-render.js @@ -0,0 +1,100 @@ + + var pageVueRenderFn = function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',[_c('header',{attrs:{"fixed":""}},[_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/index.html","title":"Home"}},[_c('img',{attrs:{"src":"/images/logo-darkbackground.svg","height":"20"}})])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('form',{staticClass:"navbar-form"},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback,"menu-align-right":""}})],1)])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/index.html"}},[_v("HOME")])]),_v(" "),_c('div',{attrs:{"tags":"environment--ug"}},[_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"sibling-or-child","href":"/userGuide/index.html"}},[_v("USER GUIDE")])])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/showcase.html"}},[_v("SHOWCASE")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/about.html"}},[_v("ABOUT")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_c('span',[_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}})])])])])],1)]),_v(" "),_c('div',{attrs:{"id":"flex-body"}},[_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"site-nav","tag-name":"nav","to":"site-nav"}},[_c('div',{staticClass:"site-nav-top"},[_c('div',{staticClass:"font-weight-bold mb-2",staticStyle:{"font-size":"1.25rem"}},[_v("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tipsAndTricks.html"}},[_v("Tips & Tricks")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/glossary.html"}},[_v("Glossary")])])])])])])],1)],1)]),_v(" "),_c('div',{staticClass:"fixed-header-padding",attrs:{"id":"content-wrapper"}},[_m(0),_v(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_c('hr'),_v(" "),_m(4),_v(" "),_c('br'),_v(" "),_m(5),_v(" "),_m(6),_v(" "),_m(7),_v(" "),_m(8),_v(" "),_c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("[root]")]),_c('br'),_v("\nRoot directory. Default is the current directory."),_c('br'),_v(" "),_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("./myWebsite")])],1)]),_v(" "),_c('panel',{attrs:{"type":"minimal","expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("Options")]),_v(" "),_c('span',{staticClass:"fas fa-cogs",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v(" "),_c('p',[_c('strong',[_v("Options")]),_v(" "),_c('span',{staticClass:"fas fa-cogs",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-c")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--convert")]),_c('br'),_v("\nConvert an existing GitHub wiki or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("docs")]),_v(" folder into a MarkBind website. See "),_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html#converting-existing-project-documentation-wiki"}},[_v("Converting an existing Github project")]),_v(" for more information.")])]),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px"}},[_v("Examples")])])],1),_v(" "),_c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind init")]),_v(" : Initializes the site in the current working directory.")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind init ./myWebsite")]),_v(" : Initializes the site in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("./myWebsite")]),_v(" directory.")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind init --convert")]),_v(" : Converts the Github wiki or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("docs")]),_v(" folder in the current working directory into a MarkBind website.")])])]),_v(" "),_c('hr'),_v(" "),_m(9),_v(" "),_c('br'),_v(" "),_m(10),_v(" "),_m(11),_v(" "),_m(12),_v(" "),_c('ol',[_m(13),_v(" "),_m(14),_v(" "),_c('li',[_v("Opens a "),_c('trigger',{attrs:{"trigger":"click","for":"modal:cliCommands-livePreview"}},[_v("live preview")]),_v(" of the website.")],1)]),_v(" "),_c('b-modal',{ref:"modal:cliCommands-livePreview",attrs:{"id":"modal:cliCommands-livePreview","hide-footer":"","size":"lg","modal-class":"mb-zoom"},scopedSlots:_u([{key:"modal-title",fn:function(){return [_v("Live Preview")]},proxy:true}])},[_v(" "),_c('span',[_c('strong',[_c('em',[_v("Live preview")])]),_v(" is:\n- Regeneration of affected content upon any change to "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".md")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".mbd")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".mbdf")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".njk")]),_v(" files ... anything your content depends on!")]),_v("source files")]),_v(", then reloading the updated site in the Browser.\n\n- Regeneration will also occur upon any modification to attributes in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" with the exception of "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#baseurl"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")])]),_v(".\n\n- Copying "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("files that don't affect page generation (eg. images), but are used in the site")]),_v("assets")]),_v(" to the site output folder.\n\nUse "),_c('a',{attrs:{"href":"/userGuide/cliCommands.html#serve-command"}},[_v("the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("serve")]),_v(" command")]),_v(" to launch a live preview.\n\n")])]),_v(" "),_m(15),_v(" "),_c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("[root]")]),_c('br'),_v("\nRoot directory. The default is the directory where this command was executed."),_c('br'),_v(" "),_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("./myWebsite")])],1)]),_v(" "),_c('panel',{attrs:{"type":"minimal","expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("Options")]),_v(" "),_c('span',{staticClass:"fas fa-cogs",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v(" "),_c('p',[_c('strong',[_v("Options")]),_v(" "),_c('span',{staticClass:"fas fa-cogs",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-o ")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--one-page ")]),_c('br'),_v("\nServes only a single page from your website "),_c('strong',[_v("initially")]),_v(". If "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" is not specified, it defaults to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("index.md/mbd")]),_v("."),_c('br'),_v(" "),_c('ul',[_c('li',[_v("Thereafter, when changes to source files have been made, the opened pages will be rebuilt if it was affected."),_c('br')]),_v(" "),_c('li',[_v("Navigating to a new page will build the new page, if it has not been built before, or there were some changes to source files that affected it before navigating to it."),_c('br')]),_v(" "),_c('li',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--one-page guide/index.md")])],1)])])]),_v(" "),_c('box',{staticStyle:{"width":"calc(100% - 50px)","position":"relative","left":"40px"},attrs:{"type":"info","light":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Caveats")])]},proxy:true}])},[_v(" "),_c('p',[_v("Essentially, this optional feature is very useful when writing content, more so if your build times are starting to slow down!")]),_v(" "),_c('p',[_v("The caveat is that not building all pages during the initial process, or not rebuilding all affected pages when a file changes, will cause your search results for these pages to be empty or outdated, until you navigate to them to trigger a rebuild.")])]),_v(" "),_c('ul',[_c('li',[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-b")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--background-build")]),_v(" "),_c('strong',[_v("[BETA]")]),_c('br'),_v("\nIf "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--one-page")]),_v(" is specified, this mode enhances the single-page serve by building the pages that are not yet built\nor marked to be rebuilt in the background.")]),_v(" "),_c('p',[_v("You can still edit the pages during the background build. When MarkBind detects changes to the source\nfiles, the background build will stop, rebuild the files affected, then resumes the background build with the\nremaining pages.")])]),_v(" "),_c('li',[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-s ")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--site-config ")]),_c('br'),_v("\nSpecify the site config file (default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(")"),_c('br'),_v(" "),_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-s otherSite.json")])],1)]),_v(" "),_c('li',[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-n")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--no-open")]),_c('br'),_v("\nDon't open a live preview in the browser automatically.")])]),_v(" "),_c('li',[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-f")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--force-reload")]),_c('br'),_v("\nForce live reload to process all files in the site, instead of just the relevant files. This option is useful when you are modifying a file that is not a file type monitored by the "),_c('trigger',{attrs:{"trigger":"click","for":"modal:cliCommands-livePreview"}},[_v("live preview")]),_v(" feature.")],1)]),_v(" "),_c('li',[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-p ")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--port ")]),_c('br'),_v("\nServe the website in the specified port.")])])]),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px"}},[_v("Examples")])])],1),_v(" "),_c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind serve")])]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind serve ./myWebsite")])]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind serve -p 8888 -s otherSite.json")])])])],1),_v(" "),_c('hr'),_v(" "),_m(16),_v(" "),_c('br'),_v(" "),_m(17),_v(" "),_m(18),_v(" "),_m(19),_v(" "),_m(20),_v(" "),_c('ul',[_c('li',[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("[output]")]),_c('br'),_v("\nPut the generated files in the specified directory"),_c('br'),_v(" "),_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("../myOutDir")])],1)]),_v(" "),_c('li',[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("[root] [output]")]),_c('br'),_v("\nRead source files from the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("[root]")]),_v(" directory and put the generated files in the specified "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("[output]")]),_v(" directory"),_c('br'),_v(" "),_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("./myWebsite ../myOutDir")])],1)])]),_v(" "),_c('panel',{attrs:{"type":"minimal","expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("Options")]),_v(" "),_c('span',{staticClass:"fas fa-cogs",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v(" "),_c('p',[_c('strong',[_v("Options")]),_v(" "),_c('span',{staticClass:"fas fa-cogs",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('ul',[_c('li',[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--baseUrl ")]),_c('br'),_v("\nOverride the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")]),_v(" property (read from the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(") with the give "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" value."),_c('br'),_v(" "),_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--baseUrl staging")])],1)]),_v(" "),_c('li',[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-s ")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--site-config ")]),_c('br'),_v("\nSpecify the site config file (default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(")"),_c('br'),_v(" "),_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-s otherSite.json")])],1)])]),_v(" "),_c('p',[_c('strong',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px"}},[_v("Examples")])])],1)]),_v(" "),_c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind build")])]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind build ./myWebsite ./myOutDir")])]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind build ./stagingDir --baseUrl staging")])])])]),_v(" "),_c('hr'),_v(" "),_m(21),_v(" "),_c('br'),_v(" "),_m(22),_v(" "),_m(23),_v(" "),_m(24),_v(" "),_c('panel',{attrs:{"type":"minimal","expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("Options")]),_v(" "),_c('span',{staticClass:"fas fa-cogs",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v(" "),_c('p',[_c('strong',[_v("Options")]),_v(" "),_c('span',{staticClass:"fas fa-cogs",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-c ")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--ci ")]),_c('br'),_v("\nDeploy the site in CI Environments using the GitHub personal access token stored in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(". (default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("GITHUB_TOKEN")]),_v(")"),_c('br'),_v(" "),_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-c PA_TOKEN")])],1)]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" Related: "),_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("User Guide: Deploying the Website")]),_v(".")])])]),_v(" "),_c('hr'),_v(" "),_m(25),_v(" "),_c('br'),_v(" "),_m(26),_v(" "),_m(27),_v(" "),_m(28),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px"}},[_v("Examples")])])],1),_v(" "),_m(29),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})],1),_v(" "),_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"},[_c('overlay-source',{staticClass:"nav nav-pills flex-column my-0 small no-flex-wrap",attrs:{"id":"mb-page-nav","tag-name":"nav","to":"mb-page-nav"}},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#markbind-cli"}},[_v("MarkBind CLI‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#overview"}},[_v("Overview‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#init-command"}},[_v("init Command‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#serve-command"}},[_v("serve Command‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#build-command"}},[_v("build Command‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#deploy-command"}},[_v("deploy Command‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#help-option"}},[_v("--help Option‎")])])])],1)])],1),_v(" "),_m(30)])} +}; + var pageVueStaticRenderFns = [function anonymous( +) { +with(this){return _c('h1',{attrs:{"id":"markbind-cli"}},[_c('span',{staticClass:"anchor",attrs:{"id":"markbind-cli"}}),_v("MarkBind CLI"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#markbind-cli","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h3',{attrs:{"id":"overview"}},[_c('span',{staticClass:"anchor",attrs:{"id":"overview"}}),_v("Overview"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#overview","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("An overview of MarkBind's Command Line Interface (CLI) can be referenced with "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind --help")]),_v(":")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("$ markbind --help\n")]),_c('span',[_v("Usage: markbind \n")]),_c('span',[_v(" \n")]),_c('span',[_v(" Options:\n")]),_c('span',[_v(" -V, --version output the version number\n")]),_c('span',[_v(" -h, --help output usage information\n")]),_c('span',[_v(" \n")]),_c('span',[_v(" Commands:\n")]),_c('span',[_v(" init|i [options] [root] init a markbind website project\n")]),_c('span',[_v(" serve|s [options] [root] build then serve a website from a directory\n")]),_c('span',[_v(" build|b [options] [root] [output] build a website\n")]),_c('span',[_v(" deploy|d [options] deploy the site to the repo's Github pages\n")])])])} +},function anonymous( +) { +with(this){return _c('h3',{attrs:{"id":"init-command"}},[_c('span',{staticClass:"anchor",attrs:{"id":"init-command"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("init")]),_v(" Command"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#init-command","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Format:")]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind init [options] [root]")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Alias:")]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind i")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Description:")]),_v(" Initializes a directory into a MarkBind site by creating a skeleton structure for the website which includes a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("index.md")]),_v(" and a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Arguments:")])])} +},function anonymous( +) { +with(this){return _c('h3',{attrs:{"id":"serve-command"}},[_c('span',{staticClass:"anchor",attrs:{"id":"serve-command"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("serve")]),_v(" Command"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#serve-command","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Format:")]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind serve [options] [root]")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Alias:")]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind s")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Description:")]),_v(" Does the following steps:")])} +},function anonymous( +) { +with(this){return _c('li',[_v("Builds the site and puts the generated files in a directory named "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_site")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('li',[_v("Starts a web server instance locally and makes the site available at "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("http://127.0.0.1:8080")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Arguments:")])])} +},function anonymous( +) { +with(this){return _c('h3',{attrs:{"id":"build-command"}},[_c('span',{staticClass:"anchor",attrs:{"id":"build-command"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("build")]),_v(" Command"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#build-command","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Format:")]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind build [options] [root] [output]")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Alias:")]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind b")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Description:")]),_v(" Generates the site to the directory named "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_site")]),_v(" in the current directory.")])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Arguments:")])])} +},function anonymous( +) { +with(this){return _c('h3',{attrs:{"id":"deploy-command"}},[_c('span',{staticClass:"anchor",attrs:{"id":"deploy-command"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("deploy")]),_v(" Command"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#deploy-command","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Format:")]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind deploy [options]")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Alias:")]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind d")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Description:")]),_v(" Deploys the site to the repo's Github pages by pushing everything in the generated site (default dir: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_site")]),_v(") to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("gh-pages")]),_v(" branch of the current git working directory's remote repo.")])} +},function anonymous( +) { +with(this){return _c('h3',{attrs:{"id":"help-option"}},[_c('span',{staticClass:"anchor",attrs:{"id":"help-option"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--help")]),_v(" Option"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#help-option","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Format:")]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind [command] --help")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Alias:")]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind [command] -h")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Description:")]),_v(" Prints a summary of MarkBind commands or a detailed usage guide for the given "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("command")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind --help")]),_v(" : Prints a summary of MarkBind commands.")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind serve --help")]),_v(" : Prints a detailed usage guide for the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("serve")]),_v(" command.")])])} +},function anonymous( +) { +with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 3.1.1")]),_v(" on Sat, 22 Jan 2022, 16:49:34 UTC]")]),_c('br'),_v(" "),_c('small',[_v("This site is powered by "),_c('a',{attrs:{"href":"https://www.netlify.com/"}},[_v("Netlify")]),_v(".")])])])])} +}]; + \ No newline at end of file diff --git a/userGuide/components/advanced.html b/userGuide/components/advanced.html new file mode 100644 index 0000000..6b305a1 --- /dev/null +++ b/userGuide/components/advanced.html @@ -0,0 +1,86 @@ + + + + + + + + MarkBind - User Guide: Advanced Component Usage + + + + + + + + + + + + + + + + +

Advanced Component Usage

User Guide → Advanced Component Usage

Advanced Tips and Tricks

Richer formatting of attributes using slots

Most component attributes allow a richer form of formatting using slots, denoted by an attribute[S] superscript in the respective components' tables. +In other cases, when the option is of type "Slot", only the slot option is available.

You can define such a slot within the component by adding a slot="slot_name" attribute to any element within the slot.

Example

CODE:

<panel expanded>
+  <p slot="header" class="card-title">
+    <i><strong>
+      <span style="color:#FF0000;">R</span>
+      <span style="color:#FF7F00;">A</span>
+      <span style="color:#FFFF00;">I</span>
+      <span style="color:#00FF00;">N</span>
+      <span style="color:#0000FF;">B</span>
+      <span style="color:#4B0082;">O</span>
+      <span style="color:#9400D3;">W</span>
+    </strong></i>
+  </p>
+  As shown in this panel, using the header slot
+  allows you to customize the Panel's header using HTML.
+</panel>
+

OUTPUT:

R A I N B O W

+ As shown in this panel, using the header slot + allows you to customize the Panel's header using HTML. +

Other examples of slots in use

Example Custom modal header

CODE:

<trigger for="modal:tip-example" trigger="click">Click here to show Modal.</trigger>
+
+<modal id="modal:tip-example">
+  <span slot="header" class="modal-title text-center">
+    <span style="font-size:20pt"><span style="color:red;">BIG</span> header</span>
+  </span>
+    Modal allows you to style both header and footer individually, with style classes and inline styles.
+  <span slot="footer" class="text-center">
+    <span style="font-size:10pt">Tiny <span style="color:green;">footer</span></span>
+  </span>
+</modal>
+

OUTPUT:

Click here to show Modal.

Example Override the default icon for a certain type of box.

<box type="info">
+    <span slot="icon" class="text-danger"><md>:fas-home:</md></span>
+    info
+</box>
+
+ info +

Example Use pictures (or even gifs) as the icon for a box.

<box type="info" seamless>
+    <img slot="icon" src="https://icons8.com/vue-static/landings/animated-icons/icons/cloud/cloud.gif"></img>
+    some very useful info
+</box>
+
+ some very useful info +

Example Use thumbnail as the icon.

<box type="info" light>
+    <thumbnail circle slot="icon" text=":book:" background="#dff5ff" size="50"/>
+    use thumbnail as the icon
+</box>
+
📖
+ use thumbnail as the icon +

Inserting custom classes into components

Every component documented in our user guide allows you to insert your own defined CSS classes. +This is done by adding the add-class attribute to a component along with the desired class names.

Example
+ Easily apply Bootstrap classes without using a wrapper! +
Markup 
<tip-box type="info" add-class="lead font-italic text-center">
+  Easily apply Bootstrap classes without using a wrapper!
+</tip-box>
+

Other Components

Using HTML, JavaScript, CSS


+ + + diff --git a/userGuide/components/advanced.page-vue-render.js b/userGuide/components/advanced.page-vue-render.js new file mode 100644 index 0000000..6a4f116 --- /dev/null +++ b/userGuide/components/advanced.page-vue-render.js @@ -0,0 +1,67 @@ + + var pageVueRenderFn = function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',[_c('header',{attrs:{"fixed":""}},[_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/index.html","title":"Home"}},[_c('img',{attrs:{"src":"/images/logo-darkbackground.svg","height":"20"}})])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('form',{staticClass:"navbar-form"},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback,"menu-align-right":""}})],1)])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/index.html"}},[_v("HOME")])]),_v(" "),_c('div',{attrs:{"tags":"environment--ug"}},[_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"sibling-or-child","href":"/userGuide/index.html"}},[_v("USER GUIDE")])])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/showcase.html"}},[_v("SHOWCASE")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/about.html"}},[_v("ABOUT")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_c('span',[_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}})])])])])],1)]),_v(" "),_c('div',{attrs:{"id":"flex-body"}},[_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"site-nav","tag-name":"nav","to":"site-nav"}},[_c('div',{staticClass:"site-nav-top"},[_c('div',{staticClass:"font-weight-bold mb-2",staticStyle:{"font-size":"1.25rem"}},[_v("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tipsAndTricks.html"}},[_v("Tips & Tricks")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/glossary.html"}},[_v("Glossary")])])])])])])],1)],1)]),_v(" "),_c('div',{staticClass:"fixed-header-padding",attrs:{"id":"content-wrapper"}},[_m(0),_v(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_c('div',{attrs:{"id":"slots"}},[_m(4),_v(" "),_m(5),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])],1),_v(" "),_c('div',[_m(6),_v(" "),_m(7),_v(" "),_m(8),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',{staticClass:"card-title"},[_c('i',[_c('strong',[_c('span',{staticStyle:{"color":"#FF0000"}},[_v("R")]),_v(" "),_c('span',{staticStyle:{"color":"#FF7F00"}},[_v("A")]),_v(" "),_c('span',{staticStyle:{"color":"#FFFF00"}},[_v("I")]),_v(" "),_c('span',{staticStyle:{"color":"#00FF00"}},[_v("N")]),_v(" "),_c('span',{staticStyle:{"color":"#0000FF"}},[_v("B")]),_v(" "),_c('span',{staticStyle:{"color":"#4B0082"}},[_v("O")]),_v(" "),_c('span',{staticStyle:{"color":"#9400D3"}},[_v("W")])])])])]},proxy:true}])},[_v("\n As shown in this panel, using the header slot\n allows you to customize the Panel's header using HTML.\n")])],1)],1)])]),_v(" "),_c('div',{attrs:{"id":"slots-info"}},[_c('b-modal',{ref:"on-slots",attrs:{"id":"on-slots","hide-footer":"","size":"lg","modal-class":"mb-zoom"},scopedSlots:_u([{key:"modal-title",fn:function(){return [_v("Richer formatting of attributes using slots")]},proxy:true}])},[_v(" "),_c('div',[_c('p',[_v("Most component attributes allow a richer form of formatting using slots, denoted by an attribute"),_c('strong',[_c('sup',[_v("[S]")])]),_v(" superscript in the respective components' tables.\nIn other cases, when the option is of type \"Slot\", only the slot option is available.")]),_v(" "),_c('p',[_v("You can define such a slot within the component by adding a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("slot=\"slot_name\"")]),_v(" attribute to any element within the slot.")]),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])],1),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("expanded")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"card-title\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("i")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("strong")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#FF0000;\"")]),_v(">")]),_v("R"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#FF7F00;\"")]),_v(">")]),_v("A"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#FFFF00;\"")]),_v(">")]),_v("I"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#00FF00;\"")]),_v(">")]),_v("N"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#0000FF;\"")]),_v(">")]),_v("B"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#4B0082;\"")]),_v(">")]),_v("O"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#9400D3;\"")]),_v(">")]),_v("W"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" As shown in this panel, using the header slot\n")]),_c('span',[_v(" allows you to customize the Panel's header using HTML.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',{staticClass:"card-title"},[_c('i',[_c('strong',[_c('span',{staticStyle:{"color":"#FF0000"}},[_v("R")]),_v(" "),_c('span',{staticStyle:{"color":"#FF7F00"}},[_v("A")]),_v(" "),_c('span',{staticStyle:{"color":"#FFFF00"}},[_v("I")]),_v(" "),_c('span',{staticStyle:{"color":"#00FF00"}},[_v("N")]),_v(" "),_c('span',{staticStyle:{"color":"#0000FF"}},[_v("B")]),_v(" "),_c('span',{staticStyle:{"color":"#4B0082"}},[_v("O")]),_v(" "),_c('span',{staticStyle:{"color":"#9400D3"}},[_v("W")])])])])]},proxy:true}])},[_v("\n As shown in this panel, using the header slot\n allows you to customize the Panel's header using HTML.\n")])],1)],1)])])])],1),_v(" "),_m(9),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Custom modal header")],1),_v(" "),_c('div',[_m(10),_v(" "),_m(11),_v(" "),_m(12),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('trigger',{attrs:{"for":"modal:tip-example","trigger":"click"}},[_v("Click here to show Modal.")])],1),_v(" "),_c('b-modal',{ref:"modal:tip-example",attrs:{"id":"modal:tip-example","size":"","modal-class":"mb-zoom"},scopedSlots:_u([{key:"modal-header",fn:function(){return [_c('span',{staticClass:"modal-title text-center"},[_c('span',{staticStyle:{"font-size":"20pt"}},[_c('span',{staticStyle:{"color":"red"}},[_v("BIG")]),_v(" header")])])]},proxy:true},{key:"modal-footer",fn:function(){return [_c('span',{staticClass:"text-center"},[_c('span',{staticStyle:{"font-size":"10pt"}},[_v("Tiny "),_c('span',{staticStyle:{"color":"green"}},[_v("footer")])])])]},proxy:true}])},[_v("\n Modal allows you to style both header and footer individually, with style classes and inline styles.\n ")])],1)],1)]),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Override the default icon for a certain type of box.")],1),_v(" "),_m(13),_c('box',{attrs:{"type":"info"},scopedSlots:_u([{key:"icon",fn:function(){return [_c('span',{staticClass:"text-danger"},[_c('span',[_c('span',{staticClass:"fas fa-home",attrs:{"aria-hidden":"true"}})])])]},proxy:true}])},[_v("\n info\n")]),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Use pictures (or even gifs) as the icon for a box.")],1),_v(" "),_m(14),_c('box',{attrs:{"type":"info","seamless":""},scopedSlots:_u([{key:"icon",fn:function(){return [_c('img',{attrs:{"width":"75%","src":"https://icons8.com/vue-static/landings/animated-icons/icons/cloud/cloud.gif"}})]},proxy:true}])},[_v("\n some very useful info\n")]),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Use "),_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html#thumbnails"}},[_v("thumbnail")]),_v(" as the icon.")],1),_v(" "),_m(15),_c('box',{attrs:{"type":"info","light":""},scopedSlots:_u([{key:"icon",fn:function(){return [_c('thumbnail',{attrs:{"circle":"","background":"#dff5ff","size":"50"}},[_v("📖")])]},proxy:true}])},[_v("\n use thumbnail as the icon\n")]),_v(" "),_m(16),_v(" "),_m(17),_v(" "),_c('tip-box',{attrs:{"border-left-color":"#00B0F0"}},[_c('i',{staticStyle:{"font-style":"normal","font-weight":"bold","color":"dimgray"}},[_v("Example")]),_c('br'),_v(" "),_c('tip-box',{attrs:{"type":"info","add-class":"lead font-italic text-center"}},[_v("\n Easily apply Bootstrap classes without using a wrapper!\n ")])],1),_v(" "),_c('tip-box',{attrs:{"border-left-color":"black"}},[_c('i',{staticStyle:{"font-style":"normal","font-weight":"bold","color":"dimgray"}},[_v("Markup")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tip-box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("add-class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"lead font-italic text-center\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Easily apply Bootstrap classes without using a wrapper!\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('br'),_v(" "),_m(18),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})],1),_v(" "),_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"},[_c('overlay-source',{staticClass:"nav nav-pills flex-column my-0 small no-flex-wrap",attrs:{"id":"mb-page-nav","tag-name":"nav","to":"mb-page-nav"}},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#advanced-tips-and-tricks"}},[_v("Advanced Tips and Tricks‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#richer-formatting-of-attributes-using-slots"}},[_v("Richer formatting of attributes using slots‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#inserting-custom-classes-into-components"}},[_v("Inserting custom classes into components‎")])])])],1)])],1),_v(" "),_m(19)])} +}; + var pageVueStaticRenderFns = [function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}},[_v("Advanced Component Usage")])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_c('em',[_v("User Guide → Advanced Component Usage")])])])])} +},function anonymous( +) { +with(this){return _c('h1',{attrs:{"id":"advanced-tips-and-tricks"}},[_c('span',{staticClass:"anchor",attrs:{"id":"advanced-tips-and-tricks"}}),_v("Advanced Tips and Tricks"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#advanced-tips-and-tricks","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"richer-formatting-of-attributes-using-slots"}},[_c('span',{staticClass:"anchor",attrs:{"id":"richer-formatting-of-attributes-using-slots"}}),_v("Richer formatting of attributes using slots"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#richer-formatting-of-attributes-using-slots","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("Most component attributes allow a richer form of formatting using slots, denoted by an attribute"),_c('strong',[_c('sup',[_v("[S]")])]),_v(" superscript in the respective components' tables.\nIn other cases, when the option is of type \"Slot\", only the slot option is available.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("You can define such a slot within the component by adding a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("slot=\"slot_name\"")]),_v(" attribute to any element within the slot.")])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("expanded")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"card-title\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("i")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("strong")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#FF0000;\"")]),_v(">")]),_v("R"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#FF7F00;\"")]),_v(">")]),_v("A"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#FFFF00;\"")]),_v(">")]),_v("I"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#00FF00;\"")]),_v(">")]),_v("N"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#0000FF;\"")]),_v(">")]),_v("B"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#4B0082;\"")]),_v(">")]),_v("O"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#9400D3;\"")]),_v(">")]),_v("W"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" As shown in this panel, using the header slot\n")]),_c('span',[_v(" allows you to customize the Panel's header using HTML.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Other examples of slots in use")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:tip-example\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trigger")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"click\"")]),_v(">")]),_v("Click here to show Modal."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:tip-example\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal-title text-center\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"font-size:20pt\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:red;\"")]),_v(">")]),_v("BIG"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" header"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" Modal allows you to style both header and footer individually, with style classes and inline styles.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"footer\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text-center\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"font-size:10pt\"")]),_v(">")]),_v("Tiny "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:green;\"")]),_v(">")]),_v("footer"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"icon\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text-danger\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("md")]),_v(">")]),_v(":fas-home:"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" info\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("img")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"icon\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://icons8.com/vue-static/landings/animated-icons/icons/cloud/cloud.gif\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" some very useful info\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("circle")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"icon\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":book:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("background")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dff5ff\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50\"")]),_v("/>")]),_v("\n")]),_c('span',[_v(" use thumbnail as the icon\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])} +},function anonymous( +) { +with(this){return _c('h2',{staticClass:"mt-4 mb-3",attrs:{"id":"inserting-custom-classes-into-components"}},[_c('span',{staticClass:"anchor",attrs:{"id":"inserting-custom-classes-into-components"}}),_v("Inserting custom classes into components"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#inserting-custom-classes-into-components","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("Every component documented in our user guide allows you to insert your own defined CSS classes.\nThis is done by adding the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("add-class")]),_v(" attribute to a component along with the desired class names.")])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-left"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/components/others.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Other Components")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-right"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_c('span',[_c('span',[_v("Using HTML, JavaScript, CSS")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} +},function anonymous( +) { +with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 3.1.1")]),_v(" on Sat, 22 Jan 2022, 16:49:34 UTC]")]),_c('br'),_v(" "),_c('small',[_v("This site is powered by "),_c('a',{attrs:{"href":"https://www.netlify.com/"}},[_v("Netlify")]),_v(".")])])])])} +}]; + \ No newline at end of file diff --git a/userGuide/components/imagesAndDiagrams.html b/userGuide/components/imagesAndDiagrams.html new file mode 100644 index 0000000..3e79dbc --- /dev/null +++ b/userGuide/components/imagesAndDiagrams.html @@ -0,0 +1,91 @@ + + + + + + + + MarkBind - User Guide: Image & Diagram Components + + + + + + + + + + + + + + + + +

Image & Diagram Components

User Guide → Image & Diagram Components

Image & Diagram Components

The image components here provide convenient syntax & styling abstractions on top of raw HTML and Markdown images. +Diagrams, in the form of inline PlantUML components are also supported. +

Pictures

A pic component allows you to add captions below the image.

CODE:

<pic src="https://markbind.org/images/logo-lightbackground.png" width="300" alt="Logo">
+  MarkBind Logo
+</pic>
+
+<pic src="https://markbind.org/images/logo-lightbackground.png" width="300" alt="Logo" eager>
+  MarkBind Logo
+</pic>
+

OUTPUT:

Logo + MarkBind Logo + Logo + MarkBind Logo +

Options

Name Type Default Description
alt string This must be specified.
The alternative text of the image.
height string The height of the image in pixels.
src string This must be specified.
The URL of the image.
The URL can be specified as absolute or relative references. More info in: Intra-Site Links
width string The width of the image in pixels.
If both width and height are specified, width takes priority over height. It is to maintain the image's aspect ratio.
eager boolean false The <pic> component lazy loads its images by default.
If you want to eagerly load the images, simply specify this attribute.
<pic src="https://markbind.org/images/logo-lightbackground.png" width="300" alt="Logo">
+  MarkBind Logo
+</pic>
+
 Logo + MarkBind Logo +

Thumbnails

A thumbnail component allows you to insert thumbnails using text, images, or icons.

CODE:

<thumbnail circle src="../../images/deer.jpg" size="100"/>
+<thumbnail circle text=":book:" background="#dff5ff" size="100"/>
+<thumbnail circle text="___CS___" background="#333" font-color="white" size="100"/>
+<thumbnail circle text=":fas-book:" font-color="darkgreen" border="3px solid darkgreen" size="100"/>
+
+<thumbnail src="../../images/deer.jpg" size="100"/>
+<thumbnail text=":book:" background="#dff5ff" size="100"/>
+<thumbnail text="___CS___" background="#333" font-color="white" size="100"/>
+<thumbnail text=":fas-book:" font-color="darkgreen" border="3px solid darkgreen" size="100"/>
+

OUTPUT:

📖 CS 📖 CS

Options

Name Type Default Description
alt string This must be specified if src is specified
The alternative text of the image.
background string Specifies the background color.
Accepts any valid CSS background property
border string Specifies the border thickness, type, and color.
Accepts any valid CSS border property
circle boolean false If this option is enabled, the thumbnail will be circle shaped instead of square
font-color string The color of the text, affects normal text and icons (but not emojis)
font-size string Text size, defaults to half of size, affects text, icons and emojis
size string 100 The size of the thumbnail in pixels
src string The URL of the image.
The URL can be specified as absolute or relative references. More info in: Intra-Site Links
text string The text to use in the thumbnail, icons, emojis and markdown are supported here

If both text and src are specified, src will take higher priority.

<thumb circle src="https://markbind.org/images/logo-lightbackground.png" size="100"/>
+

Diagrams

You can use the PlantUML syntax to add diagrams.

Java and +Graphviz +must be installed to use this feature

  • Java 8 or later (required to run the PlantUML JAR executable)
  • Graphviz v2.38 or later (required to generate all diagrams)

CODE:

<puml width="300">
+@startuml
+alice -> bob ++ : hello
+bob -> bob ++ : self call
+bob -> bib ++  #005500 : hello
+bob -> george ** : create
+return done
+return rc
+bob -> george !! : delete
+return success
+@enduml
+</puml>
+

OUTPUT:

Alternatively, a PlantUML diagram can be specified in a separate .puml file and inserted into a page using a <puml> tag.

CODE:

diagrams/sequence.puml:

@startuml
+alice -> bob ++ : hello
+bob -> bob ++ : self call
+bob -> bib ++  #005500 : hello
+bob -> george ** : create
+return done
+return rc
+bob -> george !! : delete
+return success
+@enduml
+

in another file:

<puml src="diagrams/sequence.puml" width="300"></puml>
+

OUTPUT:

The full PlantUML syntax reference can be found at plantuml.com/guide

More examples

Options

Name Type Description
alt string The alternative text of the diagram.
height string The height of the diagram in pixels.
name string The name of the output file.
src string The URL of the diagram if your diagram is in another .puml file.
The URL can be specified as absolute or relative references. More info in: Intra-Site Links
width string The width of the diagram in pixels.
If both width and height are specified, width takes priority over height. It is to maintain the diagram's aspect ratio.
<puml width=300>
+@startuml
+alice -> bob ++ : hello
+bob -> bob ++ : self call
+@enduml
+</puml>
+

Sequence Diagram:

Use Case Diagram:

Class Diagram:

Activity Diagram:

Component Diagram:

State Diagram:

Object Diagram:

Gantt Diagram:

Entity Relation Diagram:

Ditaa Diagram:

Archimate Diagram:


Presentational Components

Pop-Up Components


+ + + diff --git a/userGuide/components/imagesAndDiagrams.page-vue-render.js b/userGuide/components/imagesAndDiagrams.page-vue-render.js new file mode 100644 index 0000000..ed1641b --- /dev/null +++ b/userGuide/components/imagesAndDiagrams.page-vue-render.js @@ -0,0 +1,112 @@ + + var pageVueRenderFn = function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',[_c('header',{attrs:{"fixed":""}},[_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/index.html","title":"Home"}},[_c('img',{attrs:{"src":"/images/logo-darkbackground.svg","height":"20"}})])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('form',{staticClass:"navbar-form"},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback,"menu-align-right":""}})],1)])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/index.html"}},[_v("HOME")])]),_v(" "),_c('div',{attrs:{"tags":"environment--ug"}},[_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"sibling-or-child","href":"/userGuide/index.html"}},[_v("USER GUIDE")])])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/showcase.html"}},[_v("SHOWCASE")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/about.html"}},[_v("ABOUT")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_c('span',[_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}})])])])])],1)]),_v(" "),_c('div',{attrs:{"id":"flex-body"}},[_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"site-nav","tag-name":"nav","to":"site-nav"}},[_c('div',{staticClass:"site-nav-top"},[_c('div',{staticClass:"font-weight-bold mb-2",staticStyle:{"font-size":"1.25rem"}},[_v("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tipsAndTricks.html"}},[_v("Tips & Tricks")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/glossary.html"}},[_v("Glossary")])])])])])])],1)],1)]),_v(" "),_c('div',{staticClass:"fixed-header-padding",attrs:{"id":"content-wrapper"}},[_m(0),_v(" "),_m(1),_v(" "),_c('div',[_c('b-modal',{ref:"on-slots",attrs:{"id":"on-slots","hide-footer":"","size":"lg","modal-class":"mb-zoom"},scopedSlots:_u([{key:"modal-title",fn:function(){return [_v("Richer formatting of attributes using slots")]},proxy:true}])},[_v(" "),_c('div',[_c('p',[_v("Most component attributes allow a richer form of formatting using slots, denoted by an attribute"),_c('strong',[_c('sup',[_v("[S]")])]),_v(" superscript in the respective components' tables.\nIn other cases, when the option is of type \"Slot\", only the slot option is available.")]),_v(" "),_c('p',[_v("You can define such a slot within the component by adding a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("slot=\"slot_name\"")]),_v(" attribute to any element within the slot.")]),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])],1),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("expanded")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"card-title\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("i")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("strong")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#FF0000;\"")]),_v(">")]),_v("R"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#FF7F00;\"")]),_v(">")]),_v("A"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#FFFF00;\"")]),_v(">")]),_v("I"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#00FF00;\"")]),_v(">")]),_v("N"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#0000FF;\"")]),_v(">")]),_v("B"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#4B0082;\"")]),_v(">")]),_v("O"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#9400D3;\"")]),_v(">")]),_v("W"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" As shown in this panel, using the header slot\n")]),_c('span',[_v(" allows you to customize the Panel's header using HTML.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',{staticClass:"card-title"},[_c('i',[_c('strong',[_c('span',{staticStyle:{"color":"#FF0000"}},[_v("R")]),_v(" "),_c('span',{staticStyle:{"color":"#FF7F00"}},[_v("A")]),_v(" "),_c('span',{staticStyle:{"color":"#FFFF00"}},[_v("I")]),_v(" "),_c('span',{staticStyle:{"color":"#00FF00"}},[_v("N")]),_v(" "),_c('span',{staticStyle:{"color":"#0000FF"}},[_v("B")]),_v(" "),_c('span',{staticStyle:{"color":"#4B0082"}},[_v("O")]),_v(" "),_c('span',{staticStyle:{"color":"#9400D3"}},[_v("W")])])])])]},proxy:true}])},[_v("\n As shown in this panel, using the header slot\n allows you to customize the Panel's header using HTML.\n")])],1)],1)])])])],1),_v(" "),_m(2),_v(" "),_m(3),_c('p'),_v(" "),_c('div',[_m(4),_v(" "),_m(5),_v(" "),_c('div',[_m(6),_v(" "),_m(7),_v(" "),_m(8),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pic',{attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","width":"300","alt":"Logo"}},[_v("\n MarkBind Logo\n")]),_v(" "),_c('pic',{attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","width":"300","alt":"Logo","eager":""}},[_v("\n MarkBind Logo\n")])],1)],1)]),_v(" "),_m(9),_v(" "),_m(10),_m(11),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('pic',{attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","width":"300","alt":"Logo"}},[_v("\n MarkBind Logo\n")])],1)]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(12),_v(" "),_m(13),_v(" "),_c('div',[_m(14),_v(" "),_m(15),_v(" "),_m(16),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('thumbnail',{attrs:{"circle":"","src":"/images/deer.jpg","size":"100"}}),_v(" "),_c('thumbnail',{attrs:{"circle":"","background":"#dff5ff","size":"100"}},[_v("📖")]),_v(" "),_c('thumbnail',{attrs:{"circle":"","background":"#333","font-color":"white","size":"100"}},[_c('em',[_c('strong',[_v("CS")])])]),_v(" "),_c('thumbnail',{attrs:{"circle":"","font-color":"darkgreen","border":"3px solid darkgreen","size":"100"}},[_c('span',{staticClass:"fas fa-book",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('thumbnail',{attrs:{"src":"/images/deer.jpg","size":"100"}}),_v(" "),_c('thumbnail',{attrs:{"background":"#dff5ff","size":"100"}},[_v("📖")]),_v(" "),_c('thumbnail',{attrs:{"background":"#333","font-color":"white","size":"100"}},[_c('em',[_c('strong',[_v("CS")])])]),_v(" "),_c('thumbnail',{attrs:{"font-color":"darkgreen","border":"3px solid darkgreen","size":"100"}},[_c('span',{staticClass:"fas fa-book",attrs:{"aria-hidden":"true"}})])],1)],1)]),_v(" "),_m(17),_v(" "),_m(18),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("If both "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("text")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" are specified, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" will take higher priority.")])]),_v(" "),_m(19),_v(" "),_m(20)],1),_v(" "),_c('hr'),_v(" "),_c('div',[_m(21),_v(" "),_m(22),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_c('strong',[_c('a',{attrs:{"href":"https://www.java.com/en/download/"}},[_v("Java")]),_v(" and\n"),_c('a',{attrs:{"href":"https://www.graphviz.org/download/"}},[_v("Graphviz")]),_v("\nmust be installed to use this feature")])]),_v(" "),_c('ul',[_c('li',[_v("Java 8 or later (required to run the PlantUML JAR executable)")]),_v(" "),_c('li',[_v("Graphviz v2.38 or later (required to generate "),_c('em',[_v("all")]),_v(" diagrams)")])])]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_m(23),_v(" "),_m(24),_v(" "),_m(25),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('pic',{attrs:{"src":"/userGuide/diagrams/sequence.png","width":"300"}})],1)])],1)])]),_v(" "),_m(26),_v(" "),_c('div',[_m(27),_v(" "),_m(28),_v(" "),_m(29),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('pic',{attrs:{"src":"/userGuide/diagrams/sequence.png","width":"300"}})],1)])],1)]),_v(" "),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("The full PlantUML syntax reference can be found at "),_c('a',{attrs:{"href":"http://plantuml.com/guide"}},[_v("plantuml.com/guide")])])]),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("More examples")])]},proxy:true}])},[_v(" "),_c('span',{attrs:{"id":"puml-examples"}},[_c('p',[_c('strong',[_v("Sequence Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/sequence.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Use Case Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/usecase.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Class Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/class.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Activity Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/activity.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Component Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/component.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("State Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/state.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Object Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/object.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Gantt Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/gantt.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Entity Relation Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/entityrelation.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Ditaa Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/ditaa.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Archimate Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/archimate.png"}})],1)])]),_v(" "),_c('p'),_v(" "),_m(30),_v(" "),_m(31),_m(32),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('div',[_c('p',[_c('strong',[_v("Sequence Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/sequence.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Use Case Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/usecase.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Class Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/class.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Activity Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/activity.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Component Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/component.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("State Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/state.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Object Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/object.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Gantt Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/gantt.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Entity Relation Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/entityrelation.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Ditaa Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/ditaa.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Archimate Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/archimate.png"}})],1)])])],1),_v(" "),_c('hr'),_v(" "),_c('br'),_v(" "),_m(33),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})]),_v(" "),_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"},[_c('overlay-source',{staticClass:"nav nav-pills flex-column my-0 small no-flex-wrap",attrs:{"id":"mb-page-nav","tag-name":"nav","to":"mb-page-nav"}},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#image-and-amp-diagram-components"}},[_v("Image & Diagram Components‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#pictures"}},[_v("Pictures‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#thumbnails"}},[_v("Thumbnails‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#diagrams"}},[_v("Diagrams‎")])])])],1)])],1),_v(" "),_m(34)])} +}; + var pageVueStaticRenderFns = [function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}},[_v("Image & Diagram Components")])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_c('em',[_v("User Guide → Image & Diagram Components")])])])])} +},function anonymous( +) { +with(this){return _c('h1',{attrs:{"id":"image-and-amp-diagram-components"}},[_c('span',{staticClass:"anchor",attrs:{"id":"image-and-amp-diagram-components"}}),_v("Image & Diagram Components"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#image-and-amp-diagram-components","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p',[_v("The image components here provide "),_c('strong',[_v("convenient syntax & styling abstractions")]),_v(" on top of raw HTML and Markdown images.\nDiagrams, in the form of "),_c('strong',[_v("inline PlantUML components")]),_v(" are also supported.\n")])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"pictures"}},[_c('span',{staticClass:"anchor",attrs:{"id":"pictures"}}),_v("Pictures"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#pictures","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("A "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pic")]),_v(" component allows you to add captions below the image.")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://markbind.org/images/logo-lightbackground.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"300\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Logo\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" MarkBind Logo\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://markbind.org/images/logo-lightbackground.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"300\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Logo\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("eager")]),_v(">")]),_v("\n")]),_c('span',[_v(" MarkBind Logo\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_c('strong',[_v("Options")])])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("alt")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_c('strong',[_v("This must be specified.")]),_c('br'),_v("The alternative text of the image.")])]),_v(" "),_c('tr',[_c('td',[_v("height")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The height of the image in pixels.")])]),_v(" "),_c('tr',[_c('td',[_v("src")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_c('strong',[_v("This must be specified.")]),_c('br'),_v("The URL of the image."),_c('br'),_v("The URL can be specified as absolute or relative references. More info in: "),_c('em',[_c('a',{attrs:{"href":"/userGuide/formattingContents.html#intraSiteLinks"}},[_v("Intra-Site Links")])])])]),_v(" "),_c('tr',[_c('td',[_v("width")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The width of the image in pixels."),_c('br'),_v("If both width and height are specified, width takes priority over height. It is to maintain the image's aspect ratio.")])]),_v(" "),_c('tr',[_c('td',[_v("eager")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boolean")])]),_v(" "),_c('td',[_v("false")]),_v(" "),_c('td',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" component lazy loads its images by default."),_c('br'),_v("If you want to eagerly load the images, simply specify this attribute.")])])])])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://markbind.org/images/logo-lightbackground.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"300\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Logo\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" MarkBind Logo\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"thumbnails"}},[_c('span',{staticClass:"anchor",attrs:{"id":"thumbnails"}}),_v("Thumbnails"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#thumbnails","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("A "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("thumbnail")]),_v(" component allows you to insert thumbnails using text, images, or icons.")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("circle")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../../images/deer.jpg\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("circle")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":book:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("background")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dff5ff\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("circle")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"___CS___\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("background")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#333\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("font-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"white\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("circle")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-book:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("font-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"darkgreen\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("border")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"3px solid darkgreen\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../../images/deer.jpg\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":book:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("background")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dff5ff\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"___CS___\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("background")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#333\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("font-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"white\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-book:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("font-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"darkgreen\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("border")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"3px solid darkgreen\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_c('strong',[_v("Options")])])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("alt")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_c('strong',[_v("This must be specified if "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" is specified")]),_c('br'),_v("The alternative text of the image.")])]),_v(" "),_c('tr',[_c('td',[_v("background")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("Specifies the background color."),_c('br'),_v(" Accepts any valid CSS background property")])]),_v(" "),_c('tr',[_c('td',[_v("border")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("Specifies the border thickness, type, and color."),_c('br'),_v(" Accepts any valid CSS border property")])]),_v(" "),_c('tr',[_c('td',[_v("circle")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boolean")])]),_v(" "),_c('td',[_v("false")]),_v(" "),_c('td',[_v("If this option is enabled, the thumbnail will be circle shaped instead of square")])]),_v(" "),_c('tr',[_c('td',[_v("font-color")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The color of the text, affects normal text and icons (but not emojis)")])]),_v(" "),_c('tr',[_c('td',[_v("font-size")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("Text size, defaults to half of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("size")]),_v(", affects text, icons and emojis")])]),_v(" "),_c('tr',[_c('td',[_v("size")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("100")]),_v(" "),_c('td',[_v("The size of the thumbnail in pixels")])]),_v(" "),_c('tr',[_c('td',[_v("src")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The URL of the image."),_c('br'),_v("The URL can be specified as absolute or relative references. More info in: "),_c('em',[_c('a',{attrs:{"href":"/userGuide/formattingContents.html#intraSiteLinks"}},[_v("Intra-Site Links")])])])]),_v(" "),_c('tr',[_c('td',[_v("text")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The text to use in the thumbnail, "),_c('a',{attrs:{"href":"/userGuide/formattingContents.html#icons"}},[_v("icons")]),_v(", "),_c('a',{attrs:{"href":"/userGuide/formattingContents.html#emoji"}},[_v("emojis")]),_v(" and markdown are supported here")])])])])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumb")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("circle")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://markbind.org/images/logo-lightbackground.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('thumb',{pre:true,attrs:{"circle":"","src":"https://markbind.org/images/logo-lightbackground.png","size":"100"}})],1)} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"diagrams"}},[_c('span',{staticClass:"anchor",attrs:{"id":"diagrams"}}),_v("Diagrams"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#diagrams","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("You can use the "),_c('a',{attrs:{"href":"http://plantuml.com/"}},[_v("PlantUML")]),_v(" syntax to add diagrams.")])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("\n")]),_c('span',[_v("@startuml\n")]),_c('span',[_v("alice -> bob ++ : hello\n")]),_c('span',[_v("bob -> bob ++ : self call\n")]),_c('span',[_v("bob -> bib ++ #005500 : hello\n")]),_c('span',[_v("bob -> george ** : create\n")]),_c('span',[_v("return done\n")]),_c('span',[_v("return rc\n")]),_c('span',[_v("bob -> george !! : delete\n")]),_c('span',[_v("return success\n")]),_c('span',[_v("@enduml\n")]),_c('span',[_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("Alternatively, a PlantUML diagram can be specified in a separate "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".puml")]),_v(" file and inserted into a page using a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" tag.")])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("diagrams/sequence.puml")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("@startuml\n")]),_c('span',[_v("alice -> bob ++ : hello\n")]),_c('span',[_v("bob -> bob ++ : self call\n")]),_c('span',[_v("bob -> bib ++ #005500 : hello\n")]),_c('span',[_v("bob -> george ** : create\n")]),_c('span',[_v("return done\n")]),_c('span',[_v("return rc\n")]),_c('span',[_v("bob -> george !! : delete\n")]),_c('span',[_v("return success\n")]),_c('span',[_v("@enduml\n")])])]),_c('p',[_v("in another file:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("puml")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"diagrams/sequence.puml\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"300\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_c('strong',[_v("Options")])])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("alt")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The alternative text of the diagram.")])]),_v(" "),_c('tr',[_c('td',[_v("height")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The height of the diagram in pixels.")])]),_v(" "),_c('tr',[_c('td',[_v("name")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The name of the output file.")])]),_v(" "),_c('tr',[_c('td',[_v("src")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The URL of the diagram if your diagram is in another "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".puml")]),_v(" file."),_c('br'),_v("The URL can be specified as absolute or relative references. More info in: "),_c('em',[_c('a',{attrs:{"href":"/userGuide/formattingContents.html#intraSiteLinks"}},[_v("Intra-Site Links")])])])]),_v(" "),_c('tr',[_c('td',[_v("width")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The width of the diagram in pixels."),_c('br'),_v("If both width and height are specified, width takes priority over height. It is to maintain the diagram's aspect ratio.")])])])])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("\n")]),_c('span',[_v("@startuml\n")]),_c('span',[_v("alice -> bob ++ : hello\n")]),_c('span',[_v("bob -> bob ++ : self call\n")]),_c('span',[_v("@enduml\n")]),_c('span',[_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-left"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/components/presentation.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Presentational Components")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-right"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/components/popups.html"}},[_c('span',[_c('span',[_v("Pop-Up Components")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} +},function anonymous( +) { +with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 3.1.1")]),_v(" on Sat, 22 Jan 2022, 16:49:34 UTC]")]),_c('br'),_v(" "),_c('small',[_v("This site is powered by "),_c('a',{attrs:{"href":"https://www.netlify.com/"}},[_v("Netlify")]),_v(".")])])])])} +}]; + \ No newline at end of file diff --git a/userGuide/components/navigation.html b/userGuide/components/navigation.html new file mode 100644 index 0000000..88a7fe8 --- /dev/null +++ b/userGuide/components/navigation.html @@ -0,0 +1,222 @@ + + + + + + + + MarkBind - User Guide: Navigation Components + + + + + + + + + + + + + + + + +

Navigation Components

User Guide → Navigation Components

Navigation Components

The components in this page are used for scaffolding site and page navigation.

While the main use case for dropdowns is under navbars, they can also be used as top-level components.

CODE:

<!--Notice how header attribute supports inline MarkDown-->
+<dropdown header="*Action*" type="primary">
+  <li><a href="#dropdown" class="dropdown-item">Action</a></li>
+  <li><a href="#dropdown" class="dropdown-item">Another action</a></li>
+  <li><a href="#dropdown" class="dropdown-item">Something else here</a></li>
+  <li role="separator" class="dropdown-divider"></li>
+  <li><a href="#dropdown" class="dropdown-item">Separated link</a></li>
+</dropdown>
+
+<!-- For segmented dropdown, ignore header and add a "before" slot -->
+<dropdown type="info">
+  <button slot="before" type="button" class="btn btn-info">Segmented</button>
+  <li><a href="#dropdown" class="dropdown-item">...</a></li>
+</dropdown>
+
+<!-- Right aligned list -->
+<dropdown header="Right aligned list" type="primary" menu-align-right>
+  <li><a href="#dropdown" class="dropdown-item">Something else here</a></li>
+</dropdown>
+
+<!-- Inside a bootstrap button group -->
+<div class="btn-group d-flex mt-3" role="group">
+  <a href="#dropdown" class="btn btn-danger w-100" role="button">Left</a>
+  <!-- With slots you can handle some elements as native bootstrap -->
+  <dropdown class="w-100">
+    <button slot="button" type="button" class="btn btn-warning dropdown-toggle w-100">
+      Action
+      <span class="caret"></span>
+    </button>
+    <ul slot="dropdown-menu" class="dropdown-menu">
+      <li><a href="#dropdown" class="dropdown-item">Action</a></li>
+      <li><a href="#dropdown" class="dropdown-item">Another action</a></li>
+      <li><a href="#dropdown" class="dropdown-item">Something else here</a></li>
+      <li role="separator" class="dropdown-divider"></li>
+      <li><a href="#dropdown" class="dropdown-item">Separated link</a></li>
+    </ul>
+  </dropdown>
+  <a href="#dropdown" class="btn btn-success w-100" role="button">Right</a>
+</div>
+

OUTPUT:

Left
Right

Dropdowns can also be nested within each other to create multi-level submenus.

CODE:

<!-- Nest the dropdown syntax to create dropdown submenus -->
+<dropdown header="*Multi-Level Dropdown*" type="primary">
+  <li><a href="#dropdown" class="dropdown-item">Item</a></li>
+  <li><a href="#dropdown" class="dropdown-item">Another item</a></li>
+  <dropdown header="*Submenu*">
+    <li><a href="#dropdown" class="dropdown-item">Item</a></li>
+    <li><a href="#dropdown" class="dropdown-item">Another item</a></li>
+  </dropdown>
+</dropdown>
+

OUTPUT:

Options

Name Type Default Description
disabled Boolean false Whether Dropdown can be opened.
menu-align-right Boolean false Whether the dropdown list will be right-aligned.
header [S] String '' Dropdown button header text. (Supports inline MarkDown syntax)
type String default Supports: default, primary, danger, info, warning, success.

You may refer to this documentation regarding how you can use the Bootstrap buttons, and how to style them.

<dropdown header="Action" type="primary">
+  <li><a href="#dropdown" class="dropdown-item">Action</a></li>
+  <li><a href="#dropdown" class="dropdown-item">Another action</a></li>
+  <li role="separator" class="dropdown-divider"></li>
+  <li><a href="#dropdown" class="dropdown-item">Separated link</a></li>
+</dropdown>
+

Left
Right

Search Bars

The searchbar component allows users to search all headings within any page on the site.

CODE:

<searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback"></searchbar>
+<searchbar :data="searchData" placeholder="Search (Right-aligned dropdown)" :on-hit="searchCallback" menu-align-right></searchbar>
+

To use the searchbar within a navbar, add the following markup to your file. The searchbar can be positioned using the slot attribute for the list. The following markup adds a searchbar to the right side of the navbar with appropriate styling.

<li slot="right">
+  <form class="navbar-form">
+    <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback"></searchbar>
+  </form>
+</li>
+

OUTPUT:

Enter a search term (eg. 'search bar') to see the search result dropdown.


      Options

      Name Type Default Description
      algolia Boolean false Whether the searchbar should be connected to Algolia DocSearch.
      data Array The local data source for suggestions. Expected to be a primitive array. To use MarkBind's search functionality, set this value to "searchData".
      menu-align-right Boolean false Whether the search bar's dropdown list will be right-aligned.
      on-hit Function A callback function when you click or hit return on an item. To use MarkBind's search functionality, set this value to "searchCallback".
      placeholder String '' The placeholder text shown when no keywords are entered in the search bar.

      Note: If you are using MarkBind's search functionality, then enableSearch must be set to true in site.json.

      See: User Guide: Site Configuration → enableSearch.

      Related topic: User Guide: Making the Site Searchable.

      Related topic: User Guide: Using Plugins → Algolia: Enabling Algolia DocSearch.

       

      <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right></searchbar>
+
      <li slot="right">
+  <form class="navbar-form">
+    <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback"></searchbar>
+  </form>
+</li>
+

        Navbar allows visitors of your website to navigate through pages easily.

        Navbars support link highlighting; link highlighting can be customised by specifying rules.

        • Define default-highlight-on in <navbar> to specify fallback highlight rules.
        • Define data-highlight in <a> tags with the class nav-link or dropdown-item to specify individual highlight rules.

        Note: Navbars should be placed within a header file to ensure that they are correctly positioned at the top of the page, above the site navigation and page navigation menus.

        CODE:

        <navbar type="primary">
+  <!-- Brand as slot -->
+  <a slot="brand" href="/" title="Home" class="navbar-brand">MarkBind</a>
+  <li><a href="/userGuide/components/navigation.html#navbars" class="nav-link">Highlighted Link</a></li>
+  <!-- You can use dropdown component -->
+  <dropdown header="Dropdown" class="nav-link">
+    <li><a href="#navbars" class="dropdown-item">Option</a></li>
+  </dropdown>
+  <!-- For right positioning use slot -->
+  <li slot="right">
+    <a href="https://github.com/MarkBind/markbind" target="_blank" class="nav-link">Fork...</a>
+  </li>
+</navbar>
+
+<navbar type="dark">
+  <!-- Brand as slot -->
+  <a slot="brand" href="/" title="Home" class="navbar-brand">MarkBind</a>
+  <li><a href="/userGuide/components/navigation.html#navbars" class="nav-link">Highlighted Link</a></li>
+  <!-- You can use dropdown component -->
+  <dropdown header="Dropdown" class="nav-link">
+    <li><a href="#navbars" class="dropdown-item">Option</a></li>
+  </dropdown>
+  <!-- For right positioning use slot -->
+  <li slot="right">
+    <a href="https://github.com/MarkBind/markbind" target="_blank" class="nav-link">Fork...</a>
+  </li>
+</navbar>
+
+<navbar type="light">
+  <!-- Brand as slot -->
+  <a slot="brand" href="/" title="Home" class="navbar-brand">MarkBind</a>
+  <li><a href="/userGuide/components/navigation.html#navbars" class="nav-link">Highlighted Link</a></li>
+  <!-- You can use dropdown component -->
+  <dropdown header="Dropdown" class="nav-link">
+    <li><a href="#navbars" class="dropdown-item">Option</a></li>
+  </dropdown>
+  <!-- For right positioning use slot -->
+  <li slot="right">
+    <a href="https://github.com/MarkBind/markbind" target="_blank" class="nav-link">Fork...</a>
+  </li>
+</navbar>
+

        OUTPUT:

        Options

        Name Type Default Description
        type String primary Supports: primary, dark, light, none.
        default-highlight-on String sibling-or-child Supports: sibling-or-child, sibling, child, exact, none. Specifies link highlight rules for navbars.

        If you wish to further customize your navbar beyond the primary, dark, and light theme colors, specify the type="none" attribute and insert your own custom styles or use built-in background styles via the add-class attribute.

        Navbar Link Highlighting

        <head-bottom>
+  <link rel="stylesheet" href="/css/main.css">
+</head-bottom>
+
+<header fixed>
+  <navbar type="dark">
+    <a slot="brand" href="/index.html" title="Home" class="navbar-brand"><img src="/images/logo-darkbackground.svg" height="20"></a>
+    <li><a highlight-on="exact" href="/index.html" class="nav-link">HOME</a></li>
+    <div tags="environment--ug"><li><a highlight-on="sibling-or-child" href="/userGuide/index.html" class="nav-link">USER GUIDE</a></li></div>
+    <div tags="environment--dg"><li><a highlight-on="sibling-or-child" href="/devGuide/index.html" class="nav-link">DEVELOPER GUIDE</a></li></div>
+    <li><a highlight-on="exact" href="/showcase.html" class="nav-link">SHOWCASE</a></li>
+    <li><a highlight-on="exact" href="/about.html" class="nav-link">ABOUT</a></li>
+    <li>
+      <a href="https://github.com/MarkBind/markbind" target="_blank" class="nav-link"><md>:fab-github:</md></a>
+    </li>
+    <li slot="right">
+      <form class="navbar-form">
+        <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right></searchbar>
+      </form>
+    </li>
+  </navbar>
+</header>
+
+

        Highlight Options

        Name Description
        child Highlights link if URL in address bar is a child of the link. E.g foo/bar is a child of foo.
        sibling Highlights link if URL in address bar is a sibling of the link. E.g foo/bar and foo/bear are siblings.
        sibling-or-child Highlights link if URL in address bar is a sibling or child of the link.
        exact Highlights link if URL in address bar exactly matches link.
        none No highlighting.
        <navbar type="primary">
+  <!-- Brand as slot -->
+  <a slot="brand" href="/" title="Home" class="navbar-brand">MarkBind</a>
+  <li><a href="/userGuide/components/navigation.html#navbars" class="nav-link">Highlighted Link</a></li>
+  <!-- You can use dropdown component -->
+  <dropdown header="Dropdown" class="nav-link">
+    <li><a href="#navbars" class="dropdown-item">Option</a></li>
+  </dropdown>
+  <!-- For right positioning use slot -->
+  <li slot="right">
+    <a href="https://github.com/MarkBind/markbind" target="_blank" class="nav-link">Fork...</a>
+  </li>
+</navbar>
+

        Mobile page and site navigation menus

        The navbar component also provides access to MarkBind's site navigation and page navigation menu components if used in the page's layout. No additional setup is required!

        If you are viewing the documentation on a larger device, resize the window to see what it looks like.

        Alternatively, if you want to display e.g. adding an image to the site navadditional content in these navigation menus, the navbar is also able to "pull in" any container element with a html id of "site-nav" or "page-nav". You may refer to the layouts section for an example.

        The navbar component auto-detects if the MarkBind's navigation components or your element containers has any <a> tags in particularlinks.
        +If absent, the navigation buttons to open the menus are automatically hidden.

        Mobile navigation menu button placement

        If you wish to alter the button placement on the navbar, you may use the <site-nav-button /> and <page-nav-button /> components in the lower-navbar slot.

        By default, if the lower-navbar slot is not specified, the site and page navigation buttons are simply placed as such.

        <navbar>
+  <!-- Any normal navbar items -->
+  <a slot="brand" href="/" title="Home" class="navbar-brand">MarkBind</a>
+  <li><a href="/userGuide/components/navigation.html#navbars" class="nav-link">Highlighted Link</a></li>
+  <!-- Use slot to wrap the buttons in the lower navbar -->
+  <div slot="lower-navbar" class="nav-menu-container">
+    <site-nav-button />
+    <page-nav-button />
+  </div>
+</navbar>
+
        Component Description
        page-nav-button Pulls any element with an identifier, id=page-nav into the menu. If no such element exists, it pulls any page navigation menu used in the layout.
        site-nav-button Pulls any element with an identifier, id=site-nav into the menu. If no such element exists, it pulls all site navigation menu components used in the layout.

        Styling the mobile page and site navigation menus

        You may also wish to style your navigation content differently on mobile view. +By default, MarkBind already provides some reasonable overrides for smaller screens, applied over any styles you might have for the mobile navigation content identified above.

        Css class attached to the root navigation element
        .mb-mobile-nav {
+    display: block !important;
+    margin: 0 !important;
+    border: none !important;
+    padding: 10px !important;
+    width: 100% !important;
+    max-width: 100% !important;
+}
+

        If you require greater customisation, you may simply compose the respective selectors with the .mb-mobile-nav element.

        Example

        #site-nav.mb-mobile-nav {
+  /* Be sure to add the !important css rule when overriding .mb-mobile-nav's properties! */
+  border: 1px solid black !important;
+  /* For other properties, there is no need. */
+  color: red;
+}
+

        Refer to the layouts section to find out how to add custom css files to a page!

        A Site Navigation Menu (siteNav for short) can be used to show a road map of the main pages of your site.

        Steps to add a siteNav:

        1. Format your siteNav as an unordered Markdown list
        2. Include it under a <site-nav> element.
        3. (Optional) To make siteNav accessible on smaller screens, you can use the <site-nav-button /> component in the navbar.

        CODE:

        <site-nav>
+* [**Getting Started**](/userGuide/gettingStarted.html)
+* **Authoring Contents** :expanded:
+  * [Overview](/userGuide/authoringContents.html)
+  * [Adding Pages](/userGuide/addingPages.html)
+  * [MarkBind Syntax Overview](/userGuide/markBindSyntaxOverview.html)
+  * [Formatting Contents](/userGuide/formattingContents.html)
+  * [Using Components](/userGuide/usingComponents.html)
+</site-nav>
+

        OUTPUT:

        MarkBind has styles nested lists with additional padding and smaller text sizes up to 4 nesting levels. +Beyond that, you'd have to include your own styles.

        Expanding menu items by default

        You can append the :expanded: to a a menu item with sub menu-itemsparent menu item to make it expand by default. In the example above, * Docs :expanded: will make the menu item Docs expand by default.

        A parent menu item that is also linked will not be collapsible e.g., the Search menu item in the above example.

        Page Navigation Menus

        A Page Navigation Menu (pageNav for short) a list of the current page's headings. Page navigation menus are only available for use in layouts.

        Adding a pageNav

        1. Specify the smallest heading level you want to be included within the <frontmatter> of a page with The value default will use headingIndexingLevel within site.json."default" or a HTML defines six levels of headings, numbered from
          1 to 6.          heading level          .

          The default level uses the headingIndexingLevel property of your site configuration file.

        2. (Optional) You may also specify a page navigation title within <frontmatter> that will be placed at the top of the page navigation menu.

        3. Position the page navigation menu within your layout using the <page-nav /> component.

        4. (Optional) To make pageNav accessible on smaller screens, you can use the <page-nav-button /> component in the navbar.

        Example +In the page that you want to have page navigation, you may show only <h1> and <h2> headings in the pageNav, and set a custom pageNav title like so:

        <frontmatter>
+  pageNav: 2
+  pageNavTitle: "Chapters of This Page"
+</frontmatter>
+

        Then, in your layout file, use the <page-nav /> component to position the pageNav.

        Example Example usage of the <page-nav /> component

        You can see an example of a Page Navigation Bar on the right side of this page. +


        Pop-Up Components

        Other Components


        + + + diff --git a/userGuide/components/navigation.page-vue-render.js b/userGuide/components/navigation.page-vue-render.js new file mode 100644 index 0000000..c90821b --- /dev/null +++ b/userGuide/components/navigation.page-vue-render.js @@ -0,0 +1,244 @@ + + var pageVueRenderFn = function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',[_c('header',{attrs:{"fixed":""}},[_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/index.html","title":"Home"}},[_c('img',{attrs:{"src":"/images/logo-darkbackground.svg","height":"20"}})])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('form',{staticClass:"navbar-form"},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback,"menu-align-right":""}})],1)])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/index.html"}},[_v("HOME")])]),_v(" "),_c('div',{attrs:{"tags":"environment--ug"}},[_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"sibling-or-child","href":"/userGuide/index.html"}},[_v("USER GUIDE")])])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/showcase.html"}},[_v("SHOWCASE")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/about.html"}},[_v("ABOUT")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_c('span',[_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}})])])])])],1)]),_v(" "),_c('div',{attrs:{"id":"flex-body"}},[_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"site-nav","tag-name":"nav","to":"site-nav"}},[_c('div',{staticClass:"site-nav-top"},[_c('div',{staticClass:"font-weight-bold mb-2",staticStyle:{"font-size":"1.25rem"}},[_v("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tipsAndTricks.html"}},[_v("Tips & Tricks")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/glossary.html"}},[_v("Glossary")])])])])])])],1)],1)]),_v(" "),_c('div',{staticClass:"fixed-header-padding",attrs:{"id":"content-wrapper"}},[_m(0),_v(" "),_m(1),_v(" "),_c('div',[_c('b-modal',{ref:"on-slots",attrs:{"id":"on-slots","hide-footer":"","size":"lg","modal-class":"mb-zoom"},scopedSlots:_u([{key:"modal-title",fn:function(){return [_v("Richer formatting of attributes using slots")]},proxy:true}])},[_v(" "),_c('div',[_c('p',[_v("Most component attributes allow a richer form of formatting using slots, denoted by an attribute"),_c('strong',[_c('sup',[_v("[S]")])]),_v(" superscript in the respective components' tables.\nIn other cases, when the option is of type \"Slot\", only the slot option is available.")]),_v(" "),_c('p',[_v("You can define such a slot within the component by adding a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("slot=\"slot_name\"")]),_v(" attribute to any element within the slot.")]),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])],1),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("expanded")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"card-title\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("i")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("strong")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#FF0000;\"")]),_v(">")]),_v("R"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#FF7F00;\"")]),_v(">")]),_v("A"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#FFFF00;\"")]),_v(">")]),_v("I"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#00FF00;\"")]),_v(">")]),_v("N"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#0000FF;\"")]),_v(">")]),_v("B"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#4B0082;\"")]),_v(">")]),_v("O"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#9400D3;\"")]),_v(">")]),_v("W"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" As shown in this panel, using the header slot\n")]),_c('span',[_v(" allows you to customize the Panel's header using HTML.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',{staticClass:"card-title"},[_c('i',[_c('strong',[_c('span',{staticStyle:{"color":"#FF0000"}},[_v("R")]),_v(" "),_c('span',{staticStyle:{"color":"#FF7F00"}},[_v("A")]),_v(" "),_c('span',{staticStyle:{"color":"#FFFF00"}},[_v("I")]),_v(" "),_c('span',{staticStyle:{"color":"#00FF00"}},[_v("N")]),_v(" "),_c('span',{staticStyle:{"color":"#0000FF"}},[_v("B")]),_v(" "),_c('span',{staticStyle:{"color":"#4B0082"}},[_v("O")]),_v(" "),_c('span',{staticStyle:{"color":"#9400D3"}},[_v("W")])])])])]},proxy:true}])},[_v("\n As shown in this panel, using the header slot\n allows you to customize the Panel's header using HTML.\n")])],1)],1)])])])],1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_c('div',[_m(4),_v(" "),_m(5),_v(" "),_c('div',[_m(6),_v(" "),_m(7),_v(" "),_m(8),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('dropdown',{attrs:{"type":"primary"},scopedSlots:_u([{key:"header",fn:function(){return [_c('em',[_v("Action")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])]),_v(" "),_c('li',{staticClass:"dropdown-divider",attrs:{"role":"separator"}}),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Separated link")])])]),_v(" "),_c('dropdown',{attrs:{"type":"info"},scopedSlots:_u([{key:"before",fn:function(){return [_c('button',{staticClass:"btn btn-info",attrs:{"type":"button"}},[_v("Segmented")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("...")])])]),_v(" "),_c('dropdown',{attrs:{"type":"primary","menu-align-right":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Right aligned list")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])])]),_v(" "),_c('div',{staticClass:"btn-group d-flex mt-3",attrs:{"role":"group"}},[_c('a',{staticClass:"btn btn-danger w-100",attrs:{"href":"#dropdown","role":"button"}},[_v("Left")]),_v(" "),_c('dropdown',{staticClass:"w-100",scopedSlots:_u([{key:"button",fn:function(){return [_c('button',{staticClass:"btn btn-warning dropdown-toggle w-100",attrs:{"type":"button"}},[_v("\n Action\n "),_c('span',{staticClass:"caret"})])]},proxy:true},{key:"dropdown-menu",fn:function(){return [_c('ul',{staticClass:"dropdown-menu"},[_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])]),_v(" "),_c('li',{staticClass:"dropdown-divider",attrs:{"role":"separator"}}),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Separated link")])])])]},proxy:true}])}),_v(" "),_c('a',{staticClass:"btn btn-success w-100",attrs:{"href":"#dropdown","role":"button"}},[_v("Right")])],1)],1)],1)]),_v(" "),_m(9),_v(" "),_c('div',[_m(10),_v(" "),_m(11),_v(" "),_m(12),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('dropdown',{attrs:{"type":"primary"},scopedSlots:_u([{key:"header",fn:function(){return [_c('em',[_v("Multi-Level Dropdown")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Item")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another item")])]),_v(" "),_c('dropdown',{scopedSlots:_u([{key:"header",fn:function(){return [_c('em',[_v("Submenu")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Item")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another item")])])])],1)],1)],1)]),_v(" "),_m(13),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_m(14),_v(" "),_c('tbody',[_m(15),_v(" "),_m(16),_v(" "),_c('tr',[_c('td',[_v("header"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_m(17),_v(" "),_m(18),_v(" "),_c('td',[_v("Dropdown button header text. (Supports inline MarkDown syntax)")])]),_v(" "),_m(19)])])]),_m(20),_v(" "),_m(21),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('dropdown',{attrs:{"type":"primary"},scopedSlots:_u([{key:"header",fn:function(){return [_v("Action")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])]),_v(" "),_c('li',{staticClass:"dropdown-divider",attrs:{"role":"separator"}}),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Separated link")])])]),_v(" "),_c('dropdown',{attrs:{"type":"info"},scopedSlots:_u([{key:"before",fn:function(){return [_c('button',{staticClass:"btn btn-info",attrs:{"type":"button"}},[_v("Segmented")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("...")])])]),_v(" "),_c('p'),_v(" "),_c('div',{staticClass:"btn-group d-flex",attrs:{"role":"group"}},[_c('a',{staticClass:"btn btn-danger w-100",attrs:{"href":"#dropdown","role":"button"}},[_v("Left")]),_v(" "),_c('dropdown',{staticClass:"w-100",scopedSlots:_u([{key:"button",fn:function(){return [_c('button',{staticClass:"btn btn-warning dropdown-toggle w-100",attrs:{"type":"button"}},[_v("\n Action\n "),_c('span',{staticClass:"caret"})])]},proxy:true},{key:"dropdown-menu",fn:function(){return [_c('ul',{staticClass:"dropdown-menu"},[_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])]),_v(" "),_c('li',{staticClass:"dropdown-divider",attrs:{"role":"separator"}}),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Separated link")])])])]},proxy:true}])}),_v(" "),_c('a',{staticClass:"btn btn-success w-100",attrs:{"href":"#dropdown","role":"button"}},[_v("Right")])],1)],1)]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(22),_v(" "),_m(23),_v(" "),_c('span',{attrs:{"id":"body"}},[_c('div',[_m(24),_v(" "),_m(25),_v(" "),_m(26),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Enter a search term (eg. 'search bar') to see the search result dropdown.")]),_v(" "),_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback}}),_v(" "),_c('br'),_v(" "),_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search (Right-aligned dropdown)","on-hit":searchCallback,"menu-align-right":""}})],1)],1)]),_v(" "),_m(27),_v(" "),_m(28),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Note: If you are using MarkBind's search functionality, then "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("enableSearch")]),_v(" "),_c('strong',[_v("must be set to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("true")]),_v(" in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")])]),_v(".")]),_v(" "),_c('p',[_v("See: "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#enable-search"}},[_v("User Guide: Site Configuration → enableSearch")]),_v(".")])]),_v(" "),_m(29),_v(" "),_m(30),_v(" "),_c('p')],1),_v(" "),_c('p'),_v(" "),_m(31),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback}})],1)]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(32),_v(" "),_m(33),_v(" "),_m(34),_v(" "),_m(35),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('div',[_c('p',[_v("Note: "),_c('strong',[_v("Navbars")]),_v(" should be placed within a "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#headers"}},[_v("header file")]),_v(" to ensure that they are correctly positioned at the top of the page, above the "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#site-navigation-menus"}},[_v("site navigation")]),_v(" and "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#page-navigation-menus"}},[_v("page navigation")]),_v(" menus.")])])]),_v(" "),_c('div',[_m(36),_v(" "),_m(37),_v(" "),_m(38),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('navbar',{attrs:{"type":"primary"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1),_v(" "),_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1),_v(" "),_c('navbar',{attrs:{"type":"light"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1)],1)],1)]),_v(" "),_m(39),_v(" "),_m(40),_c('box',{attrs:{"type":"tip"}},[_c('p',[_v("If you wish to further customize your navbar beyond the primary, dark, and light theme colors, specify the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"none\"")]),_v(" attribute and "),_c('a',{attrs:{"href":"#inserting-custom-classes-into-components"}},[_v("insert your own custom styles")]),_v(" or "),_c('trigger',{attrs:{"trigger":"click","for":"modal:built-in-bg"}},[_v("use built-in background styles")]),_v(" via the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("add-class")]),_v(" attribute.")],1)]),_v(" "),_c('b-modal',{ref:"modal:built-in-bg",attrs:{"id":"modal:built-in-bg","hide-footer":"","size":"","modal-class":"mb-zoom"},scopedSlots:_u([{key:"modal-title",fn:function(){return [_v("Built-in background styles")]},proxy:true}])},[_v(" "),_c('span',[_v("For instance, Bootstrap supports "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".bg-danger")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bg-info")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bg-primary")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bg-success")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bg-warning")]),_v(" as background colors.")]),_v(" "),_c('span',[_v("In "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{your-site}/_markbind/headers/header.md")]),_v(", you can change "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" to apply Bootstrap background styles.")])]),_v(" "),_m(41),_v(" "),_m(42),_m(43),_v(" "),_m(44),_m(45),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('navbar',{attrs:{"type":"primary"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1),_v(" "),_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1),_v(" "),_c('navbar',{attrs:{"type":"light"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1)],1),_v(" "),_m(46),_v(" "),_m(47),_v(" "),_c('p',[_v("If you are viewing the documentation on a larger device, resize the window to see what it looks like.")]),_v(" "),_c('p',[_v("Alternatively, if you want to display "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("e.g. adding an image to the site nav")]),_v("additional content")]),_v(" in these navigation menus, the navbar is also able to \"pull in\" any "),_c('strong',[_v("container element")]),_v(" with a html "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(" of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"site-nav\"")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"page-nav\"")]),_v(". You may refer to the "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#layouts"}},[_v("layouts")]),_v(" section for an example.")]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_c('p',[_v("The navbar component auto-detects if the MarkBind's navigation components or your element containers has any "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" tags in particular")]),_v("links")]),_v("."),_c('br'),_v("\nIf absent, the navigation buttons to open the menus are "),_c('em',[_v("automatically hidden")]),_v(".")])]),_v(" "),_m(48),_v(" "),_m(49),_v(" "),_m(50),_v(" "),_m(51),_m(52),_m(53),_v(" "),_c('p',[_v("You may also wish to style your navigation content differently on mobile view.\nBy default, MarkBind already provides some reasonable overrides for smaller screens, applied over any styles you might have for the mobile navigation content identified above.")]),_v(" "),_m(54),_m(55),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])],1),_v(" "),_m(56),_c('box',{attrs:{"type":"tip","seamless":""}},[_c('p',[_v("Refer to the "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("layouts")]),_v(" section to find out how to add custom css files to a page!")])])],1),_v(" "),_c('hr'),_v(" "),_c('div',[_m(57),_v(" "),_c('div',{attrs:{"id":"content"}},[_m(58),_v(" "),_c('p',[_v("Steps to add a siteNav:")]),_v(" "),_m(59),_v(" "),_c('div',{attrs:{"id":"short"}},[_c('div',[_m(60),_v(" "),_m(61),_v(" "),_m(62),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")])])])])])])],1)],1)],1)])]),_v(" "),_m(63),_v(" "),_m(64),_v(" "),_c('p',[_v("You can "),_c('strong',[_v("append the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(":expanded:")]),_v(" to a "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("a menu item with sub menu-items")]),_v("parent menu item")]),_v(" to make it expand by default.")]),_v(" In the example above, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("* Docs :expanded:")]),_v(" will make the menu item "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Docs")]),_v(" expand by default.")]),_v(" "),_m(65)]),_v(" "),_c('div',{attrs:{"id":"examples"}})]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(66),_v(" "),_c('div',{attrs:{"id":"content"}},[_m(67),_v(" "),_m(68),_v(" "),_c('ol',[_c('li',[_c('p',[_c('strong',[_v("Specify the smallest heading level you want to be included")]),_v(" within the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" of a page with "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_m(69),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"default\"")])]),_v(" or a "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_m(70),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("heading level")])]),_v(".")]),_v(" "),_c('box',{attrs:{"type":"info","seamless":""}},[_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default")]),_v(" level uses the "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#headingindexinglevel"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("headingIndexingLevel")]),_v(" property")]),_v(" of your site configuration file.")])])],1),_v(" "),_m(71),_v(" "),_m(72),_v(" "),_m(73)]),_v(" "),_c('div',{staticClass:"indented",attrs:{"id":"short"}},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v("\nIn the page that you want to have page navigation, you may show only "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("

        ")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("

        ")]),_v(" headings in the pageNav, and set a custom pageNav title like so:")],1),_v(" "),_m(74),_m(75),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('trigger',{attrs:{"for":"modal:page-nav-example"}},[_v("Example usage of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" component")])],1),_v(" "),_c('b-modal',{ref:"modal:page-nav-example",attrs:{"id":"modal:page-nav-example","hide-footer":"","size":"lg","modal-class":"mb-zoom"},scopedSlots:_u([{key:"modal-title",fn:function(){return [_v("Using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pageNav")]),_v(" variable in a layout")]},proxy:true}])},[_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("head-bottom")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("link")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rel")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"stylesheet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/css/main.css\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("header")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fixed")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dark\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("img")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/images/logo-darkbackground.svg\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("height")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"20\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exact\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("HOME"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--ug\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"sibling-or-child\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/userGuide/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("USER GUIDE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--dg\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"sibling-or-child\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/devGuide/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("DEVELOPER GUIDE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"flex-body\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("nav")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"site-nav\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fixed-header-padding\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"site-nav-top\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"font-weight-bold mb-2\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"font-size: 1.25rem;\"")]),_v(">")]),_v("User Guide"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-component slim-scroll\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("site-nav")]),_v(">")]),_v("\n")]),_c('span',[_v("* [**Getting Started**]({{baseUrl}}/userGuide/gettingStarted.html)\n")]),_c('span',[_v(" * **Authoring Contents** :expanded:\n")]),_c('span',[_v(" * [Overview]({{baseUrl}}/userGuide/authoringContents.html)\n")]),_c('span',[_v(" * [Adding Pages]({{baseUrl}}/userGuide/addingPages.html)\n")]),_c('span',[_v(" * [MarkBind Syntax Overview]({{baseUrl}}/userGuide/markBindSyntaxOverview.html)\n")]),_c('span',[_v(" * [Formatting Contents]({{baseUrl}}/userGuide/formattingContents.html)\n")]),_c('span',[_v(" * [Using Components]({{baseUrl}}/userGuide/usingComponents.html)\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"content-wrapper\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fixed-header-padding\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" {{ content }}\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("nav")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"page-nav\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fixed-header-padding\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-component slim-scroll\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("page-nav")]),_v(" />")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("footer")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text-center\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("[Generated by {{MarkBind}} on {{timestamp}}]"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("This site is powered by "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://www.netlify.com/\"")]),_v(">")]),_v("Netlify"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script-bottom")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"javascript"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" alert("),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'Hi!'")]),_v(")")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" ")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])])],1)]),_v(" "),_m(76),_c('p')]),_v(" "),_c('hr'),_v(" "),_c('br'),_v(" "),_m(77),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})]),_v(" "),_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"},[_c('overlay-source',{staticClass:"nav nav-pills flex-column my-0 small no-flex-wrap",attrs:{"id":"mb-page-nav","tag-name":"nav","to":"mb-page-nav"}},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#navigation-components"}},[_v("Navigation Components‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#dropdowns"}},[_v("Dropdowns‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#search-bars"}},[_v("Search Bars‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#navbars"}},[_v("Navbars‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#site-navigation-menus"}},[_v("Site Navigation Menus‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#page-navigation-menus"}},[_v("Page Navigation Menus‎")])])])],1)])],1),_v(" "),_m(78)])} +}; + var pageVueStaticRenderFns = [function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}},[_v("Navigation Components")])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_c('em',[_v("User Guide → Navigation Components")])])])])} +},function anonymous( +) { +with(this){return _c('h1',{attrs:{"id":"navigation-components"}},[_c('span',{staticClass:"anchor",attrs:{"id":"navigation-components"}}),_v("Navigation Components"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#navigation-components","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p',[_v("The components in this page are used for scaffolding "),_c('strong',[_v("site and page navigation")]),_v(".")])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"dropdowns"}},[_c('span',{staticClass:"anchor",attrs:{"id":"dropdowns"}}),_v("Dropdowns"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#dropdowns","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("While the main use case for dropdowns is under navbars, they can also be used as top-level components.")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*Action*\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Action"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Another action"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Something else here"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"separator\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-divider\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Separated link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"before\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-info\"")]),_v(">")]),_v("Segmented"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Right aligned list\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Something else here"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn-group d-flex mt-3\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"group\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-danger w-100\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(">")]),_v("Left"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"w-100\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-warning dropdown-toggle w-100\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Action\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"caret\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("ul")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-menu\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-menu\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Action"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Another action"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Something else here"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"separator\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-divider\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Separated link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-success w-100\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(">")]),_v("Right"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Dropdowns can also be nested within each other to create multi-level submenus.")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*Multi-Level Dropdown*\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Item"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Another item"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*Submenu*\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Item"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Another item"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_c('strong',[_v("Options")])])])} +},function anonymous( +) { +with(this){return _c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])])} +},function anonymous( +) { +with(this){return _c('tr',[_c('td',[_v("disabled")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether Dropdown can be opened.")])])} +},function anonymous( +) { +with(this){return _c('tr',[_c('td',[_v("menu-align-right")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether the dropdown list will be right-aligned.")])])} +},function anonymous( +) { +with(this){return _c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])])} +},function anonymous( +) { +with(this){return _c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])])} +},function anonymous( +) { +with(this){return _c('tr',[_c('td',[_v("type")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("primary")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("danger")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("info")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("warning")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("success")]),_v(".")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" You may refer to "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/4.0/components/buttons/"}},[_v("this documentation")]),_v(" regarding how you can use the "),_c('strong',[_v("Bootstrap buttons")]),_v(", and how to style them.")])])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Action\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")])]),_v("Action"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")])]),_v("Another action"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"separator\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-divider\"")]),_v(">")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")])]),_v("Separated link"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"search-bars"}},[_c('span',{staticClass:"anchor",attrs:{"id":"search-bars"}}),_v("Search Bars"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#search-bars","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("searchbar")]),_v(" component allows users to search all headings within any page on the site.")])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search (Right-aligned dropdown)\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])]),_c('p',[_v("To use the searchbar within a navbar, add the following markup to your file. The searchbar can be positioned using the slot attribute for the list. The following markup adds a searchbar to the right side of the navbar with appropriate styling.")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_c('strong',[_v("Options")])])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("algolia")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether the searchbar should be connected to "),_c('a',{attrs:{"href":"/userGuide/usingPlugins.html#algolia-enabling-algolia-docsearch"}},[_v("Algolia DocSearch")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("data")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Array")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The local data source for suggestions. Expected to be a primitive array. To use MarkBind's search functionality, set this value to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"searchData\"")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("menu-align-right")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether the search bar's dropdown list will be right-aligned.")])]),_v(" "),_c('tr',[_c('td',[_v("on-hit")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Function")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("A callback function when you click or hit return on an item. To use MarkBind's search functionality, set this value to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"searchCallback\"")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("placeholder")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("The placeholder text shown when no keywords are entered in the search bar.")])])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" Related topic: "),_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("User Guide: Making the Site Searchable")]),_v(".")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" Related topic: "),_c('a',{attrs:{"href":"/userGuide/usingPlugins.html#algolia-enabling-algolia-docsearch"}},[_v("User Guide: Using Plugins → Algolia: Enabling Algolia DocSearch")]),_v(".")])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])]),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"navbars"}},[_c('span',{staticClass:"anchor",attrs:{"id":"navbars"}}),_v("Navbars"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#navbars","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Navbar allows visitors of your website to navigate through pages easily.")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Navbars support link highlighting; link highlighting can be customised by specifying rules.")])])} +},function anonymous( +) { +with(this){return _c('ul',[_c('li',[_v("Define "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default-highlight-on")]),_v(" in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" to specify fallback highlight rules.")]),_v(" "),_c('li',[_v("Define "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("data-highlight")]),_v(" in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" tags with the class "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("nav-link")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("dropdown-item")]),_v(" to specify individual highlight rules.")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Option"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Fork..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dark\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Option"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Fork..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"light\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Option"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Fork..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_c('strong',[_v("Options")])])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("type")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("primary")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("primary")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("dark")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("light")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("none")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("default-highlight-on")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("sibling-or-child")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("sibling-or-child")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("sibling")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("child")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("exact")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("none")]),_v(". Specifies link highlight rules for navbars.")])])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_c('strong',[_v("Navbar Link Highlighting")])])])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("head-bottom")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("link")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rel")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"stylesheet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/css/main.css\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("header")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fixed")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dark\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("img")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/images/logo-darkbackground.svg\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("height")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"20\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exact\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("HOME"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--ug\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"sibling-or-child\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("USER GUIDE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--dg\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"sibling-or-child\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/devGuide/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("DEVELOPER GUIDE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exact\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/showcase.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("SHOWCASE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exact\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/about.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("ABOUT"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("md")]),_v(">")]),_v(":fab-github:"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_c('strong',[_v("Highlight Options")])])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("child")])]),_v(" "),_c('td',[_v("Highlights link if URL in address bar is a child of the link. E.g "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("foo/bar")]),_v(" is a child of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("foo")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("sibling")])]),_v(" "),_c('td',[_v("Highlights link if URL in address bar is a sibling of the link. E.g "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("foo/bar")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("foo/bear")]),_v(" are siblings.")])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("sibling-or-child")])]),_v(" "),_c('td',[_v("Highlights link if URL in address bar is a sibling or child of the link.")])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("exact")])]),_v(" "),_c('td',[_v("Highlights link if URL in address bar exactly matches link.")])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("none")])]),_v(" "),_c('td',[_v("No highlighting.")])])])])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Option"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Fork..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_c('strong',[_v("Mobile page and site navigation menus")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("The navbar component also provides access to MarkBind's "),_c('a',{attrs:{"href":"/userGuide/components/navigation.html#site-navigation-menus"}},[_v("site navigation")]),_v(" and "),_c('a',{attrs:{"href":"/userGuide/components/navigation.html#page-navigation-menus"}},[_v("page navigation")]),_v(" menu "),_c('strong',[_v("components")]),_v(" if used in the page's "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#layouts"}},[_v("layout")]),_v(". No additional setup is required!")])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_c('strong',[_v("Mobile navigation menu button placement")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("If you wish to alter the button placement on the navbar, you may use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" components in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lower-navbar")]),_v(" slot.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("By default, if the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lower-navbar")]),_v(" slot is not specified, the site and page navigation buttons are simply placed as such.")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"lower-navbar\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-menu-container\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("site-nav-button")]),_v(" />")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("page-nav-button")]),_v(" />")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Component")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("page-nav-button")])]),_v(" "),_c('td',[_v("Pulls any element with an identifier, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id=page-nav")]),_v(" into the menu. If no such element exists, it pulls any "),_c('a',{attrs:{"href":"/userGuide/components/navigation.html#page-navigation-menus"}},[_v("page navigation menu")]),_v(" used in the layout.")])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site-nav-button")])]),_v(" "),_c('td',[_v("Pulls any element with an identifier, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id=site-nav")]),_v(" into the menu. If no such element exists, it pulls all "),_c('a',{attrs:{"href":"/userGuide/components/navigation.html#site-navigation-menus"}},[_v("site navigation menu components")]),_v(" used in the layout.")])])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_c('strong',[_v("Styling the mobile page and site navigation menus")])])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Css class attached to the root navigation element")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs css","heading":"Css class attached to the root navigation element"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-selector-class"}},[_v(".mb-mobile-nav")]),_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("display")]),_v(": block "),_c('span',{pre:true,attrs:{"class":"hljs-meta"}},[_v("!important")]),_v(";\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("margin")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("0")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-meta"}},[_v("!important")]),_v(";\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("border")]),_v(": none "),_c('span',{pre:true,attrs:{"class":"hljs-meta"}},[_v("!important")]),_v(";\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("padding")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("10px")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-meta"}},[_v("!important")]),_v(";\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("width")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("100%")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-meta"}},[_v("!important")]),_v(";\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("max-width")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("100%")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-meta"}},[_v("!important")]),_v(";\n")]),_c('span',[_v("}\n")])])])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("If you require greater customisation, you may simply compose the respective selectors with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".mb-mobile-nav")]),_v(" element.")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs css","heading":""}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-selector-id"}},[_v("#site-nav")]),_c('span',{pre:true,attrs:{"class":"hljs-selector-class"}},[_v(".mb-mobile-nav")]),_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("/* Be sure to add the !important css rule when overriding .mb-mobile-nav's properties! */")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("border")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("1px")]),_v(" solid black "),_c('span',{pre:true,attrs:{"class":"hljs-meta"}},[_v("!important")]),_v(";\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("/* For other properties, there is no need. */")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("color")]),_v(": red;\n")]),_c('span',[_v("}\n")])])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"site-navigation-menus"}},[_c('span',{staticClass:"anchor",attrs:{"id":"site-navigation-menus"}}),_v("Site Navigation Menus"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#site-navigation-menus","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("A "),_c('em',[_v("Site Navigation Menu")]),_v(" ("),_c('mark',[_c('em',[_v("siteNav")]),_v(" for short")]),_v(") can be used to show a road map of the main pages of your site.")])])} +},function anonymous( +) { +with(this){return _c('ol',[_c('li',[_v("Format your siteNav as an unordered Markdown list")]),_v(" "),_c('li',[_v("Include it under a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" element.")]),_v(" "),_c('li',[_v("(Optional) To make siteNav accessible on smaller screens, you can use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" component in the "),_c('a',{attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("navbar")]),_v(".")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs"}},[_c('span',[_v("\n")]),_c('span',[_v("* [**Getting Started**](/userGuide/gettingStarted.html)\n")]),_c('span',[_v("* **Authoring Contents** :expanded:\n")]),_c('span',[_v(" * [Overview](/userGuide/authoringContents.html)\n")]),_c('span',[_v(" * [Adding Pages](/userGuide/addingPages.html)\n")]),_c('span',[_v(" * [MarkBind Syntax Overview](/userGuide/markBindSyntaxOverview.html)\n")]),_c('span',[_v(" * [Formatting Contents](/userGuide/formattingContents.html)\n")]),_c('span',[_v(" * [Using Components](/userGuide/usingComponents.html)\n")]),_c('span',[_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("MarkBind has styles nested lists with additional padding and smaller text sizes up to "),_c('strong',[_v("4")]),_v(" nesting levels.\nBeyond that, you'd have to include your own styles.")])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_c('strong',[_v("Expanding menu items by default")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("A parent menu item that is also linked will not be collapsible "),_c('span',{staticClass:"dimmed"},[_v("e.g., the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Search")]),_v(" menu item in the above example")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"page-navigation-menus"}},[_c('span',{staticClass:"anchor",attrs:{"id":"page-navigation-menus"}}),_v("Page Navigation Menus"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#page-navigation-menus","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("A "),_c('em',[_v("Page Navigation Menu")]),_v(" ("),_c('mark',[_c('em',[_v("pageNav")]),_v(" for short")]),_v(") a list of the current page's headings.")]),_v(" Page navigation menus are only available for use in "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#layouts"}},[_v("layouts")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_c('strong',[_v("Adding a pageNav")])])])} +},function anonymous( +) { +with(this){return _c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("The value "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default")]),_v(" will use "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("headingIndexingLevel")]),_v(" within "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("HTML defines six levels of headings, numbered from "),_c('br'),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("1 to 6")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('li',[_c('p',[_c('strong',[_v("(Optional) You may also specify a page navigation title")]),_v(" within "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" that will be placed at the top of the page navigation menu.")])])} +},function anonymous( +) { +with(this){return _c('li',[_c('p',[_c('strong',[_v("Position the page navigation menu")]),_v(" within your layout using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" component.")])])} +},function anonymous( +) { +with(this){return _c('li',[_c('p',[_c('strong',[_v("(Optional) To make pageNav accessible on smaller screens, you can use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" component in the "),_c('a',{attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("navbar")]),_v(".")])])])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" pageNav: 2\n")]),_c('span',[_v(" pageNavTitle: \"Chapters of This Page\"\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("Then, in your "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#layouts"}},[_v("layout file")]),_v(", use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" component to position the pageNav.")])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("You can see an example of a Page Navigation Bar "),_c('mark',[_v("on the right side")]),_v(" of "),_c('a',{attrs:{"target":"_blank","href":"/userGuide/formattingContents.html"}},[_v("this page")]),_v(".\n")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-left"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/components/popups.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Pop-Up Components")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-right"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/components/others.html"}},[_c('span',[_c('span',[_v("Other Components")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} +},function anonymous( +) { +with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 3.1.1")]),_v(" on Sat, 22 Jan 2022, 16:49:34 UTC]")]),_c('br'),_v(" "),_c('small',[_v("This site is powered by "),_c('a',{attrs:{"href":"https://www.netlify.com/"}},[_v("Netlify")]),_v(".")])])])])} +}]; + \ No newline at end of file diff --git a/userGuide/components/others.html b/userGuide/components/others.html new file mode 100644 index 0000000..8cbd74b --- /dev/null +++ b/userGuide/components/others.html @@ -0,0 +1,197 @@ + + + + + + + + MarkBind - User Guide: Other Components + + + + + + + + + + + + + + + + +

        Other Components

        User Guide → Other Components

        Other Components

        This page lists some other components that may be useful in creating education websites. For now, there are only question and quiz components. +

        Questions and Quizzes

        Question and quiz components provide an easy way to test readers on the relevant content topic in the page.

        Introduction

        Question components (<question>) can be one of the following types: MCQ, Checkbox or Text.

        In all cases, content directly inserted in between <question>...</question> will be inserted into the question body.

        You can also insert markdown into the header or hint box, by using the header and hint attributes respectively. Click the hint button below to see how the hint box turns out!

        CODE:

        Header and Hint syntax
        <!-- Insert markdown into the header and hint using the respective attributes -->
+<question type="checkbox" header="Which of the following is correct?" hint="Think out of the box! :fas-box:">
+
+  <!-- Anything you place directly under a question not in a slot is inserted into the question body! -->
+  <small>Adapted from [Daily Mail](https://www.dailymail.co.uk/femail/article-4702868/Can-pass-intelligence-test.html)
+  </small>
+  </pic>
+
+  <!-- Several hidden checkbox q-option components explained later -->
+</question>
+

        OUTPUT:

        Which of the following is correct?

        math question image

        Adapted from Daily Mail

        If you require more expressive formatting for your header or hint markup, you can use the <div slot="header"> and <div slot="hint"> slots. Expand the panel below to see an example!

        Header and Hint example with slots

        Placing the question into the header is entirely optional. You may also wish to include the question directly in the question body, omitting the header entirely.

        Options and Slots common to all question types

        Name Type Default Description
        type String '' The type of question. Supports mcq, checkbox or text.
        header [S] String '' The markup to insert into the question header. The header is omitted if this is not provided.
        hint [S] String '' The content to display in the hint box.

        MCQ and Checkbox Questions

        MCQ and checkbox questions are indicated with the type="mcq" or type="checkbox" attribute.

        In both instances, you can include the possible answers using the <q-option> component, placed anywhere inside the if you wish, you could place it in the header mentioned above as well!question. To indicate the correct option(s), add the <q-option correct> attribute.

        Optionally, you can provide the reason for the particular option using the <q-option reason="..."> attribute, or the <div slot="reason"> slot for more expressive formatting, similar to the hint and header options and slots.

        MCQ Questions

        CODE:

        <question type="mcq" header="Which of these **contradicts** the heuristics recommended when creating test cases with multiple inputs?">
+  <!-- Insert the reason for the option using the reason attribute -->
+  <q-option reason="This is **correct**. We need to figure out if a positive test case works!">
+    Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.
+  </q-option>
+  <q-option>
+    It is ok to combine valid values for different inputs.
+  </q-option>
+  <q-option>
+    No more than one invalid test input should be in a given test case.
+  </q-option>
+  <!-- Use the 'correct' attribute to indicate an option as correct. -->
+  <q-option correct>
+    All invalid test inputs must be tested together.
+    <!-- Optionally, you may use a reason slot instead of a reason attribute. -->
+    <div slot="reason">
+    If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled
+    correctly by the SUT.
+    This is because most SUTs return an error message upon encountering the first invalid input.
+    </div>
+  </q-option>
+  <div slot="hint">
+  How do you figure out which inputs are wrong? (or correct)
+  </div>
+</question>
+

        OUTPUT:

        Which of these contradicts the heuristics recommended when creating test cases with multiple inputs?

        + Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs. +
        + It is ok to combine valid values for different inputs. +
        + No more than one invalid test input should be in a given test case. +
        + All invalid test inputs must be tested together. + +
        MCQ questions can have multiple correct options!

        Checkbox Questions

        CODE:

        <question type="checkbox" hint="Use your calculator! :fas-calculator:">
+
+  ##### Which of the following is true?
+
+  <br>
+  <q-option reason="lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum">
+    1 + 1 = 11
+  </q-option>
+  <q-option reason="Division by zero is **undefined**!">
+    1 / 0 = infinity
+  </q-option>
+  <q-option correct>
+  11 / 11 = 1
+  </q-option>
+</question>
+

        OUTPUT:

        Which of the following is true?

        q-option Options and Slots

        Name Type Default Description
        correct Boolean false Whether this option (placed under either a MCQ or checkbox question) is correct. You may have multiple correct answers in either case.
        reason [S] String '' The explanation markup to display for the option once the answer is checked.

        Text Questions

        Text questions are specified with the type="text" attribute.

        Unlike MCQ and checkbox questions, answer checking is performed by providing keywords to check for in the user's answer through the keywords attribute. +If no keywords are provided, the answer will always be marked as correct when placed in quizzes.

        Keywords are validated by simply looking for the keyword as a pattern in the user's answer! +This works well for some +When does validation work?cases + +When the keywords specified are rather long (eg. requirements), it reduces the chance that this keyword can be mistakenly validated. +

        +In contrast, something short and common like take which can easily be part of another word (eg. mis-take-nly) would be mistakenly validated. +         +and not others.

        You can provide your answer in the answer attribute, or similarly, the <div slot="answer"> slot for more expressive formatting.

        CODE:

        <question type="text" header="Which country did the Hawaiian pizza originate from?"
+          keywords="hawaii" threshold="0.5" answer="It originated from Hawaii!">
+  <div slot="hint">
+
+  Watch some pizza commercials! :tv:
+
+  :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza:
+  </div>
+</question>
+

        OUTPUT:

        Which country did the Hawaiian pizza originate from?

        Since the validation is imperfect, the minimum proportion of keywords that need to be matched can also be changed using the threshold attribute.

        If you don't want to validate the answer at all, you may also omit the keywords attribute entirely. Doing so also always marks the question as correct inside quizzes.

        Text Question specific Options and Slots

        Name Type Default Description
        keywords String '' Comma delimited string of keywords or phrases to match the user's answer against.
        threshold Number 0.5 Minimum proportion of keywords that have to be matched in the user's answer for the answer to be marked as correct.
        answer [S] String '' The answer or explanation to display when the user clicks the check button.

        Deprecation notes

        • The old has-input attributes translate to type="text", but will be deprecated in a future version.
        • <question>s without a type (or an unrecognised one) will always be marked correct when placed in quizzes.

        Quizzes

        You can also build a series of questions out of multiple <question> components.

        Simply place the <question> components you want to include into the <quiz> component! No extra configuration is needed.

        CODE:

        <quiz>
+  <question type="mcq">...</question>
+  <question type="checkbox">...</question>
+  <question type="text">...</question>
+</quiz>
+

        OUTPUT:

        + Click start to begin +

        0 questions

        Quiz Options and Slots

        Name Type Default Description
        intro String '' Quiz intro markup above the question count.
        intro Slot Click start to begin Quiz intro markup. Overrides the intro attribute if both are present.
        MCQ and Checkbox questions
        <!-- use type="checkbox" for checkbox questions -->
+
+<question type="mcq" header="Which of these **contradicts** the heuristics recommended when creating test cases with multiple inputs?">
+  <!-- Insert the reason for the option using the reason attribute -->
+  <q-option reason="This is **correct**. We need to figure out if a positive test case works!">
+    Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.
+  </q-option>
+  <q-option>
+    It is ok to combine valid values for different inputs.
+  </q-option>
+  <q-option>
+    No more than one invalid test input should be in a given test case.
+  </q-option>
+  <!-- Use the 'correct' attribute to indicate an option as correct. -->
+  <q-option correct>
+    All invalid test inputs must be tested together.
+    <!-- Optionally, you may use a reason slot instead of a reason attribute. -->
+    <div slot="reason">
+    If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled
+    correctly by the SUT.
+    This is because most SUTs return an error message upon encountering the first invalid input.
+    </div>
+  </q-option>
+  <div slot="hint">
+  How do you figure out which inputs are wrong? (or correct)
+  </div>
+</question>
+
+
        Text questions
        
+<question type="text" header="Which country did the Hawaiian pizza originate from?"
+          keywords="hawaii" threshold="0.5" answer="It originated from Hawaii!">
+  <div slot="hint">
+
+  Watch some pizza commercials! :tv:
+
+  :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza:
+  </div>
+</question>
+
+
        Quiz
        <quiz>
+  <question type="mcq">...</question>
+  <question type="checkbox">...</question>
+  <question type="text">...</question>
+</quiz>
+

        + Click start to begin +

        0 questions

        Navigation Components

        Advanced Component Usage


        + + + diff --git a/userGuide/components/others.page-vue-render.js b/userGuide/components/others.page-vue-render.js new file mode 100644 index 0000000..1dc8908 --- /dev/null +++ b/userGuide/components/others.page-vue-render.js @@ -0,0 +1,190 @@ + + var pageVueRenderFn = function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',[_c('header',{attrs:{"fixed":""}},[_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/index.html","title":"Home"}},[_c('img',{attrs:{"src":"/images/logo-darkbackground.svg","height":"20"}})])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('form',{staticClass:"navbar-form"},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback,"menu-align-right":""}})],1)])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/index.html"}},[_v("HOME")])]),_v(" "),_c('div',{attrs:{"tags":"environment--ug"}},[_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"sibling-or-child","href":"/userGuide/index.html"}},[_v("USER GUIDE")])])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/showcase.html"}},[_v("SHOWCASE")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/about.html"}},[_v("ABOUT")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_c('span',[_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}})])])])])],1)]),_v(" "),_c('div',{attrs:{"id":"flex-body"}},[_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"site-nav","tag-name":"nav","to":"site-nav"}},[_c('div',{staticClass:"site-nav-top"},[_c('div',{staticClass:"font-weight-bold mb-2",staticStyle:{"font-size":"1.25rem"}},[_v("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tipsAndTricks.html"}},[_v("Tips & Tricks")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/glossary.html"}},[_v("Glossary")])])])])])])],1)],1)]),_v(" "),_c('div',{staticClass:"fixed-header-padding",attrs:{"id":"content-wrapper"}},[_m(0),_v(" "),_m(1),_v(" "),_c('div',[_c('b-modal',{ref:"on-slots",attrs:{"id":"on-slots","hide-footer":"","size":"lg","modal-class":"mb-zoom"},scopedSlots:_u([{key:"modal-title",fn:function(){return [_v("Richer formatting of attributes using slots")]},proxy:true}])},[_v(" "),_c('div',[_c('p',[_v("Most component attributes allow a richer form of formatting using slots, denoted by an attribute"),_c('strong',[_c('sup',[_v("[S]")])]),_v(" superscript in the respective components' tables.\nIn other cases, when the option is of type \"Slot\", only the slot option is available.")]),_v(" "),_c('p',[_v("You can define such a slot within the component by adding a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("slot=\"slot_name\"")]),_v(" attribute to any element within the slot.")]),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])],1),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("expanded")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"card-title\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("i")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("strong")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#FF0000;\"")]),_v(">")]),_v("R"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#FF7F00;\"")]),_v(">")]),_v("A"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#FFFF00;\"")]),_v(">")]),_v("I"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#00FF00;\"")]),_v(">")]),_v("N"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#0000FF;\"")]),_v(">")]),_v("B"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#4B0082;\"")]),_v(">")]),_v("O"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#9400D3;\"")]),_v(">")]),_v("W"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" As shown in this panel, using the header slot\n")]),_c('span',[_v(" allows you to customize the Panel's header using HTML.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',{staticClass:"card-title"},[_c('i',[_c('strong',[_c('span',{staticStyle:{"color":"#FF0000"}},[_v("R")]),_v(" "),_c('span',{staticStyle:{"color":"#FF7F00"}},[_v("A")]),_v(" "),_c('span',{staticStyle:{"color":"#FFFF00"}},[_v("I")]),_v(" "),_c('span',{staticStyle:{"color":"#00FF00"}},[_v("N")]),_v(" "),_c('span',{staticStyle:{"color":"#0000FF"}},[_v("B")]),_v(" "),_c('span',{staticStyle:{"color":"#4B0082"}},[_v("O")]),_v(" "),_c('span',{staticStyle:{"color":"#9400D3"}},[_v("W")])])])])]},proxy:true}])},[_v("\n As shown in this panel, using the header slot\n allows you to customize the Panel's header using HTML.\n")])],1)],1)])])])],1),_v(" "),_m(2),_v(" "),_m(3),_c('p'),_v(" "),_c('div',[_m(4),_v(" "),_c('p',{staticClass:"mt-3"},[_v("Question and quiz components provide an easy way to test readers on the relevant content topic in the page.")]),_v(" "),_m(5),_v(" "),_m(6),_v(" "),_m(7),_v(" "),_m(8),_v(" "),_c('div',[_m(9),_v(" "),_m(10),_v(" "),_m(11),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Think out of the box! "),_c('span',{staticClass:"fas fa-box",attrs:{"aria-hidden":"true"}})])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Which of the following is correct?")])]},proxy:true}])},[_v(" "),_c('pic',{staticClass:"d-block mx-auto",attrs:{"src":"/images/math-question.jpg","alt":"math question image","height":"200"}},[_c('p',[_c('small',[_v("Adapted from "),_c('a',{attrs:{"href":"https://www.dailymail.co.uk/femail/article-4702868/Can-pass-intelligence-test.html"}},[_v("Daily Mail")])])])]),_c('p'),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Multiply the numbers on the left together and add the leftmost number!")])]},proxy:true}])},[_v("\n 96\n ")]),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Under normal circumstances, this would be correct.")])]},proxy:true}])},[_v("\n 19\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Simply add the running sum of the results as well!")])]},proxy:true}])},[_v("\n 40\n ")]),_v(" "),_c('q-option',[_v("\n 811\n ")])],1)],1)],1)]),_v(" "),_m(12),_v(" "),_c('panel',{attrs:{"type":"minimal"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Header and Hint example "),_c('strong',[_v("with slots")])])]},proxy:true}])},[_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Headers and Hints using slots")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html","heading":"Headers and Hints using slots"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"checkbox\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which of the following is true?\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hint")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Think out of the box! :fas-box:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"header\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("Which of the following is correct?"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("Challenge: Try to get all the answers on your first try! ⭐️ ⭐️"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/images/math-question.jpg\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"math question image\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("height")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"200\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"d-block mx-auto\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("Adapted from "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://www.dailymail.co.uk/femail/article-4702868/Can-pass-intelligence-test.html\"")]),_v(">")]),_v("Daily Mail"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("Think out of the box! "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("aria-hidden")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"true\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fas fa-box\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("Need another hint? "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Two of the answers are correct!\"")]),_v(">")]),_v("Hover over me!"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("aria-hidden")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"true\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fas fa-mouse-pointer\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('p',[_v("Which of the following is correct?")]),_v(" "),_c('p',[_v("Challenge: Try to get all the answers on your first try! ⭐️ ⭐️")])])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_c('p',[_v("Think out of the box! "),_c('span',{staticClass:"fas fa-box",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('p',[_v("Need another hint? "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("Two of the answers are correct!")]),_v("Hover over me!")]),_v(" "),_c('span',{staticClass:"fas fa-mouse-pointer",attrs:{"aria-hidden":"true"}})])])]},proxy:true}])},[_v(" "),_c('pic',{staticClass:"d-block mx-auto",attrs:{"src":"/images/math-question.jpg","alt":"math question image","height":"200"}},[_c('p',[_c('small',[_v("Adapted from "),_c('a',{attrs:{"href":"https://www.dailymail.co.uk/femail/article-4702868/Can-pass-intelligence-test.html"}},[_v("Daily Mail")])])])]),_c('p'),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Multiply the numbers on the left together and add the leftmost number!")])]},proxy:true}])},[_v("\n 96\n ")]),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Under normal circumstances, this would be correct.")])]},proxy:true}])},[_v("\n 19\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Simply add the running sum of the results as well!")])]},proxy:true}])},[_v("\n 40\n ")]),_v(" "),_c('q-option',[_v("\n 811\n ")])],1)],1)],1)])]),_v(" "),_c('box',{staticClass:"mt-3",attrs:{"type":"tip","seamless":""}},[_c('p',[_v("Placing the question into the header is entirely optional. You may also wish to include the question directly in the question body, omitting the header entirely.")])]),_v(" "),_m(13),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_m(14),_v(" "),_c('tbody',[_m(15),_v(" "),_c('tr',[_c('td',[_v("header"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_m(16),_v(" "),_m(17),_v(" "),_c('td',[_v("The markup to insert into the question header. The header is omitted if this is not provided.")])]),_v(" "),_c('tr',[_c('td',[_v("hint"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_m(18),_v(" "),_m(19),_v(" "),_c('td',[_v("The content to display in the hint box.")])])])])]),_m(20),_v(" "),_m(21),_v(" "),_c('p',[_v("In both instances, you can include the possible answers using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" component, placed anywhere inside the "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_m(22),_v("question")]),_v(". To indicate the correct option(s), add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" attribute.")]),_v(" "),_m(23),_v(" "),_m(24),_v(" "),_c('div',[_m(25),_v(" "),_m(26),_v(" "),_m(27),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"mcq"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Which of these "),_c('strong',[_v("contradicts")]),_v(" the heuristics recommended when creating test cases with multiple inputs?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_v("\n How do you figure out which inputs are wrong? (or correct)\n ")])]},proxy:true}])},[_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("This is "),_c('strong',[_v("correct")]),_v(". We need to figure out if a positive test case works!")])]},proxy:true}])},[_v("\n Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n ")]),_v(" "),_c('q-option',[_v("\n It is ok to combine valid values for different inputs.\n ")]),_v(" "),_c('q-option',[_v("\n No more than one invalid test input should be in a given test case.\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('div',[_v("\n If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n correctly by the SUT.\n This is because most SUTs return an error message upon encountering the first invalid input.\n ")])]},proxy:true}])},[_v("\n All invalid test inputs must be tested together.\n \n ")])],1)],1)],1)]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_v("MCQ questions can have multiple correct options!")]),_v(" "),_m(28),_v(" "),_c('div',[_m(29),_v(" "),_m(30),_v(" "),_m(31),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Use your calculator! "),_c('span',{staticClass:"fas fa-calculator",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v(" "),_c('h5',{attrs:{"id":"which-of-the-following-is-true"}},[_c('span',{staticClass:"anchor",attrs:{"id":"which-of-the-following-is-true"}}),_v("Which of the following is true?"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#which-of-the-following-is-true","onclick":"event.stopPropagation()"}})]),_v(" "),_c('br'),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum")])]},proxy:true}])},[_v("\n 1 + 1 = 11\n ")]),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Division by zero is "),_c('strong',[_v("undefined")]),_v("!")])]},proxy:true}])},[_v("\n 1 / 0 = infinity\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""}},[_v("\n 11 / 11 = 1\n ")])],1)],1)],1)]),_v(" "),_m(32),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_m(33),_v(" "),_c('tbody',[_m(34),_v(" "),_c('tr',[_c('td',[_v("reason"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_m(35),_v(" "),_m(36),_v(" "),_c('td',[_v("The explanation markup to display for the option once the answer is checked.")])])])])]),_m(37),_v(" "),_m(38),_v(" "),_m(39),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_c('p',[_v("Keywords are validated by simply looking for the keyword as a pattern in the user's answer!\nThis works well for some\n"),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_v("When does validation work?")]),_v("cases\n"),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_c('span',[_v("\nWhen the keywords specified are rather long (eg. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("requirements")]),_v("), it reduces the chance that this keyword can be mistakenly validated.\n"),_c('br'),_c('br'),_v("\nIn contrast, something short and common like "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("take")]),_v(" which can easily be part of another word (eg. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mis-take-nly")]),_v(") would be mistakenly validated.\n")])])]),_v("\nand not others.")])]),_v(" "),_m(40),_v(" "),_c('div',[_m(41),_v(" "),_m(42),_v(" "),_m(43),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"text","keywords":"hawaii","threshold":"0.5"},scopedSlots:_u([{key:"answer",fn:function(){return [_c('p',[_v("It originated from Hawaii!")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Which country did the Hawaiian pizza originate from?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_c('p',[_v("Watch some pizza commercials! 📺")]),_v(" "),_c('p',[_v("🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕")])])]},proxy:true}])})],1)],1)]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_c('p',[_v("Since the validation is imperfect, the minimum proportion of keywords that need to be matched can also be changed using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("threshold")]),_v(" attribute.")]),_v(" "),_c('p',[_v("If you don't want to validate the answer at all, you may also omit the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("keywords")]),_v(" attribute entirely. Doing so also always marks the question as correct inside "),_c('a',{attrs:{"href":"#quizzes"}},[_v("quizzes")]),_v(".")])]),_v(" "),_m(44),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_m(45),_v(" "),_c('tbody',[_m(46),_v(" "),_m(47),_v(" "),_c('tr',[_c('td',[_v("answer"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_m(48),_v(" "),_m(49),_v(" "),_c('td',[_v("The answer or explanation to display when the user clicks the check button.")])])])])]),_c('box',{attrs:{"type":"important"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Deprecation notes")])]},proxy:true}])},[_v(" "),_c('ul',[_c('li',[_v("The old "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("has-input")]),_v(" attributes translate to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"text\"")]),_v(", but will be deprecated in a future version.")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v("s without a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type")]),_v(" (or an unrecognised one) will always be marked correct when placed in quizzes.")])])]),_v(" "),_m(50),_v(" "),_m(51),_v(" "),_m(52),_v(" "),_c('div',[_m(53),_v(" "),_m(54),_v(" "),_m(55),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('quiz',[_c('question',{attrs:{"type":"mcq"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Which of these "),_c('strong',[_v("contradicts")]),_v(" the heuristics recommended when creating test cases with multiple inputs?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_v("\n How do you figure out which inputs are wrong? (or correct)\n ")])]},proxy:true}])},[_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("This is "),_c('strong',[_v("correct")]),_v(". We need to figure out if a positive test case works!")])]},proxy:true}])},[_v("\n Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n ")]),_v(" "),_c('q-option',[_v("\n It is ok to combine valid values for different inputs.\n ")]),_v(" "),_c('q-option',[_v("\n No more than one invalid test input should be in a given test case.\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('div',[_v("\n If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n correctly by the SUT.\n This is because most SUTs return an error message upon encountering the first invalid input.\n ")])]},proxy:true}])},[_v("\n All invalid test inputs must be tested together.\n \n ")])],1),_v(" "),_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Use your calculator! "),_c('span',{staticClass:"fas fa-calculator",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v(" "),_c('h5',{attrs:{"id":"which-of-the-following-is-true-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"which-of-the-following-is-true-2"}}),_v("Which of the following is true?"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#which-of-the-following-is-true-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('br'),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum")])]},proxy:true}])},[_v("\n 1 + 1 = 11\n ")]),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Division by zero is "),_c('strong',[_v("undefined")]),_v("!")])]},proxy:true}])},[_v("\n 1 / 0 = infinity\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""}},[_v("\n 11 / 11 = 1\n ")])],1),_v(" "),_c('question',{attrs:{"type":"text","keywords":"hawaii","threshold":"0.5"},scopedSlots:_u([{key:"answer",fn:function(){return [_c('p',[_v("It originated from Hawaii!")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Which country did the Hawaiian pizza originate from?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_c('p',[_v("Watch some pizza commercials! 📺")]),_v(" "),_c('p',[_v("🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕")])])]},proxy:true}])})],1)],1)],1)]),_v(" "),_c('br'),_v(" "),_m(56),_v(" "),_m(57),_v(" "),_m(58),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('div',[_c('quiz',[_c('question',{attrs:{"type":"mcq"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Which of these "),_c('strong',[_v("contradicts")]),_v(" the heuristics recommended when creating test cases with multiple inputs?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_v("\n How do you figure out which inputs are wrong? (or correct)\n ")])]},proxy:true}])},[_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("This is "),_c('strong',[_v("correct")]),_v(". We need to figure out if a positive test case works!")])]},proxy:true}])},[_v("\n Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n ")]),_v(" "),_c('q-option',[_v("\n It is ok to combine valid values for different inputs.\n ")]),_v(" "),_c('q-option',[_v("\n No more than one invalid test input should be in a given test case.\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('div',[_v("\n If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n correctly by the SUT.\n This is because most SUTs return an error message upon encountering the first invalid input.\n ")])]},proxy:true}])},[_v("\n All invalid test inputs must be tested together.\n \n ")])],1),_v(" "),_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Use your calculator! "),_c('span',{staticClass:"fas fa-calculator",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v("\n\n ##### Which of the following is true?\n\n "),_c('br'),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum")])]},proxy:true}])},[_v("\n 1 + 1 = 11\n ")]),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Division by zero is "),_c('strong',[_v("undefined")]),_v("!")])]},proxy:true}])},[_v("\n 1 / 0 = infinity\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""}},[_v("\n 11 / 11 = 1\n ")])],1),_v(" "),_c('question',{attrs:{"type":"text","keywords":"hawaii","threshold":"0.5"},scopedSlots:_u([{key:"answer",fn:function(){return [_c('p',[_v("It originated from Hawaii!")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Which country did the Hawaiian pizza originate from?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_v("\n\n Watch some pizza commercials! :tv:\n\n :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza:\n ")])]},proxy:true}])})],1)],1)])],1),_v(" "),_c('hr'),_v(" "),_c('br'),_v(" "),_m(59),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})]),_v(" "),_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"},[_c('overlay-source',{staticClass:"nav nav-pills flex-column my-0 small no-flex-wrap",attrs:{"id":"mb-page-nav","tag-name":"nav","to":"mb-page-nav"}},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#other-components"}},[_v("Other Components‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#questions-and-quizzes"}},[_v("Questions and Quizzes‎")])])])],1)])],1),_v(" "),_m(60)])} +}; + var pageVueStaticRenderFns = [function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}},[_v("Other Components")])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_c('em',[_v("User Guide → Other Components")])])])])} +},function anonymous( +) { +with(this){return _c('h1',{attrs:{"id":"other-components"}},[_c('span',{staticClass:"anchor",attrs:{"id":"other-components"}}),_v("Other Components"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#other-components","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p',[_v("This page lists some other components that may be useful in creating education websites. For now, there are only question and quiz components.\n")])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"questions-and-quizzes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"questions-and-quizzes"}}),_v("Questions and Quizzes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#questions-and-quizzes","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"introduction"}},[_c('span',{staticClass:"anchor",attrs:{"id":"introduction"}}),_v("Introduction"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#introduction","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("Question components ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(") can be one of the following types: "),_c('strong',[_v("MCQ")]),_v(", "),_c('strong',[_v("Checkbox")]),_v(" or "),_c('strong',[_v("Text")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('p',[_v("In all cases, content directly inserted in between "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("...")]),_v(" will be inserted into the "),_c('strong',[_v("question body")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('p',[_v("You can also insert markdown into the "),_c('strong',[_v("header")]),_v(" or "),_c('strong',[_v("hint box")]),_v(", by using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("header")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hint")]),_v(" attributes respectively. Click the hint button below to see how the hint box turns out!")])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Header and Hint syntax")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html","heading":"Header and Hint syntax"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"checkbox\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which of the following is correct?\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hint")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Think out of the box! :fas-box:\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("Adapted from [Daily Mail](https://www.dailymail.co.uk/femail/article-4702868/Can-pass-intelligence-test.html)\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("If you require more expressive formatting for your header or hint markup, you can use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("
        ")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("
        ")]),_v(" slots. Expand the panel below to see an example!")])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_c('strong',[_v("Options and Slots common to all question types")])])])} +},function anonymous( +) { +with(this){return _c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])])} +},function anonymous( +) { +with(this){return _c('tr',[_c('td',[_v("type")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("The type of question. Supports "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mcq")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("checkbox")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("text")]),_v(".")])])} +},function anonymous( +) { +with(this){return _c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])])} +},function anonymous( +) { +with(this){return _c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])])} +},function anonymous( +) { +with(this){return _c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])])} +},function anonymous( +) { +with(this){return _c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])])} +},function anonymous( +) { +with(this){return _c('h4',{staticClass:"mt-4 mb-3",attrs:{"id":"mcq-and-checkbox-questions"}},[_c('span',{staticClass:"anchor",attrs:{"id":"mcq-and-checkbox-questions"}}),_v("MCQ and Checkbox Questions"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#mcq-and-checkbox-questions","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("MCQ and checkbox questions are indicated with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"mcq\"")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"checkbox\"")]),_v(" attribute.")])} +},function anonymous( +) { +with(this){return _c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("if you wish, you could place it in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("header")]),_v(" mentioned above as well!")])} +},function anonymous( +) { +with(this){return _c('p',[_v("Optionally, you can provide the reason for the particular option using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" attribute, or the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("
        ")]),_v(" slot for more expressive formatting, similar to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hint")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("header")]),_v(" options and slots.")])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("MCQ Questions")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"mcq\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which of these **contradicts** the heuristics recommended when creating test cases with multiple inputs?\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This is **correct**. We need to figure out if a positive test case works!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" It is ok to combine valid values for different inputs.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" No more than one invalid test input should be in a given test case.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("correct")]),_v(">")]),_v("\n")]),_c('span',[_v(" All invalid test inputs must be tested together.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"reason\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n")]),_c('span',[_v(" correctly by the SUT.\n")]),_c('span',[_v(" This is because most SUTs return an error message upon encountering the first invalid input.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" How do you figure out which inputs are wrong? (or correct)\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Checkbox Questions")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"checkbox\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hint")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Use your calculator! :fas-calculator:\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" ##### Which of the following is true?\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" 1 + 1 = 11\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Division by zero is **undefined**!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" 1 / 0 = infinity\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("correct")]),_v(">")]),_v("\n")]),_c('span',[_v(" 11 / 11 = 1\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("q-option")]),_v(" Options and Slots")])])])} +},function anonymous( +) { +with(this){return _c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])])} +},function anonymous( +) { +with(this){return _c('tr',[_c('td',[_v("correct")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether this option (placed under either a MCQ or checkbox question) is correct. You may have multiple correct answers in either case.")])])} +},function anonymous( +) { +with(this){return _c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])])} +},function anonymous( +) { +with(this){return _c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])])} +},function anonymous( +) { +with(this){return _c('h4',{staticClass:"mt-4 mb-3",attrs:{"id":"text-questions"}},[_c('span',{staticClass:"anchor",attrs:{"id":"text-questions"}}),_v("Text Questions"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#text-questions","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("Text questions are specified with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"text\"")]),_v(" attribute.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("Unlike MCQ and checkbox questions, answer checking is performed by providing keywords to check for in the user's answer through the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("keywords")]),_v(" attribute.\nIf no keywords are provided, the answer will always be marked as correct when placed in quizzes.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("You can provide your answer in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("answer")]),_v(" attribute, or similarly, the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("
        ")]),_v(" slot for more expressive formatting.")])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which country did the Hawaiian pizza originate from?\"")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hawaii\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("threshold")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"0.5\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("answer")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"It originated from Hawaii!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" Watch some pizza commercials! :tv:\n")]),_c('span',[_v("\n")]),_c('span',[_v(" :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza:\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_c('strong',[_v("Text Question specific Options and Slots")])])])} +},function anonymous( +) { +with(this){return _c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])])} +},function anonymous( +) { +with(this){return _c('tr',[_c('td',[_v("keywords")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Comma delimited string of keywords or phrases to match the user's answer against.")])])} +},function anonymous( +) { +with(this){return _c('tr',[_c('td',[_v("threshold")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Number")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0.5")])]),_v(" "),_c('td',[_v("Minimum proportion of keywords that have to be matched in the user's answer for the answer to be marked as correct.")])])} +},function anonymous( +) { +with(this){return _c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])])} +},function anonymous( +) { +with(this){return _c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"quizzes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"quizzes"}}),_v("Quizzes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#quizzes","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("You can also build a series of questions out of multiple "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" components.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("Simply place the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" components you want to include into the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" component! No extra configuration is needed.")])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("quiz")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"mcq\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"checkbox\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_c('strong',[_v("Quiz Options and Slots")])])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("intro")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Quiz intro markup above the question count.")])]),_v(" "),_c('tr',[_c('td',[_v("intro")]),_v(" "),_c('td',[_v("Slot")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Click start to begin")])]),_v(" "),_c('td',[_v("Quiz intro markup. Overrides the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("intro")]),_v(" attribute if both are present.")])])])])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("MCQ and Checkbox questions")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"MCQ and Checkbox questions","class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"mcq\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which of these **contradicts** the heuristics recommended when creating test cases with multiple inputs?\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This is **correct**. We need to figure out if a positive test case works!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" It is ok to combine valid values for different inputs.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" No more than one invalid test input should be in a given test case.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("correct")]),_v(">")]),_v("\n")]),_c('span',[_v(" All invalid test inputs must be tested together.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"reason\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n")]),_c('span',[_v(" correctly by the SUT.\n")]),_c('span',[_v(" This is because most SUTs return an error message upon encountering the first invalid input.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" How do you figure out which inputs are wrong? (or correct)\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")])])])])]),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Text questions")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Text questions","class":"hljs html"}},[_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which country did the Hawaiian pizza originate from?\"")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hawaii\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("threshold")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"0.5\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("answer")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"It originated from Hawaii!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" Watch some pizza commercials! :tv:\n")]),_c('span',[_v("\n")]),_c('span',[_v(" :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza:\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")])])])])]),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Quiz")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Quiz","class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("quiz")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"mcq\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"checkbox\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-left"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/components/navigation.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Navigation Components")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-right"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/components/advanced.html"}},[_c('span',[_c('span',[_v("Advanced Component Usage")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} +},function anonymous( +) { +with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 3.1.1")]),_v(" on Sat, 22 Jan 2022, 16:49:34 UTC]")]),_c('br'),_v(" "),_c('small',[_v("This site is powered by "),_c('a',{attrs:{"href":"https://www.netlify.com/"}},[_v("Netlify")]),_v(".")])])])])} +}]; + \ No newline at end of file diff --git a/userGuide/components/popups.html b/userGuide/components/popups.html new file mode 100644 index 0000000..78d92ac --- /dev/null +++ b/userGuide/components/popups.html @@ -0,0 +1,175 @@ + + + + + + + + MarkBind - User Guide: Pop-Up Components + + + + + + + + + + + + + + + + +

        Pop-Up Components

        User Guide → Pop-Up Components

        Pop-Up Components

        The components in this page can be used to easily create various forms of pop-ups that are activated on some user action (e.g., hovering over some text). This may be useful for showing additional information related to some specific area or span of content. +

        Tooltips

        CODE:

        <tooltip content="Lorem ipsum dolor sit amet" placement="top">
+  <button class="btn btn-secondary">Popover on top</button>
+</tooltip>
+<tooltip content="Lorem ipsum dolor sit amet" placement="left">
+  <button class="btn btn-secondary">Popover on left</button>
+</tooltip>
+<tooltip content="Lorem ipsum dolor sit amet" placement="right">
+  <button class="btn btn-secondary">Popover on right</button>
+</tooltip>
+<tooltip content="Lorem ipsum dolor sit amet" placement="bottom">
+  <button class="btn btn-secondary">Popover on bottom</button>
+</tooltip>
+<hr />
+Trigger
+<p>
+  <tooltip content="Lorem ipsum dolor sit amet" placement="top" trigger="click">
+    <button class="btn btn-secondary">Click</button>
+  </tooltip>
+  <br />
+  <br />
+  <tooltip content="Lorem ipsum dolor sit amet" placement="top" trigger="focus">
+    <input placeholder="Focus"></input>
+  </tooltip>
+</p>
+
+**Markdown**:
+<tooltip content="*Hello* **World**">
+  <a href="">Hover me</a>
+</tooltip>
+<br />
+
+**Free Text**:
+<tooltip content="coupling is the degree of interdependence between software modules; a measure of how closely connected two routines or modules are; the strength of the relationships between modules."><i>coupling</i></tooltip>
+

        OUTPUT:

        Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
        +Trigger +

        Lorem ipsum dolor sit amet

        Lorem ipsum dolor sit amet

        Markdown: +Hello World Hover me

        Free Text: +coupling is the degree of interdependence between software modules; a measure of how closely connected two routines or modules are; the strength of the relationships between modules.coupling

        Using trigger for Tooltip:

        CODE:

        More about <trigger for="tt:trigger_id">trigger</trigger>.
+<tooltip id="tt:trigger_id" content="This tooltip triggered by a trigger"></tooltip>
+<br>
+This is the same <trigger for="tt:trigger_id">trigger</trigger> as last one.
+

        OUTPUT:

        More about trigger. +This tooltip triggered by a trigger
        +This is the same trigger as last one.

        More about triggers

        Options

        Name Type Default Description
        trigger String hover How the tooltip is triggered.
        Supports: click, focus, hover.
        content String '' Text content of the tooltip.
        placement String top How to position the tooltip.
        Supports: top, left, right, bottom.
        Hover <tooltip content="An explanation, **supports simple Markdown**">here</tooltip> to see a tooltip.
+

        Hover An explanation, supports simple Markdownhere to see a tooltip. +

        Popovers

        CODE:

        <popover effect="fade" content="Lorem ipsum dolor sit amet" placement="top">
+  <button class="btn btn-secondary">Popover on top</button>
+</popover>
+<popover effect="fade" content="Lorem ipsum dolor sit amet" placement="left">
+  <button class="btn btn-secondary">Popover on left</button>
+</popover>
+<popover effect="fade" content="Lorem ipsum dolor sit amet" placement="right">
+  <button class="btn btn-secondary">Popover on right</button>
+</popover>
+<popover effect="fade" content="Lorem ipsum dolor sit amet" placement="bottom">
+  <button class="btn btn-secondary">Popover on bottom</button>
+</popover>
+<hr>
+<h4 class="no-index">Header</h4>
+<popover effect="fade" header="Header" content="Lorem ipsum dolor sit amet" placement="top">
+  <button class="btn btn-secondary">Popover on top</button>
+</popover>
+<popover effect="fade" header="Header" content="Lorem ipsum dolor sit amet" placement="left">
+  <button class="btn btn-secondary">Popover on left</button>
+</popover>
+<popover effect="fade" header="Header" content="Lorem ipsum dolor sit amet" placement="right">
+  <button class="btn btn-secondary">Popover on right</button>
+</popover>
+<popover effect="fade" header="Header" content="Lorem ipsum dolor sit amet" placement="bottom">
+  <button class="btn btn-secondary">Popover on bottom</button>
+</popover>
+<hr />
+<h4 class="no-index">Trigger</h4>
+<p>
+  <popover effect="scale" header="Header" content="Lorem ipsum dolor sit amet" placement="top" trigger="hover">
+    <button class="btn btn-secondary">Mouseenter</button>
+  </popover>
+</p>
+<h4 class="no-index">Markdown</h4>
+<p>
+  <popover effect="scale" header="**Emoji header** :rocket:" content="!!emoji!! content :cat:">
+    <button class="btn btn-secondary">Hover</button>
+  </popover>
+</p>
+<h4 class="no-index">Content using slot</h4>
+<popover effect="scale" header="**Emoji header** :rocket:">
+  <div slot="content">
+    This is a long content...
+  </div>
+  <button class="btn btn-secondary">Hover</button>
+</popover>
+<br />
+<br />
+<h4 class="no-index">Wrap Text</h4>
+<popover header="false" content="Nice!">What do you say</popover>
+

        OUTPUT:

        Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
        HeaderLorem ipsum dolor sit amet HeaderLorem ipsum dolor sit amet HeaderLorem ipsum dolor sit amet HeaderLorem ipsum dolor sit amet

        Trigger

        HeaderLorem ipsum dolor sit amet

        Markdown

        Emoji header 🚀emoji content 🐱

        Content using slot

        Emoji header 🚀
        + This is a long content... +


        Wrap Text

        falseNice!What do you say

        Using trigger for Popover:

        CODE:

        More about <trigger for="pop:trigger_id">trigger</trigger>.
+<popover id="pop:trigger_id" content="This popover is triggered by a trigger"></popover>
+<br>
+This is the same <trigger for="pop:trigger_id">trigger</trigger> as last one.
+

        OUTPUT:

        More about trigger. +This popover is triggered by a trigger
        +This is the same trigger as last one.

        More about triggers

        Options

        Name Type Default Description
        trigger String hover How the Popover is triggered.
        Supports: click, focus, hover.
        header String '' Popover header, supports inline markdown text.
        content String '' Popover content, supports inline markdown text.
        placement String top How to position the Popover.
        Supports: top, left, right, bottom.
        Hover over the <trigger for="pop:context-target">keyword</trigger> to see the popover.
+
+<popover id="pop:context-target" header="Popover header" placement="top">
+<div slot="content">
+
+description :+1:
+
+</div>
+</popover>
+

        Hover over the keyword to see the popover.

        Popover header

        description 👍

        Modals

        Modals are to be used together with the Trigger component for activation.

        CODE:

        More about <trigger for="modal:loremipsum">trigger</trigger>.
+<modal header="**Modal header** :rocket:" id="modal:loremipsum">
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+  magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</modal>
+<br>
+This is the same <trigger for="modal:loremipsum">trigger</trigger> as last one.
+
+<trigger for="modal:centered">This is a trigger for a centered modal</trigger>.
+
+<modal header="**Centered** :rocket:" id="modal:centered" center>
+  Centered
+</modal>
+
+<trigger for="modal:ok-text">This is a trigger for a modal with a custom OK button</trigger>.
+
+<modal header="OK button visible!" id="modal:ok-text" ok-text="Custom OK">
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+  magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</modal>
+

        OUTPUT:

        More about trigger.


        +This is the same trigger as last one. +

        This is a trigger for a centered modal.

        This is a trigger for a modal with a custom OK button.

        More about triggers

        Options

        Name type Default Description
        header [S] String '' Header of the Modal component. Supports inline markdown text.
        footer
        modal-footer
        (deprecated)        		 Slot empty Specifying this will override the ok-text attribute, and the OK button will not render.
        ok-text String '' Text for the OK button.
        effect String zoom Supports: zoom, fade.
        id String Used by Trigger to activate the Modal by id.large
        small Boolean false Creates a small Modal.
        large Boolean false Creates a large Modal.
        center Boolean false Vertically centers the modal (in addition to the horizontal centering by default).
        backdrop Boolean true Enables closing the Modal by clicking on the backdrop.
        Click <trigger trigger="click" for="modal:unused">here</trigger> to open a modal.
+<modal header="Modal header" id="modal:unused">
+    Modal content
+</modal>
+

        Hover here to open a modal.


        Image & Diagram Components

        Navigation Components


        + + + diff --git a/userGuide/components/popups.page-vue-render.js b/userGuide/components/popups.page-vue-render.js new file mode 100644 index 0000000..c3f06f0 --- /dev/null +++ b/userGuide/components/popups.page-vue-render.js @@ -0,0 +1,154 @@ + + var pageVueRenderFn = function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',[_c('header',{attrs:{"fixed":""}},[_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/index.html","title":"Home"}},[_c('img',{attrs:{"src":"/images/logo-darkbackground.svg","height":"20"}})])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('form',{staticClass:"navbar-form"},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback,"menu-align-right":""}})],1)])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/index.html"}},[_v("HOME")])]),_v(" "),_c('div',{attrs:{"tags":"environment--ug"}},[_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"sibling-or-child","href":"/userGuide/index.html"}},[_v("USER GUIDE")])])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/showcase.html"}},[_v("SHOWCASE")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/about.html"}},[_v("ABOUT")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_c('span',[_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}})])])])])],1)]),_v(" "),_c('div',{attrs:{"id":"flex-body"}},[_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"site-nav","tag-name":"nav","to":"site-nav"}},[_c('div',{staticClass:"site-nav-top"},[_c('div',{staticClass:"font-weight-bold mb-2",staticStyle:{"font-size":"1.25rem"}},[_v("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tipsAndTricks.html"}},[_v("Tips & Tricks")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/glossary.html"}},[_v("Glossary")])])])])])])],1)],1)]),_v(" "),_c('div',{staticClass:"fixed-header-padding",attrs:{"id":"content-wrapper"}},[_m(0),_v(" "),_m(1),_v(" "),_c('div',[_c('b-modal',{ref:"on-slots",attrs:{"id":"on-slots","hide-footer":"","size":"lg","modal-class":"mb-zoom"},scopedSlots:_u([{key:"modal-title",fn:function(){return [_v("Richer formatting of attributes using slots")]},proxy:true}])},[_v(" "),_c('div',[_c('p',[_v("Most component attributes allow a richer form of formatting using slots, denoted by an attribute"),_c('strong',[_c('sup',[_v("[S]")])]),_v(" superscript in the respective components' tables.\nIn other cases, when the option is of type \"Slot\", only the slot option is available.")]),_v(" "),_c('p',[_v("You can define such a slot within the component by adding a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("slot=\"slot_name\"")]),_v(" attribute to any element within the slot.")]),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])],1),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("expanded")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"card-title\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("i")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("strong")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#FF0000;\"")]),_v(">")]),_v("R"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#FF7F00;\"")]),_v(">")]),_v("A"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#FFFF00;\"")]),_v(">")]),_v("I"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#00FF00;\"")]),_v(">")]),_v("N"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#0000FF;\"")]),_v(">")]),_v("B"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#4B0082;\"")]),_v(">")]),_v("O"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:#9400D3;\"")]),_v(">")]),_v("W"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" As shown in this panel, using the header slot\n")]),_c('span',[_v(" allows you to customize the Panel's header using HTML.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',{staticClass:"card-title"},[_c('i',[_c('strong',[_c('span',{staticStyle:{"color":"#FF0000"}},[_v("R")]),_v(" "),_c('span',{staticStyle:{"color":"#FF7F00"}},[_v("A")]),_v(" "),_c('span',{staticStyle:{"color":"#FFFF00"}},[_v("I")]),_v(" "),_c('span',{staticStyle:{"color":"#00FF00"}},[_v("N")]),_v(" "),_c('span',{staticStyle:{"color":"#0000FF"}},[_v("B")]),_v(" "),_c('span',{staticStyle:{"color":"#4B0082"}},[_v("O")]),_v(" "),_c('span',{staticStyle:{"color":"#9400D3"}},[_v("W")])])])])]},proxy:true}])},[_v("\n As shown in this panel, using the header slot\n allows you to customize the Panel's header using HTML.\n")])],1)],1)])])])],1),_v(" "),_m(2),_v(" "),_m(3),_c('p'),_v(" "),_c('div',[_m(4),_v(" "),_c('div',[_m(5),_v(" "),_m(6),_v(" "),_m(7),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"placement":"top","data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on top")])]),_v(" "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.left.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"left":true,"html":true}}],staticClass:"trigger",attrs:{"placement":"left","data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on left")])]),_v(" "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.right.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"right":true,"html":true}}],staticClass:"trigger",attrs:{"placement":"right","data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on right")])]),_v(" "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.bottom.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"bottom":true,"html":true}}],staticClass:"trigger",attrs:{"placement":"bottom","data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on bottom")])]),_v(" "),_c('hr'),_v("\nTrigger\n"),_c('p',[_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.click.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"click":true,"top":true,"html":true}}],staticClass:"trigger-click",attrs:{"placement":"top","trigger":"click","data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Click")])]),_v(" "),_c('br'),_v(" "),_c('br'),_v(" "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.focus.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"focus":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"placement":"top","trigger":"focus","data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('input',{attrs:{"placeholder":"Focus"}})])]),_v(" "),_c('p',[_c('strong',[_v("Markdown")]),_v(":\n"),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_c('em',[_v("Hello")]),_v(" "),_c('strong',[_v("World")])]),_v(" "),_c('a',{attrs:{"href":""}},[_v("Hover me")])]),_v(" "),_c('br')]),_v(" "),_c('p',[_c('strong',[_v("Free Text")]),_v(":\n"),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("coupling is the degree of interdependence between software modules; a measure of how closely connected two routines or modules are; the strength of the relationships between modules.")]),_c('i',[_v("coupling")])])])])],1)]),_v(" "),_m(8),_v(" "),_c('div',[_m(9),_v(" "),_m(10),_v(" "),_m(11),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("More about "),_c('trigger',{attrs:{"for":"tt:trigger_id"}},[_v("trigger")]),_v(".\n"),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"id":"tt:trigger_id","data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("This tooltip triggered by a trigger")])]),_v(" "),_c('br'),_v("\nThis is the same "),_c('trigger',{attrs:{"for":"tt:trigger_id"}},[_v("trigger")]),_v(" as last one.")],1)])],1)]),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("More about triggers")])]},proxy:true}])},[_v(" "),_c('div',[_c('p',[_c('strong',[_c('strong',[_v("Triggers")])])]),_v(" "),_c('p',[_v("Trigger provides more flexibility in triggering contextual overlay via Tooltip, Popover or Modal.")]),_v(" "),_c('p',[_v("You could embed a Trigger within the text, and define the Tooltip, Popover or Modal at a separate location, which allows for a cleaner authoring flow.")]),_v(" "),_c('p',[_v("Specify the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(" attribute on the Tooltip, Popover or Modal component, and use the same "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(" in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("for")]),_v(" attribute of the Trigger to allow the Trigger to invoke the specific overlay elements.\nAdditionally, multiple Triggers could share the same overlay by providing them with the same "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(".\n"),_c('br')]),_v(" "),_c('p',[_c('strong',[_v("Trigger's "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("trigger")]),_v(" attribute (which defaults to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")]),_v(") is independent of the target's.")])]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("trigger")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")])]),_v(" "),_c('td',[_v("How the overlay view is triggered."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("click")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("focus")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("for")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("The id for the overlay view to be shown.")])]),_v(" "),_c('tr',[_c('td',[_v("placement")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("auto")])]),_v(" "),_c('td',[_v("How to position the Popover or Tooltip."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("auto")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("top")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("left")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("right")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bottom")]),_v(".")])])])])])])]),_c('p'),_v(" "),_m(12),_v(" "),_m(13),_m(14),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("Hover "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_m(15),_v("here")]),_v(" to see a tooltip.\n")])]),_c('p')],1),_v(" "),_c('hr'),_v(" "),_c('div',[_m(16),_v(" "),_c('div',[_m(17),_v(" "),_m(18),_v(" "),_m(19),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"fade","placement":"top","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on top")])]),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.left.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"left":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"fade","placement":"left","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on left")])]),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.right.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"right":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"fade","placement":"right","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on right")])]),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.bottom.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"bottom":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"fade","placement":"bottom","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on bottom")])]),_v(" "),_c('hr'),_v(" "),_c('h4',{staticClass:"no-index",attrs:{"id":"header"}},[_c('span',{staticClass:"anchor",attrs:{"id":"header"}}),_v("Header"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#header","onclick":"event.stopPropagation()"}})]),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"fade","placement":"top","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_v("Header")]),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on top")])]),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.left.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"left":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"fade","placement":"left","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_v("Header")]),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on left")])]),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.right.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"right":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"fade","placement":"right","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_v("Header")]),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on right")])]),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.bottom.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"bottom":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"fade","placement":"bottom","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_v("Header")]),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on bottom")])]),_v(" "),_c('hr'),_v(" "),_c('h4',{staticClass:"no-index",attrs:{"id":"trigger"}},[_c('span',{staticClass:"anchor",attrs:{"id":"trigger"}}),_v("Trigger"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#trigger","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"scale","placement":"top","trigger":"hover","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_v("Header")]),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Mouseenter")])])]),_v(" "),_c('h4',{staticClass:"no-index",attrs:{"id":"markdown"}},[_c('span',{staticClass:"anchor",attrs:{"id":"markdown"}}),_v("Markdown"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#markdown","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"scale","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_c('strong',[_v("Emoji header")]),_v(" 🚀")]),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_c('span',{staticClass:"underline"},[_v("emoji")]),_v(" content 🐱")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Hover")])])]),_v(" "),_c('h4',{staticClass:"no-index",attrs:{"id":"content-using-slot"}},[_c('span',{staticClass:"anchor",attrs:{"id":"content-using-slot"}}),_v("Content using slot"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#content-using-slot","onclick":"event.stopPropagation()"}})]),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"scale","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_c('strong',[_v("Emoji header")]),_v(" 🚀")]),_v(" "),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_c('div',[_v("\n This is a long content...\n ")])]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Hover")])]),_v(" "),_c('br'),_v(" "),_c('br'),_v(" "),_c('h4',{staticClass:"no-index",attrs:{"id":"wrap-text"}},[_c('span',{staticClass:"anchor",attrs:{"id":"wrap-text"}}),_v("Wrap Text"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#wrap-text","onclick":"event.stopPropagation()"}})]),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_v("false")]),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Nice!")]),_v("What do you say")])])],1)]),_v(" "),_m(20),_v(" "),_c('div',[_m(21),_v(" "),_m(22),_v(" "),_m(23),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("More about "),_c('trigger',{attrs:{"for":"pop:trigger_id"}},[_v("trigger")]),_v(".\n"),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"id":"pop:trigger_id","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("This popover is triggered by a trigger")])]),_v(" "),_c('br'),_v("\nThis is the same "),_c('trigger',{attrs:{"for":"pop:trigger_id"}},[_v("trigger")]),_v(" as last one.")],1)])],1)]),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("More about triggers")])]},proxy:true}])},[_v(" "),_c('div',[_c('p',[_c('strong',[_c('strong',[_v("Triggers")])])]),_v(" "),_c('p',[_v("Trigger provides more flexibility in triggering contextual overlay via Tooltip, Popover or Modal.")]),_v(" "),_c('p',[_v("You could embed a Trigger within the text, and define the Tooltip, Popover or Modal at a separate location, which allows for a cleaner authoring flow.")]),_v(" "),_c('p',[_v("Specify the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(" attribute on the Tooltip, Popover or Modal component, and use the same "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(" in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("for")]),_v(" attribute of the Trigger to allow the Trigger to invoke the specific overlay elements.\nAdditionally, multiple Triggers could share the same overlay by providing them with the same "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(".\n"),_c('br')]),_v(" "),_c('p',[_c('strong',[_v("Trigger's "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("trigger")]),_v(" attribute (which defaults to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")]),_v(") is independent of the target's.")])]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("trigger")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")])]),_v(" "),_c('td',[_v("How the overlay view is triggered."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("click")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("focus")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("for")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("The id for the overlay view to be shown.")])]),_v(" "),_c('tr',[_c('td',[_v("placement")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("auto")])]),_v(" "),_c('td',[_v("How to position the Popover or Tooltip."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("auto")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("top")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("left")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("right")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bottom")]),_v(".")])])])])])])]),_c('p'),_v(" "),_m(24),_v(" "),_m(25),_m(26),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("Hover over the "),_c('trigger',{attrs:{"for":"pop:context-target"}},[_v("keyword")]),_v(" to see the popover.")],1),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"id":"pop:context-target","placement":"top","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_v("Popover header")]),_v(" "),_m(27)])])],1),_v(" "),_c('hr'),_v(" "),_c('div',[_m(28),_v(" "),_m(29),_v(" "),_c('div',[_m(30),_v(" "),_m(31),_v(" "),_m(32),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("More about "),_c('trigger',{attrs:{"for":"modal:loremipsum"}},[_v("trigger")]),_v(".")],1),_v(" "),_c('b-modal',{ref:"modal:loremipsum",attrs:{"id":"modal:loremipsum","hide-footer":"","size":"","modal-class":"mb-zoom"},scopedSlots:_u([{key:"modal-title",fn:function(){return [_c('strong',[_v("Modal header")]),_v(" 🚀")]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n")]),_v(" "),_c('br'),_v("\nThis is the same "),_c('trigger',{attrs:{"for":"modal:loremipsum"}},[_v("trigger")]),_v(" as last one.\n"),_c('p',[_c('trigger',{attrs:{"for":"modal:centered"}},[_v("This is a trigger for a centered modal")]),_v(".")],1),_v(" "),_c('b-modal',{ref:"modal:centered",attrs:{"id":"modal:centered","centered":"","hide-footer":"","size":"","modal-class":"mb-zoom"},scopedSlots:_u([{key:"modal-title",fn:function(){return [_c('strong',[_v("Centered")]),_v(" 🚀")]},proxy:true}])},[_v("\n Centered\n")]),_v(" "),_c('p',[_c('trigger',{attrs:{"for":"modal:ok-text"}},[_v("This is a trigger for a modal with a custom OK button")]),_v(".")],1),_v(" "),_c('b-modal',{ref:"modal:ok-text",attrs:{"id":"modal:ok-text","ok-title":"Custom OK","ok-only":"","size":"","modal-class":"mb-zoom"},scopedSlots:_u([{key:"modal-title",fn:function(){return [_v("OK button visible!")]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n")])],1)],1)]),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("More about triggers")])]},proxy:true}])},[_v(" "),_c('div',[_c('p',[_c('strong',[_c('strong',[_v("Triggers")])])]),_v(" "),_c('p',[_v("Trigger provides more flexibility in triggering contextual overlay via Tooltip, Popover or Modal.")]),_v(" "),_c('p',[_v("You could embed a Trigger within the text, and define the Tooltip, Popover or Modal at a separate location, which allows for a cleaner authoring flow.")]),_v(" "),_c('p',[_v("Specify the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(" attribute on the Tooltip, Popover or Modal component, and use the same "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(" in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("for")]),_v(" attribute of the Trigger to allow the Trigger to invoke the specific overlay elements.\nAdditionally, multiple Triggers could share the same overlay by providing them with the same "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(".\n"),_c('br')]),_v(" "),_c('p',[_c('strong',[_v("Trigger's "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("trigger")]),_v(" attribute (which defaults to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")]),_v(") is independent of the target's.")])]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("trigger")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")])]),_v(" "),_c('td',[_v("How the overlay view is triggered."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("click")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("focus")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("for")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("The id for the overlay view to be shown.")])]),_v(" "),_c('tr',[_c('td',[_v("placement")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("auto")])]),_v(" "),_c('td',[_v("How to position the Popover or Tooltip."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("auto")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("top")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("left")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("right")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bottom")]),_v(".")])])])])])])]),_c('p'),_v(" "),_m(33),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_m(34),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("header"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_m(35),_v(" "),_m(36),_v(" "),_c('td',[_v("Header of the Modal component. Supports inline markdown text.")])]),_v(" "),_c('tr',[_m(37),_v(" "),_c('td',[_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_v("Slot")])],1),_v(" "),_c('td',[_v("empty")]),_v(" "),_m(38)]),_v(" "),_m(39),_v(" "),_m(40),_v(" "),_m(41),_v(" "),_m(42),_v(" "),_m(43),_v(" "),_m(44),_v(" "),_m(45)])])]),_m(46),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("Hover "),_c('trigger',{attrs:{"large":"","for":"modal:unused"}},[_v("here")]),_v(" to open a modal.")],1),_v(" "),_c('b-modal',{ref:"modal:unused",attrs:{"id":"modal:unused","ok-title":"OK","ok-only":"","size":"","modal-class":"mb-zoom"},scopedSlots:_u([{key:"modal-title",fn:function(){return [_v("Modal header")]},proxy:true}])},[_v("\n Modal content\n")])],1)],1),_v(" "),_c('hr'),_v(" "),_c('br'),_v(" "),_m(47),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})]),_v(" "),_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"},[_c('overlay-source',{staticClass:"nav nav-pills flex-column my-0 small no-flex-wrap",attrs:{"id":"mb-page-nav","tag-name":"nav","to":"mb-page-nav"}},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#pop-up-components"}},[_v("Pop-Up Components‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#tooltips"}},[_v("Tooltips‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#popovers"}},[_v("Popovers‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#modals"}},[_v("Modals‎")])])])],1)])],1),_v(" "),_m(48)])} +}; + var pageVueStaticRenderFns = [function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}},[_v("Pop-Up Components")])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_c('em',[_v("User Guide → Pop-Up Components")])])])])} +},function anonymous( +) { +with(this){return _c('h1',{attrs:{"id":"pop-up-components"}},[_c('span',{staticClass:"anchor",attrs:{"id":"pop-up-components"}}),_v("Pop-Up Components"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#pop-up-components","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p',[_v("The components in this page can be used to easily create "),_c('strong',[_v("various forms of pop-ups")]),_v(" that are activated on some user action (e.g., hovering over some text). This may be useful for showing additional information related to some specific area or span of content.\n")])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"tooltips"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tooltips"}}),_v("Tooltips"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tooltips","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on top"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"left\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on left"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on right"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"bottom\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on bottom"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("hr")]),_v(" />")]),_v("\n")]),_c('span',[_v("Trigger\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trigger")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"click\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Click"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(" />")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(" />")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trigger")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"focus\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("input")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Focus\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("**Markdown**:\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*Hello* **World**\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"\"")]),_v(">")]),_v("Hover me"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(" />")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("**Free Text**:\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"coupling is the degree of interdependence between software modules; a measure of how closely connected two routines or modules are; the strength of the relationships between modules.\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("i")]),_v(">")]),_v("coupling"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Using trigger for Tooltip:")]),_c('br')])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_v("More about "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tt:trigger_id\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(".\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tt:trigger_id\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This tooltip triggered by a trigger\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v("This is the same "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tt:trigger_id\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" as last one.\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_c('strong',[_v("Options")])])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("trigger")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")])]),_v(" "),_c('td',[_v("How the tooltip is triggered."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("click")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("focus")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("content")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Text content of the tooltip.")])]),_v(" "),_c('tr',[_c('td',[_v("placement")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("top")])]),_v(" "),_c('td',[_v("How to position the tooltip."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("top")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("left")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("right")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bottom")]),_v(".")])])])])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("Hover "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"An explanation, **supports simple Markdown**\"")]),_v(">")]),_v("here"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" to see a tooltip.\n")])])])])} +},function anonymous( +) { +with(this){return _c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("An explanation, "),_c('strong',[_v("supports simple Markdown")])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"popovers"}},[_c('span',{staticClass:"anchor",attrs:{"id":"popovers"}}),_v("Popovers"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#popovers","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fade\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on top"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fade\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"left\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on left"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fade\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on right"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fade\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"bottom\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on bottom"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("hr")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Header"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fade\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on top"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fade\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"left\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on left"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fade\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on right"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fade\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"bottom\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on bottom"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("hr")]),_v(" />")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"scale\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trigger")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hover\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Mouseenter"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Markdown"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"scale\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**Emoji header** :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"!!emoji!! content :cat:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Hover"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Content using slot"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"scale\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**Emoji header** :rocket:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"content\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" This is a long content...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Hover"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(" />")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(" />")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Wrap Text"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"false\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nice!\"")]),_v(">")]),_v("What do you say"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Using trigger for Popover:")]),_c('br')])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_v("More about "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pop:trigger_id\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(".\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pop:trigger_id\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This popover is triggered by a trigger\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v("This is the same "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pop:trigger_id\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" as last one.\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_c('strong',[_v("Options")])])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("trigger")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")])]),_v(" "),_c('td',[_v("How the Popover is triggered."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("click")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("focus")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("header")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Popover header, supports inline markdown text.")])]),_v(" "),_c('tr',[_c('td',[_v("content")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Popover content, supports inline markdown text.")])]),_v(" "),_c('tr',[_c('td',[_v("placement")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("top")])]),_v(" "),_c('td',[_v("How to position the Popover."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("top")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("left")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("right")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bottom")]),_v(".")])])])])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("Hover over the "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pop:context-target\"")]),_v(">")]),_v("keyword"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" to see the popover.\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pop:context-target\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Popover header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"content\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("description :+1:\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('span',{attrs:{"data-mb-slot-name":"content"}},[_c('div',[_c('p',[_v("description 👍")])])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"modals"}},[_c('span',{staticClass:"anchor",attrs:{"id":"modals"}}),_v("Modals"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#modals","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Modals are to be used together with the "),_c('a',{attrs:{"href":"#trigger"}},[_v("Trigger")]),_v(" component for activation.")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_v("More about "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:loremipsum\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(".\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**Modal header** :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:loremipsum\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n")]),_c('span',[_v(" magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n")]),_c('span',[_v(" consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n")]),_c('span',[_v(" Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v("This is the same "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:loremipsum\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" as last one.\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:centered\"")]),_v(">")]),_v("This is a trigger for a centered modal"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(".\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**Centered** :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:centered\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("center")]),_v(">")]),_v("\n")]),_c('span',[_v(" Centered\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:ok-text\"")]),_v(">")]),_v("This is a trigger for a modal with a custom OK button"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(".\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"OK button visible!\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:ok-text\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ok-text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Custom OK\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n")]),_c('span',[_v(" magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n")]),_c('span',[_v(" consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n")]),_c('span',[_v(" Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_c('strong',[_v("Options")])])])} +},function anonymous( +) { +with(this){return _c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])])} +},function anonymous( +) { +with(this){return _c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])])} +},function anonymous( +) { +with(this){return _c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])])} +},function anonymous( +) { +with(this){return _c('td',[_v("footer "),_c('hr',{staticStyle:{"margin-top":"0.2rem","margin-bottom":"0"}}),_v(" "),_c('small',[_v("modal-footer "),_c('br'),_v(" (deprecated)")])])} +},function anonymous( +) { +with(this){return _c('td',[_v("Specifying this will override the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("ok-text")]),_v(" attribute, and the OK button will not render.")])} +},function anonymous( +) { +with(this){return _c('tr',[_c('td',[_v("ok-text")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Text for the OK button.")])])} +},function anonymous( +) { +with(this){return _c('tr',[_c('td',[_v("effect")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("zoom")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("zoom")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fade")]),_v(".")])])} +},function anonymous( +) { +with(this){return _c('tr',[_c('td',[_v("id")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("Used by "),_c('a',{attrs:{"href":"#trigger"}},[_v("Trigger")]),_v(" to activate the Modal by id.large")])])} +},function anonymous( +) { +with(this){return _c('tr',[_c('td',[_v("small")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Creates a "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/4.0/components/modal/#optional-sizes"}},[_v("small Modal")]),_v(".")])])} +},function anonymous( +) { +with(this){return _c('tr',[_c('td',[_v("large")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Creates a "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/4.0/components/modal/#optional-sizes"}},[_v("large Modal")]),_v(".")])])} +},function anonymous( +) { +with(this){return _c('tr',[_c('td',[_v("center")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Vertically centers the modal (in addition to the horizontal centering by default).")])])} +},function anonymous( +) { +with(this){return _c('tr',[_c('td',[_v("backdrop")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("true")])]),_v(" "),_c('td',[_v("Enables closing the Modal by clicking on the backdrop.")])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("Click "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trigger")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"click\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:unused\"")]),_v(">")]),_v("here"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" to open a modal.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Modal header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:unused\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Modal content\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-left"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Image & Diagram Components")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-right"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/components/navigation.html"}},[_c('span',[_c('span',[_v("Navigation Components")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} +},function anonymous( +) { +with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 3.1.1")]),_v(" on Sat, 22 Jan 2022, 16:49:34 UTC]")]),_c('br'),_v(" "),_c('small',[_v("This site is powered by "),_c('a',{attrs:{"href":"https://www.netlify.com/"}},[_v("Netlify")]),_v(".")])])])])} +}]; + \ No newline at end of file diff --git a/userGuide/components/presentation.html b/userGuide/components/presentation.html index f7461c1..650c2ce 100644 --- a/userGuide/components/presentation.html +++ b/userGuide/components/presentation.html @@ -3,7 +3,7 @@ - + MarkBind - User Guide: Presentational Components @@ -12,8 +12,8 @@ - - + + @@ -24,7 +24,7 @@ const baseUrl = '' -

        Presentational Components

        User Guide → Presentational Components

        Presentational Components

        The components in this page are the core presentational components you may want to use. Panels and tabs can be used to organise content sections, while badges and boxes can highlight small, specific pieces of information. +

        Presentational Components

        User Guide → Presentational Components

        Presentational Components

        The components in this page are the core presentational components you may want to use. Panels and tabs can be used to organise content sections, while badges and boxes can highlight small, specific pieces of information.

        Badges

        CODE:

        Normal:
 <span class="badge badge-primary">Primary</span>
 <span class="badge badge-secondary">Secondary</span>
@@ -478,7 +478,7 @@
       Some stuff about stars ...
        Moon
        Some stuff about the moon ... -

        Using Components

        Image & Diagram Components


        +

        Relevant Tips & Tricks

        Indent components

        Using Components

        Image & Diagram Components


        + + + + + + + + + +

        Deploying the Site

        User Guide → Deploying the Site

        Deploying the Site

        A site generated by MarkBind can be deployed by simply uploading the generated files to any Web server. In addition, MarkBind provides several convenient deployment options. +

        Generic steps for deploying a MarkBind site

        1. Set the baseUrl property of the site.json file to match the deploy location.
        2. (Optional) Use the markbind serve command to stage the site locally and confirm the contents are as expected.
        3. Use the markbind build command to generate the site from source files. That command puts the generated site files in a directory named _site (you can change the output directory using parameters supplied to the command).
        4. Upload the site files to the Web server. The sections below explain how to automate this step if you are deploying to some online platforms.

        Steps for deploying multiple MarkBind sites:

        1. Create multiple site.json files. Ensure that the baseUrl property of each site.json file matches its deploy location.
        2. (Optional) Use the markbind serve -s <file> command to stage each site locally and confirm the contents are as expected.
        3. For each site: +
          1. Use the markbind build -s <file> command to generate the site from source files.
          2. Upload the site files to the Web server. The sections below explain how to automate this step if you are deploying to some online platforms.

        Deploying to Github Pages

        MarkBind can easily deploy a site to Github pages if the project root directory is also a GitHub repo.

        Using the markbind deploy command

        Running the markbind deploy command will deploy the most recent build of your site to the gh-pages branch of the repo origin and will be available +After the command is completed, your site will be online at http://<username|org>.github.io/<repo> e.g., http://se-edu.github.io/se-book.

        If you are deploying to the site to GitHub pages, the baseUrl setting in the site.json should be set to the "/<repositoryName>" for the links in the deployed site to work correctly.
        Example If you are using Github Pages to host your deployed website at repo myorg/myproduct (i.e., the website is published at https://myorg.github.io/myproduct), then your baseUrl should be "/myproduct".

        You can override the default deployment settings (e.g., repo/branch to deploy) in the site.json's deploy section:

        User Guide: Configuring the Site → deploy


        markbind deploy does not generate the static site from your source; it simply deploys the files that are already in the _site directory. You need to run markbind build first if you want to generate the site before deploying.

        Using CI Platforms

        You can setup CI Platforms to automatically build and deploy your site on GitHub Pages every time your GitHub repo is updated.

        Generating a Github Personal Access Token

        With the exception of Github Actions, a Github Personal Access Token with repo permissions is required for deploying your MarkBind site to Github Pages via CI tools.

        You may refer to Github's documentation on how to generate a Github Personal Access Token. Ensure that you have enabled repo permissions as shown from the screenshot below.
        Take note of the generated token - you will not be able to see it again once you navigate away from the page.

        Deploying via Github Actions

        To instruct Github Actions to build and deploy the site when you push to the repository, add a Github Actions workflow file in your project repo at the location <PROJECT_ROOT>/.github/workflows/deploy.yml A sample workflow file is provided below:

        name: Deploy Markbind Site
+on:
+  push:
+    branches: master
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    name: test
+    env:
+      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '10'
+      - run: npm i -g markbind-cli
+      - run: markbind build
+      - run: markbind deploy --ci
+

        The sample deploy.yml workflow above uses the default Github Token secret that is generated automatically for each Github Actions workflow. You may also use a Github Personal Access Token in place of the default Github Token.

        Once you have created the file, commit and push the file to your repo. Github Actions should start to build and deploy your markbind site. You can verify this by visiting www.github.com/<org|username>/<repo>/actions.

        For more information on customizing your workflow file to fit your specific needs, you may refer to the Github Action Docs.

        Deploying via Travis CI

        Adding your repository to Travis CI

        Travis CI Migration

        Since May 2018, Travis CI has been undergoing migration to travis-ci.com, which changes the way you setup repositories on Travis CI.

        • If you are new to Travis CI, you should add your repository on travis-ci.com.
        • Alternatively, if you are already using Travis CI on travis-ci.org, you can continue to add your repository on travis-ci.org.

          Add your repository on travis-ci.com
          1. Sign in to Travis using your GitHub account.
          2. Accept the authorisation for Travis CI when you are redirected to GitHub.
          3. Go to the Repositories page, and click on the green Activate button.
            If you are already using Travis CI, click on the white Manage Repositories on GitHub button instead.
          4. Select the repository with the MarkBind site, and add the Travis CI GitHub App to the repository by clicking the green Approve and Install button.
          Add your repository on travis-ci.org
          1. Sign in to Travis using your GitHub account.
          2. Accept the authorisation for Travis CI when you are redirected to GitHub.
          3. Go to the Repositories page.
          4. Find the repository with the MarkBind site.
            If the organization/repository is not shown in the list, click on Review and add link at the bottom of the list of organization and follow the steps to give Travis access to the organization containing your repo. After that, come back to the Repositories page and use the Sync Account button to sync your Travis account with GitHub.
          5. Activate the repo using the slider switch in front of it.

          Configuring your repository in Travis CI

          1. Add an environment variable in Travis CI named GITHUB_TOKEN, with the value set to your generated Github Personal Access Token. Ensure that Display value in the build log is set to Off.

          2. Add a .travis.yml file to instruct Travis CI to build and deploy the site when you push to the repository. An example .travis.yml file that can accomplish this is given below:

            language: node_js
+node_js:
+  - 10
+install:
+  - npm i -g markbind-cli
+script: markbind build
+deploy:
+  provider: script
+  script: markbind deploy --ci
+  skip_cleanup: true
+  on:
+    branch: master
+

          More information about .travis.yml can be found in the Travis CI documentation.

          1. Commit .travis.yml to your MarkBind repository and push the changes. Travis CI should begin to build your site.
          2. Select the MarkBind repository on Travis CI and check the build status to see if it is successful.
          3. Once the build succeeds, your MarkBind site should be online at http://<username|org>.github.io/<repo> e.g., http://se-edu.github.io/se-book. Travis CI will automatically build and deploy changes to your site as you push new changes to the repository after a few seconds.
            You might have to go to the Settings of your repo and configure it to publish GitHub Pages from the gh-pages branch as MarkBind deploys to that branch by default.

          Configuring Travis CI to only deploy from a specific repository

          When Travis CI is set up as explained above, Travis CI will attempt to deploy the site from any repository it is in, including forks. +If you want Travis CI to only deploy from a specific repository (eg. only from your main site repository), you can add to the deploy phase a repo condition in the form owner_name/repo_name.

          For example, if you only want Travis CI to deploy the site when it is run from the se-edu/se-book repository, the following repo condition should be added to .travis.yml.

            on:
+    branch: master
+    repo: se-edu/se-book
+

          The repo value can be changed to your specific repository as desired.

          Deploying via AppVeyor CI

          Adding your repository to AppVeyor CI

          1. Sign in to AppVeyor CI using your Github Account.

          2. Authorize AppVeyor App as Github App in the account settings by clicking on the Install AppVeyor App button.

          3. In the projects directory, click on the New Project button.

          4. Finally, select the repository containing your Markbind site.

          Configuring your repository in AppVeyor CI

          1. Ensure that you have generated a Github Personal Access token with repo permissions.

          2. Navigate to the project settings page of your repository in AppVeyor CI.

          3. On the left menu, click on Environment.

          4. Under the heading Environment variables, add a custom environment variable named GITHUB_TOKEN, with the value set to the personal access token that was generated in the first step. Ensure that you toggle variable encryption by clicking on the padlock.

          5. Remember to click Save at the bottom of the page.

          6. Add a appveyor.ymlfile at the root of your Markbind site's repository to instruct AppVeyor CI to build and deploy the site to Github Pages when you to push to your repository. More information on customizing appveyor.yml can be found in AppVeyor documentation. An example appveyor.yml file is given below:

            environment:
+  nodejs_version: '10'
+
+branches:
+  only:
+    - master
+
+install:
+  - ps: Install-Product node $env:nodejs_version
+  - npm i -g markbind-cli
+  - markbind build
+  - markbind deploy --ci
+
+test: off
+
+build: off
+

          Commit and push appveyor.yml to your github repository. Thereafter, AppVeyor CI should begin to run the build script. You are able to view the current build status by clicking on your repository in the AppVeyor projects page. Once the build succeeds, you should be able to view your Markbind site, after a few seconds, at http://<username|org>.github.io/<repo> e.g., http://se-edu.github.io/se-book.

          Deploying via Circle CI

          Adding your repository to Circle CI

          1. Ensure that you have generated a Github Personal Access Token with repo permissions.

          2. Sign in to Circle CI using your Github account.

          3. In the projects dashboard, click on the Set Up Project button beside the repo containing your Markbind site.

          Configuring your repository in Circle CI

          1. Once you have set up your project, click on the Project Settings button.

          2. On the left, click on the Environment Variables tab and add a custom Environment Variable, GITHUB_TOKEN, which contains the value of your Github Personal Access Token.

          3. Commit and push a config.yml file to the repo containg your Markbind Site that instructs Circle CI to build and deploy your Markbind site to Github Pages whenever you push to your repository. Ensure that the config.yml file is located in the <PROJECT_ROOT>/.circleci/ directory. A sample config.yml file is shown below:

            jobs:
+  Build-And-Deploy:
+    docker:
+      - image: 'cimg/base:stable'
+    steps:
+      - checkout
+      - node/install:
+          node-version: "10"
+          npm-version: "6"
+          install-yarn: false
+      - run: node --version
+      - run: npm i -g markbind-cli
+      - run: markbind build
+      - run: markbind deploy --ci
+version: 2.1
+orbs:
+  node: circleci/node@4.1.0
+workflows:
+  Deploy-Markbind-Site:
+    jobs:
+      - Build-And-Deploy
+

          After you have pushed the config.yml file to your remote repo, you should see Circle CI starting to run the Deploy job in your projects dashboard. Once it is successful, you should be able to view your Markbind site at http://<username|org>.github.io/<repo>.

          For more information on customizing your build script, you may refer to Circle CI Config Reference Document.

          Deploying to Netlify

          You can setup a platform for deploying static webpages (among other things)Netlify +to automatically build and deploy your site on their platform every time your GitHub repo is updated.

          Here are the steps to set up Netlify:

          1. Go to https://app.netlify.com/ and sign up

          2. Next go to https://app.netlify.com/account/sites and select New site from Git

          3. Select your git provider

          4. Select your markbind site repository

          5. Update the build settings as follows and hit Deploy site:

            • Build Command: npm i markbind-cli -g && markbind build --baseUrl
            • Publish directory: _site
            • Show advanced: Add a new variable with the key as NODE_VERSION and the value as 12 or higher

          Now your site will be deployed on Netlify at the given address specified after deployment. It will be updated automatically when the default branch of your repo is updated.

          Previewing Pull Requests for MarkBind sites

          If you are hosting your Markbind project on Github, you can setup Pull Request previewsPR previews in order to automatically build and deploy the modified Markbind site based on the changes in the PR.

          Previewing PRs using Netlify

          By following the steps to deploy to Netlify in the previous section, you would automatically be able to preview PRs.

          You can preview the updated site at the bottom of the pull request by clicking on details link in the PR:

          For more information on previewing PRs with Netlify, you may refer to Netlify's docs.

          Previewing PRs using Surge

          You may also preview PRs using Surge, which is an NPM package that does static web publishing. Here are the steps to do so:

          1. First install Surge using by typing npm install --global surge on your terminal.

          2. Next, type surge in the terminal. You should see the following prompt:

          3. Proceed to create a Surge account. After you have set up your account, you should see the following screen:

          4. Hit CTRL-C on your keyboard to quit the current running Surge process.

            The rest of the Surge setup is unnecessary for the purposes of setting up PR previews. You may still proceed with the rest of the setup such as setting the project directory and the domain name, if you wish to.

          5. Next, type surge token to generate your surge token.

          6. In the repo of your markbind site, create a new secret by going to "Settings"->"Secrets" and naming it as SURGE_TOKEN and setting its value to the value of the generated surge token.

          7. Commit and push the following 2 files into your markbind site repo, in the directory <PROJECT_ROOT>/.github/workflows/.

          receivePR.yml File

          previewPR.yml File

          Finally, you may open a PR to the repo of your Markbind site. If everything is configured correctly, after a few minutes, you should be able to see a github-actions bot automatically commenting on the PR with a link to preview the updated Markbind site.

          For more information on Surge, you may refer to Surge's docs.

          Relevant Tips & Tricks

          Configuring Online Deployment platforms to use specific MarkBind version

          Themes

          MarkBind in the Project Workflow


          + + + diff --git a/userGuide/deployingTheSite.page-vue-render.js b/userGuide/deployingTheSite.page-vue-render.js new file mode 100644 index 0000000..9d499b9 --- /dev/null +++ b/userGuide/deployingTheSite.page-vue-render.js @@ -0,0 +1,121 @@ + + var pageVueRenderFn = function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',[_c('header',{attrs:{"fixed":""}},[_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/index.html","title":"Home"}},[_c('img',{attrs:{"src":"/images/logo-darkbackground.svg","height":"20"}})])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('form',{staticClass:"navbar-form"},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback,"menu-align-right":""}})],1)])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/index.html"}},[_v("HOME")])]),_v(" "),_c('div',{attrs:{"tags":"environment--ug"}},[_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"sibling-or-child","href":"/userGuide/index.html"}},[_v("USER GUIDE")])])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/showcase.html"}},[_v("SHOWCASE")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/about.html"}},[_v("ABOUT")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_c('span',[_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}})])])])])],1)]),_v(" "),_c('div',{attrs:{"id":"flex-body"}},[_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"site-nav","tag-name":"nav","to":"site-nav"}},[_c('div',{staticClass:"site-nav-top"},[_c('div',{staticClass:"font-weight-bold mb-2",staticStyle:{"font-size":"1.25rem"}},[_v("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tipsAndTricks.html"}},[_v("Tips & Tricks")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/glossary.html"}},[_v("Glossary")])])])])])])],1)],1)]),_v(" "),_c('div',{staticClass:"fixed-header-padding",attrs:{"id":"content-wrapper"}},[_m(0),_v(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_c('p'),_v(" "),_m(4),_v(" "),_m(5),_v(" "),_m(6),_v(" "),_m(7),_v(" "),_m(8),_v(" "),_m(9),_v(" "),_m(10),_v(" "),_m(11),_v(" "),_c('div',{attrs:{"id":"warning-about-baseUrl"}},[_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("If you are deploying to the site to GitHub pages, the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")]),_v(" setting in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" should be set to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"/\"")]),_v(" for the links in the deployed site to work correctly."),_c('br'),_v(" "),_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" If you are using Github Pages to host your deployed website at repo "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("myorg/myproduct")]),_v(" (i.e., the website is published at "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("https://myorg.github.io/myproduct")]),_v("), then your "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")]),_v(" should be "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"/myproduct\"")]),_v(".")],1)])],1),_v(" "),_m(12),_v(" "),_c('panel',{attrs:{"type":"seamless","popup-url":"siteJsonFile.html#deploy"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("User Guide: Configuring the Site → "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("deploy")])])])]},proxy:true}])},[_v(" "),_c('div',[_c('h4',{attrs:{"id":"deploy"}},[_c('span',{staticClass:"anchor",attrs:{"id":"deploy"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("deploy")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#deploy","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("The settings for "),_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("auto-deployment to Github pages")]),_v(".")])]),_v(" "),_c('ul',[_c('li',[_c('p',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("message")])]),_v(" [Optional. Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"Site Update.\"")]),_v("]"),_c('br'),_v("\nThe commit message used for the deployment commit.")])]),_v(" "),_c('li',[_c('p',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("repo")])]),_v(" [Optional. Default: the current working project's repo]"),_c('br'),_v("\nThe repo you want to deploy to."),_c('br'),_v("\nFormat: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"https://github.com//.git\"")]),_v(" ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"git@github.com:/.git\"")]),_v(" if you use SSH)"),_c('br'),_v(" "),_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"https://github.com/myorg/myrepo.git\"")])],1)]),_v(" "),_c('li',[_c('p',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("branch")])]),_v(" [Optional. Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"gh-pages\"")]),_v("]"),_c('br'),_v("\nThe branch that will be deployed to in the remote repo.")])])])])]),_v(" "),_c('br'),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind deploy")]),_v(" does not generate the static site from your source; it simply deploys the files that are already in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_site")]),_v(" directory. You need to run "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind build")]),_v(" first if you want to generate the site before deploying.")])]),_v(" "),_m(13),_v(" "),_m(14),_v(" "),_c('panel',{attrs:{"type":"seamless","expanded":"","panelId":"generating-a-github-personal-access-token"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h4',{attrs:{"id":"generating-a-github-personal-access-token"}},[_c('span',{staticClass:"anchor",attrs:{"id":"generating-a-github-personal-access-token"}}),_v("Generating a Github Personal Access Token"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#generating-a-github-personal-access-token","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('p',[_v("With the exception of Github Actions, a Github Personal Access Token with "),_c('strong',[_v("repo")]),_v(" permissions is required for deploying your MarkBind site to Github Pages via CI tools.")]),_v(" "),_c('p',[_v("You may refer to Github's documentation on "),_c('a',{attrs:{"href":"https://help.github.com/articles/creating-a-personal-access-token-for-the-command-line/#creating-a-token"}},[_v("how to generate a Github Personal Access Token")]),_v(". Ensure that you have enabled "),_c('strong',[_v("repo")]),_v(" permissions as shown from the screenshot below.")]),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/githubTokenRepoPermissions.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/githubTokenRepoPermissions.png","alt":""}})])])])],1),_v(" "),_c('box',{attrs:{"type":"warning"}},[_v("Take note of the generated token - you will not be able to see it again once you navigate away from the page.")])],1),_v(" "),_c('panel',{attrs:{"type":"seamless","expanded":"","panelId":"deploying-via-github-actions"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h4',{attrs:{"id":"deploying-via-github-actions"}},[_c('span',{staticClass:"anchor",attrs:{"id":"deploying-via-github-actions"}}),_v("Deploying via Github Actions"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#deploying-via-github-actions","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('p',[_v("To instruct "),_c('a',{attrs:{"href":"https://docs.github.com/en/actions"}},[_v("Github Actions")]),_v(" to build and deploy the site when you push to the repository, add a Github Actions workflow file in your project repo at the location "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("/.github/workflows/deploy.yml")]),_v(" A sample workflow file is provided below:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs yml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Deploy")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Markbind")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Site")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("on:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("push:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("branches:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("master")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("jobs:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("build:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("runs-on:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("ubuntu-latest")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("test")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("env:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("GITHUB_TOKEN:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("${{")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("secrets.GITHUB_TOKEN")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("}}")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("steps:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uses:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("actions/checkout@v2")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uses:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("actions/setup-node@v2")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("with:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("node-version:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'10'")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("run:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("npm")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("i")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("-g")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind-cli")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("run:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("build")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("run:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("deploy")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("--ci")]),_v("\n")])])]),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("The sample "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("deploy.yml")]),_v(" workflow above uses the "),_c('a',{attrs:{"href":"https://docs.github.com/en/actions/reference/authentication-in-a-workflow"}},[_v("default Github Token secret")]),_v(" that is generated automatically for each Github Actions workflow. You may also use a "),_c('a',{attrs:{"href":"#generating-a-github-personal-access-token"}},[_v("Github Personal Access Token")]),_v(" in place of the default Github Token.")])]),_v(" "),_c('p',[_v("Once you have created the file, commit and push the file to your repo. Github Actions should start to build and deploy your markbind site. You can verify this by visiting "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("www.github.com///actions")]),_v(".")]),_v(" "),_c('p',[_v("For more information on customizing your workflow file to fit your specific needs, you may refer to the "),_c('a',{attrs:{"href":"https://docs.github.com/en/actions/reference/workflow-syntax-for-github-actions"}},[_v("Github Action Docs")]),_v(".")])],1),_v(" "),_c('panel',{attrs:{"type":"seamless","expanded":"","panelId":"deploying-via-travis-ci"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h4',{attrs:{"id":"deploying-via-travis-ci"}},[_c('span',{staticClass:"anchor",attrs:{"id":"deploying-via-travis-ci"}}),_v("Deploying via Travis CI"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#deploying-via-travis-ci","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('p',[_c('strong',[_v("Adding your repository to Travis CI")])]),_v(" "),_c('panel',{attrs:{"type":"info","expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" Travis CI Migration")])]},proxy:true}])},[_v(" "),_c('p',[_v("Since May 2018, Travis CI has been "),_c('a',{attrs:{"href":"https://docs.travis-ci.com/user/migrate/open-source-on-travis-ci-com/"}},[_v("undergoing migration to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("travis-ci.com")])]),_v(", which changes the way you setup repositories on Travis CI.")]),_v(" "),_c('ul',[_c('li',[_v("If you are new to Travis CI, you should "),_c('strong',[_v("add your repository on "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("travis-ci.com")])]),_v(".")]),_v(" "),_c('li',[_v("Alternatively, if you are already using Travis CI on "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("travis-ci.org")]),_v(", you can continue to "),_c('strong',[_v("add your repository on "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("travis-ci.org")])]),_v(".")])])]),_v(" "),_c('p'),_v(" "),_c('tabs',[_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Add your repository on "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("travis-ci.com")])]},proxy:true}])},[_v(" "),_c('ol',[_c('li',[_c('a',{attrs:{"href":"https://travis-ci.com/signin"}},[_v("Sign in to Travis")]),_v(" using your GitHub account.")]),_v(" "),_c('li',[_v("Accept the authorisation for Travis CI when you are redirected to GitHub.")]),_v(" "),_c('li',[_v("Go to the "),_c('a',{attrs:{"href":"https://travis-ci.com/account/repositories"}},[_v("Repositories page")]),_v(", and click on the green "),_c('em',[_v("Activate")]),_v(" button."),_c('br'),_v(" "),_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" If you are already using Travis CI, click on the white "),_c('em',[_v("Manage Repositories on GitHub")]),_v(" button instead.")])]),_v(" "),_c('li',[_v("Select the repository with the MarkBind site, and add the Travis CI GitHub App to the repository by clicking the green "),_c('em',[_v("Approve and Install")]),_v(" button.")])])]),_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Add your repository on "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("travis-ci.org")])]},proxy:true}])},[_v(" "),_c('ol',[_c('li',[_c('a',{attrs:{"href":"https://travis-ci.com/signin"}},[_v("Sign in to Travis")]),_v(" using your GitHub account.")]),_v(" "),_c('li',[_v("Accept the authorisation for Travis CI when you are redirected to GitHub.")]),_v(" "),_c('li',[_v("Go to the "),_c('a',{attrs:{"href":"https://travis-ci.org/account/repositories"}},[_v("Repositories page")]),_v(".")]),_v(" "),_c('li',[_v("Find the repository with the MarkBind site."),_c('br'),_v(" "),_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" If the organization/repository is not shown in the list, click on "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Review and add")]),_v(" link at the bottom of the list of organization and follow the steps to give Travis access to the organization containing your repo. After that, come back to the "),_c('a',{attrs:{"href":"https://travis-ci.org/account/repositories"}},[_v("Repositories page")]),_v(" and use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Sync Account")]),_v(" button to sync your Travis account with GitHub.")])]),_v(" "),_c('li',[_v("Activate the repo using the slider switch in front of it.")])]),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/travisActivateRepo.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/travisActivateRepo.png","alt":""}})])])])],1)])],1),_v(" "),_c('p',[_c('strong',[_v("Configuring your repository in Travis CI")])]),_v(" "),_c('ol',[_c('li',[_c('p',[_c('a',{attrs:{"href":"https://docs.travis-ci.com/user/environment-variables/#defining-variables-in-repository-settings"}},[_v("Add an environment variable in Travis CI")]),_v(" named "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("GITHUB_TOKEN")]),_v(", with the value set to your "),_c('a',{attrs:{"href":"#generating-a-github-personal-access-token"}},[_v("generated Github Personal Access Token")]),_v(". "),_c('mark',[_v("Ensure that "),_c('em',[_v("Display value in the build log")]),_v(" is set to "),_c('em',[_v("Off")]),_v(".")])]),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/travisGithubToken.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/travisGithubToken.png","alt":""}})])])])],1)]),_v(" "),_c('li',[_c('p',[_v("Add a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".travis.yml")]),_v(" file to instruct Travis CI to build and deploy the site when you push to the repository. An example "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".travis.yml")]),_v(" file that can accomplish this is given below:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs yml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("language:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("node_js")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("node_js:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("10")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("install:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("npm")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("i")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("-g")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind-cli")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("script:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("build")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("deploy:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("provider:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("script")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("script:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("deploy")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("--ci")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("skip_cleanup:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-literal"}},[_v("true")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("on:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("branch:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("master")]),_v("\n")])])])])]),_v(" "),_c('p',[_v("More information about "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".travis.yml")]),_v(" can be found in the "),_c('a',{attrs:{"href":"https://docs.travis-ci.com/"}},[_v("Travis CI documentation")]),_v(".")]),_v(" "),_c('ol',[_c('li',[_v("Commit "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".travis.yml")]),_v(" to your MarkBind repository and push the changes. Travis CI should begin to build your site.")]),_v(" "),_c('li',[_v("Select the MarkBind repository on "),_c('a',{attrs:{"href":"https://travis-ci.com/auth"}},[_v("Travis CI")]),_v(" and "),_c('a',{attrs:{"href":"https://docs.travis-ci.com/user/job-lifecycle/#breaking-the-build"}},[_v("check the build status")]),_v(" to see if it is successful.")]),_v(" "),_c('li',[_v("Once the build succeeds, your MarkBind site should be online at "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("http://.github.io/")]),_v(" e.g., "),_c('a',{attrs:{"href":"http://se-edu.github.io/se-book"}},[_v("http://se-edu.github.io/se-book")]),_v(". Travis CI will automatically build and deploy changes to your site as you push new changes to the repository after a few seconds."),_c('br'),_v(" "),_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" You might have to go to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Settings")]),_v(" of your repo and configure it to publish GitHub Pages from the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("gh-pages")]),_v(" branch as MarkBind deploys to that branch by default.")])])]),_v(" "),_c('box',{attrs:{"type":"info","light":""}},[_c('p',[_c('strong',[_v("Configuring Travis CI to only deploy from a specific repository")])]),_v(" "),_c('p',[_v("When Travis CI is set up as explained above, Travis CI will attempt to deploy the site from any repository it is in, including forks.\nIf you want Travis CI to only deploy from a specific repository (eg. only from your main site repository), you can add to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("deploy")]),_v(" phase a "),_c('a',{attrs:{"href":"https://docs.travis-ci.com/user/deployment#conditional-releases-with-on"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("repo")]),_v(" condition in the form "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("owner_name/repo_name")])]),_v(".")]),_v(" "),_c('p',[_v("For example, if you only want Travis CI to deploy the site when it is run from the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("se-edu/se-book")]),_v(" repository, the following "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("repo")]),_v(" condition should be added to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".travis.yml")]),_v(".")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs yml"}},[_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("on:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("branch:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("master")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("repo:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("se-edu/se-book")]),_v("\n")])])]),_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("repo")]),_v(" value can be changed to your specific repository as desired.")])])],1),_v(" "),_c('panel',{attrs:{"type":"seamless","expanded":"","panelId":"deploying-via-appveyor-ci"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h4',{attrs:{"id":"deploying-via-appveyor-ci"}},[_c('span',{staticClass:"anchor",attrs:{"id":"deploying-via-appveyor-ci"}}),_v("Deploying via AppVeyor CI"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#deploying-via-appveyor-ci","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('p',[_c('strong',[_v("Adding your repository to AppVeyor CI")])]),_v(" "),_c('ol',[_c('li',[_c('p',[_c('a',{attrs:{"href":"https://ci.appveyor.com/login"}},[_v("Sign in to AppVeyor CI")]),_v(" using your Github Account.")])]),_v(" "),_c('li',[_c('p',[_v("Authorize AppVeyor App as Github App in the "),_c('a',{attrs:{"href":"https://ci.appveyor.com/authorizations"}},[_v("account settings")]),_v(" by clicking on the "),_c('em',[_v("Install AppVeyor App")]),_v(" button.")]),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/appveyorInstallGithubApp.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/appveyorInstallGithubApp.png","alt":""}})])])])],1)]),_v(" "),_c('li',[_c('p',[_v("In the "),_c('a',{attrs:{"href":"https://ci.appveyor.com/projects"}},[_v("projects directory")]),_v(", click on the "),_c('em',[_v("New Project")]),_v(" button.")]),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/appveyorAddNewProject.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/appveyorAddNewProject.png","alt":""}})])])])],1)]),_v(" "),_c('li',[_c('p',[_v("Finally, select the repository containing your Markbind site.")])])]),_v(" "),_c('p',[_c('strong',[_v("Configuring your repository in AppVeyor CI")])]),_v(" "),_c('ol',[_c('li',[_c('p',[_v("Ensure that you have generated a "),_c('a',{attrs:{"href":"#generating-a-github-personal-access-token"}},[_v("Github Personal Access token with "),_c('strong',[_v("repo")]),_v(" permissions")]),_v(".")])]),_v(" "),_c('li',[_c('p',[_v("Navigate to the project settings page of your repository in AppVeyor CI.")])]),_v(" "),_c('li',[_c('p',[_v("On the left menu, click on "),_c('strong',[_v("Environment")]),_v(".")])]),_v(" "),_c('li',[_c('p',[_v("Under the heading "),_c('strong',[_v("Environment variables")]),_v(", add a custom environment variable named "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("GITHUB_TOKEN")]),_v(", with the value set to the personal access token that was generated in the first step. "),_c('mark',[_v("Ensure that you toggle variable encryption by clicking on the padlock.")])]),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/appveyorGithubToken.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/appveyorGithubToken.png","alt":""}})])])])],1)]),_v(" "),_c('li',[_c('p',[_v("Remember to click "),_c('strong',[_v("Save")]),_v(" at the bottom of the page.")])]),_v(" "),_c('li',[_c('p',[_v("Add a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("appveyor.yml")]),_v("file at the root of your Markbind site's repository to instruct AppVeyor CI to build and deploy the site to Github Pages when you to push to your repository. More information on customizing "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("appveyor.yml")]),_v(" can be found in "),_c('a',{attrs:{"href":"https://www.appveyor.com/docs/appveyor-yml/"}},[_v("AppVeyor documentation")]),_v(". An example "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("appveyor.yml")]),_v(" file is given below:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs yml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("environment:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nodejs_version:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'10'")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("branches:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("only:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("master")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("install:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ps:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Install-Product")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("node")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("$env:nodejs_version")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("npm")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("i")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("-g")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind-cli")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("build")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("deploy")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("--ci")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("test:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("off")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("build:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("off")]),_v("\n")])])])])]),_v(" "),_c('p',[_v("Commit and push "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("appveyor.yml")]),_v(" to your github repository. Thereafter, AppVeyor CI should begin to run the build script. You are able to view the current build status by clicking on your repository in the "),_c('a',{attrs:{"href":"https://ci.appveyor.com/projects"}},[_v("AppVeyor projects page")]),_v(". Once the build succeeds, you should be able to view your Markbind site, after a few seconds, at "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("http://.github.io/")]),_v(" e.g., "),_c('a',{attrs:{"href":"http://se-edu.github.io/se-book"}},[_v("http://se-edu.github.io/se-book")]),_v(".")])]),_v(" "),_c('panel',{attrs:{"type":"seamless","expanded":"","panelId":"deploying-via-circle-ci"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h4',{attrs:{"id":"deploying-via-circle-ci"}},[_c('span',{staticClass:"anchor",attrs:{"id":"deploying-via-circle-ci"}}),_v("Deploying via Circle CI"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#deploying-via-circle-ci","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('p',[_c('strong',[_v("Adding your repository to Circle CI")])]),_v(" "),_c('ol',[_c('li',[_c('p',[_v("Ensure that you have generated a "),_c('a',{attrs:{"href":"#generating-a-github-personal-access-token"}},[_v("Github Personal Access Token with "),_c('strong',[_v("repo")]),_v(" permissions")]),_v(".")])]),_v(" "),_c('li',[_c('p',[_v("Sign in to "),_c('a',{attrs:{"href":"https://circleci.com/"}},[_v("Circle CI")]),_v(" using your Github account.")])]),_v(" "),_c('li',[_c('p',[_v("In the projects dashboard, click on the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Set Up Project")]),_v(" button beside the repo containing your Markbind site.")]),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/circleCiSetUpProject.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/circleCiSetUpProject.png","alt":""}})])])])],1)])]),_v(" "),_c('p',[_c('strong',[_v("Configuring your repository in Circle CI")])]),_v(" "),_c('ol',[_c('li',[_c('p',[_v("Once you have set up your project, click on the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Project Settings")]),_v(" button.")])]),_v(" "),_c('li',[_c('p',[_v("On the left, click on the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Environment Variables")]),_v(" tab and add a custom Environment Variable, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("GITHUB_TOKEN")]),_v(", which contains the value of your Github Personal Access Token.")]),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/circleCiGithubToken.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/circleCiGithubToken.png","alt":""}})])])])],1)]),_v(" "),_c('li',[_c('p',[_v("Commit and push a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("config.yml")]),_v(" file to the repo containg your Markbind Site that instructs Circle CI to build and deploy your Markbind site to Github Pages whenever you push to your repository. Ensure that the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("config.yml")]),_v(" file is located in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("/.circleci/")]),_v(" directory. A sample "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("config.yml")]),_v(" file is shown below:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs yml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("jobs:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("Build-And-Deploy:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("docker:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("image:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'cimg/base:stable'")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("steps:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("checkout")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("node/install:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("node-version:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"10\"")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("npm-version:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"6\"")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("install-yarn:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-literal"}},[_v("false")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("run:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("node")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("--version")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("run:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("npm")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("i")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("-g")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind-cli")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("run:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("build")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("run:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("deploy")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("--ci")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("version:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("2.1")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("orbs:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("node:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("circleci/node@4.1.0")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("workflows:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("Deploy-Markbind-Site:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("jobs:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Build-And-Deploy")]),_v("\n")])])])])]),_v(" "),_c('p',[_v("After you have pushed the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("config.yml")]),_v(" file to your remote repo, you should see Circle CI starting to run the Deploy job in your projects dashboard. Once it is successful, you should be able to view your Markbind site at "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("http://.github.io/")]),_v(".")]),_v(" "),_c('p',[_v("For more information on customizing your build script, you may refer to "),_c('a',{attrs:{"href":"https://circleci.com/docs/2.0/configuration-reference/#section=configuration"}},[_v("Circle CI Config Reference Document")]),_v(".")])]),_v(" "),_c('hr'),_v(" "),_m(15),_v(" "),_c('p',[_c('strong',[_v("You can setup "),_c('a',{attrs:{"href":"https://www.netlify.com/"}},[_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("a platform for deploying static webpages (among other things)")]),_v("Netlify")])]),_v("\nto automatically build and deploy your site on their platform every time your GitHub repo is updated.")])]),_v(" "),_c('p',[_v("Here are the steps to set up Netlify:")]),_v(" "),_c('ol',[_m(16),_v(" "),_m(17),_v(" "),_c('li',[_c('p',[_v("Select your git provider")]),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/netlifyPreview1.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/netlifyPreview1.png","alt":""}})])])])],1)]),_v(" "),_c('li',[_c('p',[_v("Select your markbind site repository")]),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/netlifyPreview2.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/netlifyPreview2.png","alt":""}})])])])],1)]),_v(" "),_c('li',[_m(18),_v(" "),_m(19),_v(" "),_c('br'),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/netlifyPreview3.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/netlifyPreview3.png","alt":""}})])])])],1)])]),_v(" "),_c('p',[_v("Now your site will be deployed on Netlify at the given address specified after deployment. It will be updated automatically when the default branch of your repo is updated.")]),_v(" "),_m(20),_v(" "),_c('p',[_c('strong',[_v("If you are hosting your Markbind project on Github, you can setup "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("Pull Request previews")]),_v("PR previews")]),_v(" in order to automatically build and deploy the modified Markbind site based on the changes in the PR.")])]),_v(" "),_m(21),_v(" "),_m(22),_v(" "),_m(23),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/netlifyPreview4.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/netlifyPreview4.png","alt":""}})])])])],1),_v(" "),_m(24),_v(" "),_m(25),_v(" "),_m(26),_v(" "),_c('ol',[_m(27),_v(" "),_c('li',[_m(28),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/surgeCreateAccount.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/surgeCreateAccount.png","alt":""}})])])])],1)]),_v(" "),_c('li',[_c('p',[_v("Proceed to create a Surge account. After you have set up your account, you should see the following screen:")]),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/surgeCreateAccount2.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/surgeCreateAccount2.png","alt":""}})])])])],1)]),_v(" "),_c('li',[_m(29),_v(" "),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("The rest of the "),_c('strong',[_v("Surge setup")]),_v(" is unnecessary for the purposes of setting up PR previews. You may still proceed with the rest of the setup such as setting the "),_c('em',[_v("project directory")]),_v(" and the "),_c('em',[_v("domain name")]),_v(", if you wish to.")])])],1),_v(" "),_c('li',[_m(30),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/surgeToken.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/surgeToken.png","alt":""}})])])])],1)]),_v(" "),_c('li',[_m(31),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/surgeAddToken.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/surgeAddToken.png","alt":""}})])])])],1)]),_v(" "),_m(32)]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("receivePR.yml")]),_v(" File")])]},proxy:true}])},[_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs yml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Receive")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Markbind")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("PR")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("# read-only")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("# no access to secrets")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("on:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("pull_request:")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("jobs:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("build:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("runs-on:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("ubuntu-latest")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("steps:")]),_v(" \n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uses:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("actions/checkout@v2")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Install")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Node")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uses:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("actions/setup-node@v2")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("with:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("node-version:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("10")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Build")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Markbind")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("website")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("run:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("|")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(" npm install -g markbind-cli")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(" markbind build")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}}),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Save")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("PR")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("number")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("and")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("HEAD")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("commit")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("if:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("${{")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("success()")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("&&")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("github.event_name")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("==")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'pull_request'")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("}}")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("run:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("|")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(" mkdir -p ./pr")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(" echo ${{ github.event.number }} > ./pr/NUMBER")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(" echo ${{ github.event.pull_request.head.sha }} > ./pr/SHA")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}}),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Upload")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("artifacts")]),_v(" \n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("if:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("${{")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("success()")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("&&")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("github.event_name")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("==")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'pull_request'")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("}}")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uses:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("actions/upload-artifact@v2")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("with:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind-deployment")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("path:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("|")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(" ./_site")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(" ./pr")]),_v("\n")])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("previewPR.yml")]),_v(" File")])]},proxy:true}])},[_v(" "),_c('box',{attrs:{"type":"important"}},[_c('p',[_c('strong',[_v("Setting up the PR URL")])]),_v(" "),_c('p',[_v("In "),_c('strong',[_v("line 34")]),_v(" of the workflow code below, you are required to update the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("PR_URL")]),_v(" according to your needs. We recommend just changing the section "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" to something that can easily identify your Markbind project repository.")]),_v(" "),_c('p',[_v("For example, if the name of your repository is "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("MyRepo")]),_v(", and it is managed under an organization "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("MyOrganization")]),_v(", you could replace "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("myorganization-myrepo")]),_v(" and your PR Preview will be deployed at the following url: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("https://pr--myorganization-myrepo.surge.sh")]),_v(".")]),_v(" "),_c('p',[_v("Advanced users may completely replace the default "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("PR_URL")]),_v(". "),_c('mark',[_c('strong',[_v("It is recommended to test your workflow code on a test repo before using it for your Markbind project repo.")])])])]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs yml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Deploy")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("PR")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Preview")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("# Runs after PR is received and build by markbind-cli")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("# Has access to repo secrets")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("on:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("workflow_run:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("workflows:")]),_v(" ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Receive Markbind PR\"")]),_v("]\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("types:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("completed")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("jobs:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("build:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("runs-on:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("ubuntu-latest")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Deploying")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("to")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("surge")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("steps:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uses:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("actions/checkout@v2")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Download")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("built")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("MarkBind")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("site")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("artifacts")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uses:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("dawidd6/action-download-artifact@v2")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("with:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("workflow:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("receivePR.yml")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("run_id:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("${{")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("github.event.workflow_run.id")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("}}")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind-deployment")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("path:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(".")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Extract")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("PR")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("number")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("pr-number")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("run:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("echo")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'::set-output name=ACTIONS_PR_NUMBER::'")]),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("$(cat")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("./pr/NUMBER)")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Install")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Node")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uses:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("actions/setup-node@v2")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("with:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("node-version:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("10")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Build")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("PR")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("preview")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("url")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("pr-url")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("run:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("|")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(" PR_URL=\"https://pr-${{ steps.pr-number.outputs.ACTIONS_PR_NUMBER }}-.surge.sh/\"")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(" echo '::set-output name=ACTIONS_PREVIEW_URL::'$PR_URL")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}}),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Install")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("surge")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("and")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("deploy")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("PR")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("to")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("surge")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("run:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("|")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(" npm i -g surge")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(" surge --project ./_site --domain ${{ steps.pr-url.outputs.ACTIONS_PREVIEW_URL }}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}}),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("env:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("SURGE_TOKEN:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("${{")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("secrets.SURGE_TOKEN")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("}}")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Find")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("existing")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("PR")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("preview")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("link")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("comment")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uses:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("peter-evans/find-comment@v1")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("fc")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("with:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("issue-number:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("${{")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("steps.pr-number.outputs.ACTIONS_PR_NUMBER")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("}}")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("body-includes:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Your")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("PR")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("can")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("be")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("previewed")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Comment")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("PR")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("preview")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("link")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("in")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("PR")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("if:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("${{")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("steps.fc.outputs.comment-id")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("==")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("0")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("}}")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uses:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("peter-evans/create-or-update-comment@v1")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("with:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("issue-number:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("${{")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("steps.pr-number.outputs.ACTIONS_PR_NUMBER")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("}}")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("body:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("|")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(" Thank you for submitting the Pull Request! :thumbsup: ")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}}),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Your")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("PR")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("can")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("be")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("previewed")]),_v(" ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("here")]),_v("]"),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("(${{")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("steps.pr-url.outputs.ACTIONS_PREVIEW_URL")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("}})")]),_v("\n")]),_c('span',[_v("\n")])])])],1),_v(" "),_m(33),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/surgeGithubActionsBot.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/surgeGithubActionsBot.png","alt":""}})])])])],1),_v(" "),_m(34),_v(" "),_m(35),_v(" "),_c('panel',{attrs:{"type":"seamless","expand-headerless":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Configuring Online Deployment platforms to use specific MarkBind version")])]},proxy:true}])},[_v(" "),_c('div',[_c('h5',{attrs:{"id":"configuring-online-deployment-platforms-to-use-specific-markbind-version"}},[_c('span',{staticClass:"anchor",attrs:{"id":"configuring-online-deployment-platforms-to-use-specific-markbind-version"}}),_c('span',{staticClass:"fas fa-info",attrs:{"aria-hidden":"true"}}),_v(" Configuring Online Deployment platforms to use specific MarkBind version"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#configuring-online-deployment-platforms-to-use-specific-markbind-version","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Configuring CI platforms to use specific MarkBind version")])]),_v(" "),_c('p',[_v("When the "),_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html#using-ci-platforms"}},[_v("default CI configuration for deployment")]),_v(" is used, the latest version of MarkBind will be used in the CI workflows. This may be a later version of MarkBind than the one you use locally.")]),_v(" "),_c('ul',[_c('li',[_c('p',[_v("If you want to specify a version of MarkBind (eg. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("v1.6.3")]),_v("), you have to modify the step where "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind-cli")]),_v(" is being installed to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("npm i -g markbind-cli@v1.6.3")]),_v(". For example, for Travis-CI, you can modifiy the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("install")]),_v(" step in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".travis.yml")]),_v(" as follows:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs yaml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("install:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("npm")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("i")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("-g")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind-cli@1.6.3")]),_v("\n")])])])]),_v(" "),_c('li',[_c('p',[_v("If you want to use the latest minor version automatically until the next major version (as major versions usually contain breaking changes), you can add a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("^")]),_v(" in front of the version number. In the example below, Travis will use the latest version of MarkBind but will stop before "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("2.*")])]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs yaml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("install:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("npm")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("i")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("-g")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind-cli@^1.6.3")]),_v("\n")])])])])]),_v(" "),_c('p',[_c('strong',[_v("Setting up Netlify to use a specific version of MarkBind")])]),_v(" "),_c('p',[_v("Here are the steps to set up Netlify to use a specific version of MarkBind.")]),_v(" "),_c('ol',[_c('li',[_c('p',[_v("Navigate to the root directory of your site.")])]),_v(" "),_c('li',[_c('p',[_v("Run "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("npm init")]),_v(" which will create "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("package.json")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("package.lock.json")])])]),_v(" "),_c('li',[_c('p',[_v("Run "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("npm install markbind-cli@1.6.3 --save")]),_v(" to install markbind as a dependency (using v1.6.3 as an example)")])]),_v(" "),_c('li',[_c('p',[_v("Create / Update "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".gitignore")]),_v(" file in the root directory and add:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs"}},[_c('span',[_v("node_modules\n")])])])]),_v(" "),_c('li',[_c('p',[_v("Update "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("ignore")]),_v(" in site.json to include")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs"}},[_c('span',[_v("node_modules/*\n")]),_c('span',[_v(".gitignore\n")])])])]),_v(" "),_c('li',[_c('p',[_v("Now, follow the "),_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html#deploying-to-netlify"}},[_v("previous instructions for setting up Netlify")]),_v(" but with the following difference:"),_c('br'),_v("\nIn step 5, Set the "),_c('mark',[_v("Build Command")]),_v(" to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind build --baseUrl")])])])])])]),_v(" "),_m(36),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})],1),_v(" "),_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"},[_c('overlay-source',{staticClass:"nav nav-pills flex-column my-0 small no-flex-wrap",attrs:{"id":"mb-page-nav","tag-name":"nav","to":"mb-page-nav"}},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#deploying-the-site"}},[_v("Deploying the Site‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#generic-steps-for-deploying-a-markbind-site"}},[_v("Generic steps for deploying a MarkBind site‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#deploying-to-github-pages"}},[_v("Deploying to Github Pages‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#using-the-markbind-deploy-command"}},[_v("Using the markbind deploy command‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#using-ci-platforms"}},[_v("Using CI Platforms‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#generating-a-github-personal-access-token"}},[_v("Generating a Github Personal Access Token‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#deploying-via-github-actions"}},[_v("Deploying via Github Actions‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#deploying-via-travis-ci"}},[_v("Deploying via Travis CI‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#deploying-via-appveyor-ci"}},[_v("Deploying via AppVeyor CI‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#deploying-via-circle-ci"}},[_v("Deploying via Circle CI‎")])])]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#deploying-to-netlify"}},[_v("Deploying to Netlify‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#previewing-pull-requests-for-markbind-sites"}},[_v("Previewing Pull Requests for MarkBind sites‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#previewing-prs-using-netlify"}},[_v("Previewing PRs using Netlify‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#previewing-prs-using-surge"}},[_v("Previewing PRs using Surge‎")])]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#relevant-tips-and-amp-tricks"}},[_v("Relevant Tips & Tricks‎")])])])],1)])],1),_v(" "),_m(37)])} +}; + var pageVueStaticRenderFns = [function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}},[_v("Deploying the Site")])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_c('em',[_v("User Guide → Deploying the Site")])])])])} +},function anonymous( +) { +with(this){return _c('h1',{attrs:{"id":"deploying-the-site"}},[_c('span',{staticClass:"anchor",attrs:{"id":"deploying-the-site"}}),_v("Deploying the Site"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#deploying-the-site","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p',[_c('strong',[_v("A site generated by MarkBind can be deployed by simply uploading the generated files to any Web server.")]),_v(" In addition, MarkBind provides several convenient deployment options.\n")])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"generic-steps-for-deploying-a-markbind-site"}},[_c('span',{staticClass:"anchor",attrs:{"id":"generic-steps-for-deploying-a-markbind-site"}}),_v("Generic steps for deploying a MarkBind site"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#generic-steps-for-deploying-a-markbind-site","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('ol',[_c('li',[_v("Set the "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#baseurl"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")]),_v(" property of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" file")]),_v(" to match the deploy location.")]),_v(" "),_c('li',[_v("(Optional) Use the "),_c('a',{attrs:{"href":"/userGuide/cliCommands.html#serve-command"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind serve")]),_v(" command")]),_v(" to stage the site locally and confirm the contents are as expected.")]),_v(" "),_c('li',[_v("Use the "),_c('a',{attrs:{"href":"/userGuide/cliCommands.html#build-command"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind build")]),_v(" command")]),_v(" to generate the site from source files. That command puts the generated site files in a directory named "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_site")]),_v(" (you can change the output directory using parameters supplied to the command).")]),_v(" "),_c('li',[_v("Upload the site files to the Web server. The sections below explain how to automate this step if you are deploying to some online platforms.")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Steps for deploying multiple MarkBind sites:")])])} +},function anonymous( +) { +with(this){return _c('ol',[_c('li',[_v("Create multiple "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" files. Ensure that the "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#baseurl"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")]),_v(" property of each "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" file")]),_v(" matches its deploy location.")]),_v(" "),_c('li',[_v("(Optional) Use the "),_c('a',{attrs:{"href":"/userGuide/cliCommands.html#serve-command"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind serve -s ")]),_v(" command")]),_v(" to stage each site locally and confirm the contents are as expected.")]),_v(" "),_c('li',[_v("For each site:\n"),_c('ol',[_c('li',[_v("Use the "),_c('a',{attrs:{"href":"/userGuide/cliCommands.html#build-command"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind build -s ")]),_v(" command")]),_v(" to generate the site from source files.")]),_v(" "),_c('li',[_v("Upload the site files to the Web server. The sections below explain how to automate this step if you are deploying to some online platforms.")])])])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"deploying-to-github-pages"}},[_c('span',{staticClass:"anchor",attrs:{"id":"deploying-to-github-pages"}}),_v("Deploying to Github Pages"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#deploying-to-github-pages","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("MarkBind can easily deploy a site to "),_c('a',{attrs:{"href":"https://help.github.com/categories/github-pages-basics/"}},[_v("Github pages")])]),_v(" if the project root directory is also a GitHub repo.")])} +},function anonymous( +) { +with(this){return _c('h3',{attrs:{"id":"using-the-markbind-deploy-command"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-the-markbind-deploy-command"}}),_v("Using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind deploy")]),_v(" command"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-the-markbind-deploy-command","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("Running the "),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind deploy")])]),_v(" command will deploy the most recent build of your site to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("gh-pages")]),_v(" branch of the repo "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("origin")]),_v(" and will be available\nAfter the command is completed, your site will be online at "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("http://.github.io/")]),_v(" e.g., "),_c('a',{attrs:{"href":"http://se-edu.github.io/se-book"}},[_v("http://se-edu.github.io/se-book")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('p',[_v("You can override the default deployment settings "),_c('span',{staticClass:"dimmed"},[_v("(e.g., repo/branch to deploy)")]),_v(" in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v("'s "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("deploy")]),_v(" section:")])} +},function anonymous( +) { +with(this){return _c('h3',{attrs:{"id":"using-ci-platforms"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-ci-platforms"}}),_v("Using CI Platforms"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-ci-platforms","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("You can setup CI Platforms to automatically build and deploy your site on GitHub Pages every time your GitHub repo is updated.")])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"deploying-to-netlify"}},[_c('span',{staticClass:"anchor",attrs:{"id":"deploying-to-netlify"}}),_v("Deploying to Netlify"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#deploying-to-netlify","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('li',[_c('p',[_v("Go to "),_c('a',{attrs:{"href":"https://app.netlify.com/"}},[_v("https://app.netlify.com/")]),_v(" and sign up")])])} +},function anonymous( +) { +with(this){return _c('li',[_c('p',[_v("Next go to "),_c('a',{attrs:{"href":"https://app.netlify.com/account/sites"}},[_v("https://app.netlify.com/account/sites")]),_v(" and select "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("New site from Git")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("Update the build settings as follows and hit "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Deploy site")]),_v(":")])} +},function anonymous( +) { +with(this){return _c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Build Command")]),_v(": "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("npm i markbind-cli -g && markbind build --baseUrl")])]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Publish directory")]),_v(": "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_site")])]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Show advanced")]),_v(": Add a new variable with the key as "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("NODE_VERSION")]),_v(" and the value as "),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("12")]),_v(" or higher")])])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"previewing-pull-requests-for-markbind-sites"}},[_c('span',{staticClass:"anchor",attrs:{"id":"previewing-pull-requests-for-markbind-sites"}}),_v("Previewing Pull Requests for MarkBind sites"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#previewing-pull-requests-for-markbind-sites","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h3',{attrs:{"id":"previewing-prs-using-netlify"}},[_c('span',{staticClass:"anchor",attrs:{"id":"previewing-prs-using-netlify"}}),_v("Previewing PRs using Netlify"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#previewing-prs-using-netlify","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("By following the "),_c('a',{attrs:{"href":"#deploying-to-netlify"}},[_v("steps to deploy to Netlify")]),_v(" in the previous section, you would automatically be able to preview PRs.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("You can "),_c('em',[_v("preview")]),_v(" the updated site at the bottom of the pull request by clicking on "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("details")]),_v(" link in the PR:")])} +},function anonymous( +) { +with(this){return _c('p',[_v("For more information on previewing PRs with Netlify, you may refer to "),_c('a',{attrs:{"href":"https://www.netlify.com/tags/deploy-previews/"}},[_v("Netlify's docs")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('h3',{attrs:{"id":"previewing-prs-using-surge"}},[_c('span',{staticClass:"anchor",attrs:{"id":"previewing-prs-using-surge"}}),_v("Previewing PRs using Surge"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#previewing-prs-using-surge","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("You may also preview PRs using "),_c('a',{attrs:{"href":"https://surge.sh/"}},[_v("Surge")]),_v(", which is an NPM package that does static web publishing. Here are the steps to do so:")])} +},function anonymous( +) { +with(this){return _c('li',[_c('p',[_v("First install Surge using by typing "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("npm install --global surge")]),_v(" on your terminal.")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("Next, type "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("surge")]),_v(" in the terminal. You should see the following prompt:")])} +},function anonymous( +) { +with(this){return _c('p',[_v("Hit "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("CTRL-C")]),_v(" on your keyboard to quit the current running Surge process.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("Next, type "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("surge token")]),_v(" to generate your surge token.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("In the repo of your markbind site, create a new secret by going to \"Settings\"->\"Secrets\" and naming it as "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("SURGE_TOKEN")]),_v(" and setting its value to the value of the generated surge token.")])} +},function anonymous( +) { +with(this){return _c('li',[_c('p',[_v("Commit and push the following 2 files into your markbind site repo, in the directory "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("/.github/workflows/")]),_v(".")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("Finally, you may open a PR to the repo of your Markbind site. If everything is configured correctly, after a few minutes, you should be able to see a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("github-actions bot")]),_v(" automatically commenting on the PR with a link to "),_c('em',[_v("preview")]),_v(" the updated Markbind site.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("For more information on Surge, you may refer to "),_c('a',{attrs:{"href":"https://surge.sh/help/"}},[_v("Surge's docs")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"relevant-tips-and-amp-tricks"}},[_c('span',{staticClass:"anchor",attrs:{"id":"relevant-tips-and-amp-tricks"}}),_v("Relevant Tips & Tricks"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#relevant-tips-and-amp-tricks","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-left"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/themes.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Themes")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-right"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_c('span',[_c('span',[_v("MarkBind in the Project Workflow")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} +},function anonymous( +) { +with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 3.1.1")]),_v(" on Sat, 22 Jan 2022, 16:49:34 UTC]")]),_c('br'),_v(" "),_c('small',[_v("This site is powered by "),_c('a',{attrs:{"href":"https://www.netlify.com/"}},[_v("Netlify")]),_v(".")])])])])} +}]; + \ No newline at end of file diff --git a/userGuide/formattingContents.html b/userGuide/formattingContents.html new file mode 100644 index 0000000..a52f5a6 --- /dev/null +++ b/userGuide/formattingContents.html @@ -0,0 +1,415 @@ + + + + + + + + MarkBind - User Guide: Formatting Contents + + + + + + + + + + + + + + + + +

          Formatting Contents

          User Guide → Formatting Contents

          Formatting Contents

          MarkBind supports a wide collection of Markdown-like basic content formatting syntax such as text styling, tables, lists, images, links, etc.

          Headings

          You can prepend the heading text with 1-6 # characters to indicate headings of levels 1-6.

          CODE:

          ### Heading level 3
+...
+###### Heading level 6
+

          OUTPUT:

          Heading level 3

          ...

          Heading level 6

          MarkBind auto-generates anchors for all headings.
          +If the heading text is Foo Bar (Goo), the ID of the generated anchor will be foo-bar-goo (all lower case, special characters omitted, joined by -).

          Alternative syntax, more info: https://www.markdownguide.org/basic-syntax#headings

          ### Heading level 3
+...
+###### Heading level 6
+

          Heading level 3

          ...

          Heading level 6

          Paragraphs

          Use one or more empty lines to separate paragraphs.

          CODE:

          This is the first paragraph.
+
+This is another paragraph. This is the second sentence.
+

          OUTPUT:

          This is the first paragraph.

          This is another paragraph. This is the second sentence.

          This is the first paragraph.
+
+This is another paragraph. This is the second sentence.
+

          Line Breaks

          The preferred way to indicate line breaks is to use a <br> tag.

          CODE:

          This is the second sentence.<br>
+This should be on a new line.
+This will not be in a new line.
+

          OUTPUT:

          This is the second sentence.
          +This should be on a new line. +This will not be in a new line.

          Text Styles

          Markdown text styles:

          CODE:

          **Bold**, _Italic_, ___Bold and Italic___, `Inline Code`
+

          OUTPUT:

          Bold, Italic, Bold and Italic, Inline Code

          Additional syntax from GFMD:

          CODE:

          ~~Strike through~~
+

          OUTPUT:

          Strike through

          Syntax added by MarkBind:

          CODE:

          ****Super Bold****, !!Underline!!, ==Highlight==, %%Dim%%, ++Large++, --Small--, Super^script^, Sub~script~
+->Center-align<-
+

          OUTPUT:

          Super Bold, Underline, Highlight, Dim, Large, Small, Superscript, Subscript

          Center-align

          Alternative syntax: https://www.markdownguide.org/basic-syntax#emphasis

          **Bold**, _Italic_, ___Bold and Italic___, `Inline Code`
+~~Strike through~~, ****Super Bold****, !!Underline!!, ==Highlight==, %%Dim%%, ++Large++, --Small--, Super^script^, Sub~script~
+

          Bold, Italic, Bold and Italic, Inline Code Strike through, Super Bold, Underline, Highlight, Dim, Large, Small, Superscript, Subscript

          Blockquotes

          CODE:

          Normal text
+> Blockquote, first paragraph
+>
+> Second paragraph
+>> Nested quoteblock
+

          OUTPUT:

          Normal text

          Blockquote, first paragraph

          Second paragraph

          Nested quoteblock

          Alternatively, you can use <blockquote> tags:

          CODE:

          Normal text
+<blockquote>
+Blockquote, first paragraph
+
+Second paragraph
+<blockquote>
+Nested blockquote
+</blockquote>
+</blockquote>
+

          OUTPUT:

          Normal text

          +Blockquote, first paragraph +

          Second paragraph

          +Nested blockquote +

          More info: https://www.markdownguide.org/basic-syntax#blockquotes-1

          > Blockquote, first paragraph
+>
+> Second paragraph
+>> Nested blockquote
+

          Blockquote, first paragraph

          Second paragraph

          Nested blockquote +

          Lists

          Unordered lists:

          CODE:

          * Item 1
+  * Sub item 1.1
+  * Sub item 1.2<br>
+    Second line
+    * Sub item 1.2.1
+* Item 2
+* Item 3
+

          OUTPUT:

          • Item 1 +
            • Sub item 1.1
            • Sub item 1.2
              +Second line +
              • Sub item 1.2.1
          • Item 2
          • Item 3

          Ordered lists:

          CODE:

          1. Item 1
+   1. Sub item 1.1
+   1. Sub item 1.2
+1. Item 2
+1. Item 3
+

          OUTPUT:

          1. Item 1 +
            1. Sub item 1.1
            2. Sub item 1.2
          2. Item 2
          3. Item 3
          +You can also start an ordered list at a particular number by changing the + +first number +
          Example

          CODE:

          10. Item 1
+   1. Sub item 1.1
+   1. Sub item 1.2
+1. Item 2
+

          OUTPUT:

          1. Item 1
          2. Sub item 1.1
          3. Sub item 1.2
          4. Item 2
          ! +

          More info on above list types: https://www.markdownguide.org/basic-syntax#lists

          Task lists (from GFMD):

          CODE:

          - [ ] Item 1
+   - [ ] Sub item 1.1
+   - [x] Sub item 1.2
+- [x] Item 2
+- [ ] Item 3
+

          OUTPUT:

          • Item 1 +
            • Sub item 1.1
            • Sub item 1.2
          • Item 2
          • Item 3

          Radio-button lists:

          CODE:

          - ( ) Item 1
+- ( ) Item 2
+- (x) Item 3
+

          OUTPUT:

          1. Item 1
+   1. Sub item 1.1
+   1. Sub item 1.2
+* Item 2
+  * item 2.1
+- [ ] Item 3
+- [x] Item 4
+- ( ) Item 5
+
          1. Item 1 +
            1. Sub item 1.1
            2. Sub item 1.2
          • Item 2 +
            • item 2.1
          • Item 3
          • Item 4

          Code

          Themes

          MarkBind can present formatted code blocks, be it fenced or inline, with either light or dark themes. The default is dark.

          Refer here for configuring MarkBind to use a specific theme for the code blocks.

          Fenced Code

          MarkBind provides several features, some of which are added on top of the existing functionality of Markdown's fenced code blocks.

          More info: https://www.markdownguide.org/extended-syntax#fenced-code-blocks

          Features:

          • Syntax coloring
          • Line numbering
          • Line highlighting
          • Code block headers
          Syntax coloring

          To enable syntax coloring, specify a language next to the backticks before the fenced code block.

          CODE:

          ```xml
+<foo>
+  <bar type="name">goo</bar>
+</foo>
+```
+

          OUTPUT:

          <foo>
+  <bar type="name">goo</bar>
+</foo>
+
          Line numbering

          Line numbers are provided by default. To hide line numbers, add the class no-line-numbers to the code block as below

          CODE:

          ```xml {.no-line-numbers}
+<foo>
+  <bar type="name">goo</bar>
+</foo>
+```
+

          OUTPUT:

          <foo>
+  <bar type="name">goo</bar>
+</foo>
+

          You can have your line numbers start with a value other than 1 with the start-from attribute.

          CODE:

          ```js {start-from=6}
+function add(a, b) {
+    return a + b;
+}
+```
+

          OUTPUT:

          function add(a, b) {
+    return a + b;
+}
+
          Line highlighting

          You can add the highlight-lines attribute to add highlighting to your code block. Refer to the example code block +below for a visual demonstration of all the possible ways of highlighting a code block.

          CODE:

          ```java {highlight-lines="1[:],3['Inventory'],4['It\'s designed'],5,6[8:18],8[0::2],12[:]-14,16-18,20[12:]-22,24[1::]-26"}
+import java.util.List;
+
+// Inventory is a class that stores inventory items in a list.
+// It's designed as a thin wrapper on the List interface.
+public class Inventory {
+    private List<Item> items;
+
+    public int getItemCount(){
+        return items.size();
+    }
+
+    public bool isEmpty() {
+        return items.isEmpty();
+    }
+
+    public Item getItem(idx: int) {
+        return items.get(idx);
+    }
+
+    public void addItem(item: Item) {
+        return items.add(item);
+    }
+
+    public void removeItem(item: Item) {
+        return items.remove(item);
+    }
+}
+```
+

          OUTPUT:

          import java.util.List;
+
+// Inventory is a class that stores inventory items in a list.
+// It's designed as a thin wrapper on the List interface.
+public class Inventory {
+    private List<Item> items;
+
+    public int getItemCount(){
+        return items.size();
+    }
+
+    public bool isEmpty() {
+        return items.isEmpty();
+    }
+
+    public Item getItem(idx: int) {
+        return items.get(idx);
+    }
+
+    public void addItem(item: Item) {
+        return items.add(item);
+    }
+
+    public void removeItem(item: Item) {
+        return items.remove(item);
+    }
+}
+

          The value of highlight-lines is composed of highlight rules, separated by commas. +These rules dictate where and how MarkBind should highlight your code block.

          You can specify the highlight rules in many different ways, each is detailed as follows:

          Type Format Example
          Full text highlight
          Highlights the entirety of the text portion of the line          		 The line numbers as-is (subject to the starting line number set in start-from). 3, 5
          Substring highlight
          Highlights all occurrences of a substring in the line          		 lineNumber[part]

          Limitations: part must be wrapped in quotes. If part contains a quote, escape it with a backslash (\).          		 3['Inventory'],4['It\'s designed']
          Character-bounded highlight
          Highlights a specific range of characters in the line          		 lineNumber[start:end], highlights from character position start up to (but not including) end.

          Character positions start from 0 as the first non-whitespace character, upwards.

          Omit either start/end to highlight from the start / up to the end, respectively.          		 19[1:5],30[10:],35[:20]
          Word-bounded highlight
          Highlights a specific range of words in the line          		 lineNumber[start::end], highlights from word position start up to (but not including) end.

          Word positions start from 0 as the first word (sequence of non-whitespace characters), upwards.

          Omit either start/end to highlight from the start / up to the end, respectively.          		 5[2::4],9[1::],11[::5]
          Full line highlight
          Highlights the entirety of the line          		 lineNumber[:] 7[:]

          Not only a single line, MarkBind is also capable of highlighting ranges of lines in various ways. In general, the syntax +for range highlighting consists of two single line highlight rules as listed above joined by a dash (-).

          Type Format Example
          Ranged full text highlight
          Highlights from the first non-whitespace character to the last non-whitespace character          		 lineStart-lineEnd 2-4
          Ranged full line highlight
          Like ranged full text highlight, but highlights the entirety of the lines          		 lineStart[:]-lineEnd or lineStart-lineEnd[:] 1[:]-5,10-12[:]
          Ranged character-bounded highlight
          Highlights the text portion of the lines within the range, but starts/ends at an arbitrary character          		 lineStart[start:]-lineEnd or lineStart-lineEnd[:end] 3[2:]-7, 4-9[:17]
          Ranged word-bounded highlight
          Like ranged character-bounded highlight, but starts/ends at an arbitrary word          		 lineStart[start::]-lineEnd or lineStart-lineEnd[::end] 16[1::]-20,22-24[::3]
          Heading

          To add a heading, add the attribute heading with the heading text as the value, as shown below.

          CODE:

          ```xml {heading="Heading title"}
+<foo>
+  <bar type="name">goo</bar>
+</foo>
+```
+

          OUTPUT:

          Heading title
          <foo>
+  <bar type="name">goo</bar>
+</foo>
+

          Headings support inline Markdown, except for Inline Code and Dim text styles.

          CODE:

          ```{heading="**Bold**, _Italic_, ___Bold and Italic___, ~~Strike through~~, ****Super Bold****, !!Underline!!, ==Highlight==, :+1: :exclamation: :x: :construction:<br>We support page breaks"}
+<foo></foo>
+```
+

          OUTPUT:

          Bold, Italic, Bold and Italic, Strike through, Super Bold, Underline, Highlight, 👍 ❗️ ❌ 🚧
          We support page breaks
          <foo></foo>
+
          Using multiple features

          You can also use multiple features together, as shown below.

          CODE:

          ```xml {highlight-lines="2" heading="Heading title"}
+<foo>
+  <bar type="name">goo</bar>
+</foo>
+```
+

          OUTPUT:

          Heading title
          <foo>
+  <bar type="name">goo</bar>
+</foo>
+
          Copy button

          A copy button can be added to code blocks using the codeBlockCopyButtons plugin:

          User Guide: Using Plugins → Plugin: codeBlockCopyButtons


          Wrap text button

          A wrap text button can be added to code blocks using the codeBlockWrapButtons plugin:

          User Guide: Using Plugins → Plugin: codeBlockWrapButtons


          Inline Code

          Syntax coloring

          MarkBind can apply syntax-coloring on inline code too.

          CODE:

          Consider the xml code `<bar type="name">goo</bar>`{.xml},<br>
+or the java code `public static void main(String[] args)`{.java}.
+

          OUTPUT:

          Consider the xml code <bar type="name">goo</bar>,
          +or the java code public static void main(String[] args).

          ```xml
+<foo>
+  <bar type="name">goo</bar>
+</foo>
+```
+
          `<bar type="name">goo</bar>`{.xml}
+
           
          <foo>
+  <bar type="name">goo</bar>
+</foo>
+

          Syntax coloring for inline code: <bar type="name">goo</bar> too!

          Horizontal Rules

          Use three or more asterisks (***), dashes (---), or underscores (___) to indicate a horizontal line.

          CODE:

          *****
+-----
+______________
+

          OUTPUT:

          Different Types Of Horizontal Rules

          Add additional classes to modify the style, thickness, and color of a horizontal line.

          Available style classes:

          • dotted
          • dashed
          • double

          CODE:

          --- {.dotted}
+
+--- {.dashed}
+
+--- {.double}
+

          OUTPUT:

          Available size classes:

          • thick
          • thick-1
          • thick-2
          • thick-3

          CODE:

          --- {.thick}
+
+--- {.thick-1}
+
+--- {.thick-2}
+
+--- {.thick-3}
+

          OUTPUT:

          Available color classes (use any of the available BootStrap border color classes):

          • border-info
          • border-primary
          • etc

          CODE:

          --- {.border-primary}
+
+--- {.border-secondary}
+
+--- {.border-danger}
+
+--- {.border-info}
+
+--- {.border-success}
+

          OUTPUT:

          Add a comibnation of the above classes to further customize the style of a horizontal line.

          CODE:

          --- {.dashed .thick-3}
+
+--- {.double .border-secondary}
+
+--- {.dotted .thick-1 .border-primary}
+

          OUTPUT:

          *****
+-----
+______________
+

          Basic style:

          CODE:

          MarkBind home is at [here](https://markbind.org).
+

          OUTPUT:

          MarkBind home is at here.

          Reference style links (i.e., specify the URL in a separate place):

          CODE:

          MarkBind home is at [here][1].
+
+[1]: https://markbind.org
+

          OUTPUT:

          MarkBind home is at here.

          More info: https://www.markdownguide.org/basic-syntax#links

          MarkBind home is at [here](https://markbind.org).
+
+MarkBind home is at [here][1].
+
+[1]: https://markbind.org
+

          MarkBind home is at here. +

          Footnotes

          CODE:

          **Normal footnotes:**
+Here is a footnote reference,[^1] and another.[^longnote]
+
+[^1]: Here is the footnote. Footnotes will appear at the bottom of the page.
+
+[^longnote]: Here's one with multiple blocks.
+
+    Subsequent paragraphs are indented to show that they
+belong to the previous footnote.
+
+
+**Inline footnotes:**
+Here is an inline note.^[Inlines notes are easier to write, since
+you don't have to pick an identifier and move down to type the
+note.]
+

          OUTPUT:

          Normal footnotes: +Here is a footnote reference, [1] and another. [2]

          Inline footnotes: +Here is an inline note. [3]

          Normal footnotes won't work when used inside the attributes of markbind components! +
          +For example, it won't work in the header attribute of panels.

          **Normal footnotes:**
+Here is a footnote reference,[^1] and another.[^longnote]
+
+[^1]: Here is the footnote. Footnotes will appear at the bottom of the page.
+
+[^longnote]: Here's one with multiple blocks.
+    Subsequent paragraphs are indented to show that they
+belong to the previous footnote.
+
           +1 + 1 = 2 ^[Math] +

          Images

          CODE:

          ![](https://markbind.org/images/logo-lightbackground.png)
+

          OUTPUT:

          + URLs can be specified as relative references. More info in: Intra-Site Links
          ![alt text here](https://markbind.org/images/logo-lightbackground.png "title here")
+

          Classes, Attributes & Identifiers

          Most markdown syntax above this section supports adding classes, attributes and identifiers +using pandoc syntax without the need for a wrapper html element.

          The syntax is {.class-name attribute="value" attribute=value #id}, which is placed at different locations depending +on the type of markdown.

          CODE:

          Apply classes, attributes, identifiers to block level markdown (eg. paragraphs, headings)
+by leaving a space before '{' {.text-success #attribute-example}
+
+#### heading {.text-info}
+
+--- {.border-danger}
+
+Apply the same to inline markdown (eg. bold text) by
+omitting the **space**{.text-primary .bg-light header="attributes example"}
+<!-- Use inspect element on the **space** word below to see the "header" attribute! -->
+

          OUTPUT:

          Apply classes, attributes, identifiers to block level markdown (eg. paragraphs, headings) +by leaving a space before '{'

          heading

          Apply the same to inline markdown (eg. bold text) by +omitting the space

          Some other types of markdown have different placements of the curly group {...}.

          Unordered and Ordered lists

          CODE:

          * Apply to the list item itself like so {.text-success #list-item-id}
+  * Curly groups after newlines apply to the closest nested list {.text-danger}
+{.bg-light}
+* Curly groups two lines after the last line apply to the top most list
+
+{.alert-info}
+

          OUTPUT:

          • Apply to the list item itself like so +
            • Curly groups after newlines apply to the closest nested list
          • Curly groups two lines after the last line apply to the top most list

          Fenced code blocks

          Refer to the above section!

          For a more detailed guide, see: https://www.npmjs.com/package/markdown-it-attrs

          +Formatting features listed above this section support this syntax for attributes, classes and identifiers. +Those below this section do not. +
          add a space before '{' for block level markdown {.class-name attribute="value" attribute=value #id}
+
+don't add a space for **inline**{.text-danger} markdown
+

          For a more detailed guide, see: https://www.npmjs.com/package/markdown-it-attrs

          +* Apply to the list item itself like so {.text-success #list-item-id} + * Curly groups after newlines apply to the closest nested list {.text-danger} +{.bg-light} +* Curly groups two lines after the last line apply to the top most list + +{.alert-info} +

          Tables

          CODE:

          Animal | Trainable?| Price | Remarks
+:----- | :-------: | ----: | ----
+Ants   | no        | 5     |
+Bees   | no        | 20    |
+Cats|yes|100|
+

          OUTPUT:

          Animal Trainable? Price Remarks
          Ants no 5
          Bees no 20
          Cats yes 100
          • Colons (:) in the 2nd line are optional and they indicates whether to left/center/right-align the values in that column.
          • There is no need to align pipe symbols to be on a vertical line; it's just for aesthetic purposes only.

          More info: https://www.markdownguide.org/extended-syntax#tables

          Animal | Trainable?| Price | Remarks
+:----- | :-------: | ----: | ----
+Ants   | no        | 5     |
+Bees   | no        | 20    |
+Cats|yes|100|
+
          Animal Trainable? Price Remarks
          Ants no 5
          Bees no 20
          Cats yes 100

          Emoji

          CODE:

          :+1: :exclamation: :x: :construction:
+

          OUTPUT:

          👍 ❗️ ❌ 🚧

          the list of supported emoji.

          :+1: :exclamation: :x: :construction:
+

          👍 ❗️ ❌ 🚧 +

          Icons

          Acknowledgement: Font Awesome icons are provided by Font Awesome under their free license, Glyphicons are provided by Glyphicons via Bootstrap 3, Octicons are copyright of GitHub, and Material icons are provided by Google Fonts via material-icons by Ravindra Marella under the Apache license 2.0.

          MarkBind supports using Font Icons provided by Font Awesome, Glyphicons and GitHub's Octicons.

          +The advantage of font icons over emojis is font icons can be styled to fit your needs. e.g.,

          • emoji: Don't judge the 📖 by it's cover! 👎
          • font icons: Don't judge the by it's cover!

          The syntax for icons has changed, and the earlier {{ prefix_name }} syntax has been deprecated.
          +Please use the new :prefix-name: syntax instead.

          Using Font Awesome Icons

          1. Decide which icon you want to use from the list of available icons.

          2. Construct the MarkBind name for the selected icon by adding the type prefix. +Note: Font Awesome has three different styles for their icons, each with their own type prefix. Here is an example from each type:

            • Solid (prefix: fas-) e.g., (actual name file-code, MarkBind name fas-file-code)
            • Regular (prefix: far-) e.g., (actual name file-code, MarkBind name far-file-code)
            • Brands (prefix: fab-): e.g., (actual name github-alt, MarkBind name fab-github-alt)

          3. Insert MarkBind name for the icon enclosed within colons to get the icon in your page.
            Create a **branch**:fas-code-branch: now! → Create a branch now!

          Using Glyphicons
          1. Decide which icon you want to use from list of provided glyphicons.
          2. Insert the name for the icon enclosed within colons to get the icon in your page.
            Move to the right!:glyphicon-hand-right: → Move to the right!

          :glyphicon-hand-right: :fab-github: :fas-home:

          Using Octicons
          1. Decide which icon you want to use from list of available Octicons.
          2. Insert the name for the icon enclosed within colons to get the icon in your page.
            Merge a **pull request** :octicon-git-pull-request: → Merge a pull request
          3. You may also append ~class-name to the end of the octicon name to add class="class-name" property to your Octicon (e.g. :octicon-git-pull-request~icon-large-red: will generate an Octicon of class icon-large-red). You may then add corresponding CSS to {root}/_markbind/layouts/{layout-name}/styles.css to customize the style of your Octicon.
          4. If your background is dark, you may use :octiconlight-*: to render the icon as white.
          Using Material Icons

          1. Decide which icon you want to use from list of available icons.

          2. Construct the MarkBind name for the selected icon by writing the icon name in lowercase letters only, replacing any spaces between the words in the name with dashes (-), then adding the type prefix. +Note: Google has five different styles for their Material icons, each with their own type prefix. Here is an example from each type:

            • Filled (prefix: mif-) e.g. (actual name Perm Media, MarkBind name mif-perm-media)
            • Outlined (prefix: mio-) e.g., (actual name Perm Media, MarkBind name mio-perm-media)
            • Rounded (prefix: mir-): e.g., (actual name Perm Media, MarkBind name mir-perm-media)
            • Sharp (prefix: mis-): e.g., (actual name Perm Media, MarkBind name mis-perm-media)
            • Two tone (prefix: mit-): e.g., (actual name Perm Media, MarkBind name mit-perm-media)

          3. Insert the name for the icon enclosed within colons to get the icon in your page.
            Download from Cloud :mio-cloud-download: → Download from Cloud

          Embeds

          There are easy ways to embed media content such as YouTube videos and PowerPoint slides.

          Embedding Youtube Videos

          Here are three ways of embedding YouTube videos and one example of how it will look in the page.

          CODE:

          @[youtube](v40b3ExbM0c)
+@[youtube](http://www.youtube.com/watch?v=v40b3ExbM0c)
+@[youtube](http://youtu.be/v40b3ExbM0c)
+

          OUTPUT:

          More media blocks, embedding services and additional options can be found in Markdown-it documentation.

          Embedding Powerpoint Slides (using the embed url from Powerpoint online)

          Here is an example of embedding a PowerPoint slide deck:

          CODE:

          @[powerpoint](https://onedrive.live.com/embed?cid=A5AF047C4CAD67AB&resid=A5AF047C4CAD67AB%212070&authkey=&em=2)
+

          OUTPUT:

          @[youtube](v40b3ExbM0c)
+@[youtube](http://www.youtube.com/watch?v=v40b3ExbM0c)
+@[youtube](http://youtu.be/v40b3ExbM0c)
+
+@[powerpoint](https://onedrive.live.com/embed?cid=A5AF047C4CAD67AB&resid=A5AF047C4CAD67AB%212070&authkey=&em=2)
+

          Embedded YouTube video:

          Embedded slide deck:

          Dates

          Markbind supports date formatting and simple calculations as a Nunjucks filter.

          Syntax: {{ baseDate | date(format, daysToAdd) }}

          20 days after 1st Jan 2020:

          {{ "2020-01-01" | date("ddd, Do MMM, YYYY", 20) }} Tue, 21st Jan, 2020

          The baseDate follows the format: YYYY-MM-DD

          The default output format is "ddd D MMM" e.g. Fri 6 Mar

          Using variables

          {% set base1 = "2020-01-01" %}
          {% set format1 = "DD MM YYYY" %}
          {% set format2 = "ddd Do MMM (DD/MM/YYYY)" %}

          {{ base1 | date }} Wed 1 Jan

          Custom formatting

          {{ base1 | date(format1) }} 01 01 2020

          Adding days

          {{ base1 | date(format2, 0) }} Wed 1st Jan (01/01/2020)
          {{ base1 | date(format2, 10) }} Sat 11th Jan (11/01/2020)

          Page variables

          Dates can be supplied using page variables for convenience.

          Inside variables.md or referencing page:

          {% set date_pagevar = "2020-03-06" %}
+

          {{ date_pagevar | date(format2) }} Fri 6th Mar (06/03/2020)

          Advanced Formatting

          The output date can be formatted to suit your needs by specifying a format string as an argument to the date filter.

          Default format: "ddd D MMM" e.g. Fri 6 Mar

          Brief reference

          Full formatting reference available here.

          Example

          CODE:

          {% set base1 = "2019-08-12" %}
          {% set format1 = "DD MM YYYY" %}
          {% set format2 = "ddd Do MM" %}
          {{ base1 | date }} ``
          {{ base1 | date(format1) }} ``
          {{ base1 | date(format1, 10) }} ``
          {{ base1 | date(format2, 10) }} ``

          OUTPUT:

          Mon 12 Aug
          +12 08 2019
          +22 08 2019
          +Thu 22/08

          {{ "2019-08-12" | date("DD.MM.YYYY", 10) }} ``

          22.08.2019 +

          Math Formulae

          Markbind supports typesetting TeX math equations. KaTeX is used as a fast math renderer.

          Insert inline equations by enclosing them in round brackets \( ... \).

          Insert display equations by enclosing them in square brackets \[ ... \].

          Insert numbered display equations by enclosing the equation square brackets and the equation number in curly brackets \[ ... \] (1).

          CODE:

          Solve the following simultaneous equations:
+
+\[ 3x + y = 11 \] (1)
+
+\[\frac{2x}{3} + \frac{2y}{3} = 8\] (2)
+
+Euler's equation \( e^{i\pi}+1=0 \) is a beautiful equation.
+

          OUTPUT:

          Solve the following simultaneous equations:

          3x+y=11 3x + y = 11 (1)
          2x3+2y3=8\frac{2x}{3} + \frac{2y}{3} = 8(2)

          Euler's equation eiπ+1=0 e^{i\pi}+1=0 is a beautiful equation.

          If your equation requires special Nunjucks tags like {{ or }},use a +raw-endraw block:

          {% raw %}\(e^{{\frac{1}{3}} + 1}\){% endraw %}
+

          More info on allowed symbols: https://katex.org/docs/support_table.html

          
+Solve the following simultaneous equations:
+
+\[ 3x + y = 11 \] (1)
+
+\[\frac{2x}{3} + \frac{2y}{3} = 8\] (2)
+
+Euler's equation \( e^{i\pi}+1=0 \) is a beautiful equation.
+
+

          Solve the following simultaneous equations:

          3x+y=11 3x + y = 11 (1)
          2x3+2y3=8\frac{2x}{3} + \frac{2y}{3} = 8(2)

          Euler's equation eiπ+1=0 e^{i\pi}+1=0 is a beautiful equation.

          Relevant Tips & Tricks

          Escaping Characters

          MarkBind Syntax Overview

          Using Components


            Here is the footnote. Footnotes will appear at the bottom of the page.

            Here's one with multiple blocks.

            Subsequent paragraphs are indented to show that they +belong to the previous footnote.

            Inlines notes are easier to write, since +you don't have to pick an identifier and move down to type the +note.

          1. Here is the footnote. Footnotes will appear at the bottom of the page.

          2. Here's one with multiple blocks.

            Subsequent paragraphs are indented to show that they +belong to the previous footnote.

          3. Inlines notes are easier to write, since +you don't have to pick an identifier and move down to type the +note.

          + + + diff --git a/userGuide/formattingContents.page-vue-render.js b/userGuide/formattingContents.page-vue-render.js new file mode 100644 index 0000000..83e264f --- /dev/null +++ b/userGuide/formattingContents.page-vue-render.js @@ -0,0 +1,841 @@ + + var pageVueRenderFn = function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',[_c('header',{attrs:{"fixed":""}},[_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/index.html","title":"Home"}},[_c('img',{attrs:{"src":"/images/logo-darkbackground.svg","height":"20"}})])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('form',{staticClass:"navbar-form"},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback,"menu-align-right":""}})],1)])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/index.html"}},[_v("HOME")])]),_v(" "),_c('div',{attrs:{"tags":"environment--ug"}},[_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"sibling-or-child","href":"/userGuide/index.html"}},[_v("USER GUIDE")])])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/showcase.html"}},[_v("SHOWCASE")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/about.html"}},[_v("ABOUT")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_c('span',[_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}})])])])])],1)]),_v(" "),_c('div',{attrs:{"id":"flex-body"}},[_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"site-nav","tag-name":"nav","to":"site-nav"}},[_c('div',{staticClass:"site-nav-top"},[_c('div',{staticClass:"font-weight-bold mb-2",staticStyle:{"font-size":"1.25rem"}},[_v("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tipsAndTricks.html"}},[_v("Tips & Tricks")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/glossary.html"}},[_v("Glossary")])])])])])])],1)],1)]),_v(" "),_c('div',{staticClass:"fixed-header-padding",attrs:{"id":"content-wrapper"}},[_m(0),_v(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_c('div',[_m(4),_v(" "),_m(5),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_m(6),_v(" "),_m(7),_v(" "),_m(8),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('h3',{attrs:{"id":"heading-level-3"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-3"}}),_v("Heading level 3"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-3","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("...")]),_v(" "),_c('h6',{attrs:{"id":"heading-level-6"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-6"}}),_v("Heading level 6"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-6","onclick":"event.stopPropagation()"}})])])],1)])]),_v(" "),_m(9),_v(" "),_m(10),_v(" "),_m(11),_v(" "),_m(12)]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(13),_v(" "),_c('p',[_v("Use one or more empty lines to separate paragraphs.")]),_v(" "),_c('div',[_m(14),_v(" "),_m(15),_v(" "),_m(16),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("This is the first paragraph.")]),_v(" "),_c('p',[_v("This is another paragraph. This is the second sentence.")])])],1)]),_v(" "),_m(17)]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(18),_v(" "),_m(19),_v(" "),_c('div',[_m(20),_v(" "),_m(21),_v(" "),_m(22),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("This is the second sentence."),_c('br'),_v("\nThis should be on a new line.\nThis will not be in a new line.")])])],1)])]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(23),_v(" "),_c('p',[_v("Markdown text styles:")]),_v(" "),_c('span',{attrs:{"id":"main-example-markdown"}},[_c('div',[_m(24),_v(" "),_m(25),_v(" "),_m(26),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('strong',[_v("Bold")]),_v(", "),_c('em',[_v("Italic")]),_v(", "),_c('em',[_c('strong',[_v("Bold and Italic")])]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Inline Code")])])])],1)])]),_v(" "),_c('p',[_v("Additional syntax from GFMD:")]),_v(" "),_c('div',[_m(27),_v(" "),_m(28),_v(" "),_m(29),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('s',[_v("Strike through")])])])],1)]),_v(" "),_c('p',[_v("Syntax added by MarkBind:")]),_v(" "),_c('span',{attrs:{"id":"main-example-markbind"}},[_c('div',[_m(30),_v(" "),_m(31),_v(" "),_m(32),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('strong',[_c('strong',[_v("Super Bold")])]),_v(", "),_c('span',{staticClass:"underline"},[_v("Underline")]),_v(", "),_c('mark',[_v("Highlight")]),_v(", "),_c('span',{staticClass:"dimmed"},[_v("Dim")]),_v(", "),_c('span',{staticClass:"large"},[_v("Large")]),_v(", "),_c('span',{staticClass:"small"},[_v("Small")]),_v(", Super"),_c('sup',[_v("script")]),_v(", Sub"),_c('sub',[_v("script")])]),_c('div',{staticClass:"text-center"},[_v("Center-align")]),_c('p')])],1)])]),_v(" "),_m(33),_v(" "),_m(34),_v(" "),_m(35),_c('p')]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(36),_v(" "),_c('div',[_m(37),_v(" "),_m(38),_v(" "),_m(39),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Normal text")]),_v(" "),_c('blockquote',[_c('p',[_v("Blockquote, first paragraph")]),_v(" "),_c('p',[_v("Second paragraph")]),_v(" "),_c('blockquote',[_c('p',[_v("Nested quoteblock")])])])])],1)]),_v(" "),_m(40),_v(" "),_c('div',[_m(41),_v(" "),_m(42),_v(" "),_m(43),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Normal text")]),_v(" "),_c('blockquote',[_v("\nBlockquote, first paragraph\n"),_c('p',[_v("Second paragraph")]),_v(" "),_c('blockquote',[_v("\nNested blockquote\n")])])])],1)]),_v(" "),_m(44),_v(" "),_m(45),_v(" "),_m(46),_c('p')]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(47),_v(" "),_m(48),_v(" "),_c('div',[_m(49),_v(" "),_m(50),_v(" "),_m(51),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ul',[_c('li',[_v("Item 1\n"),_c('ul',[_c('li',[_v("Sub item 1.1")]),_v(" "),_c('li',[_v("Sub item 1.2"),_c('br'),_v("\nSecond line\n"),_c('ul',[_c('li',[_v("Sub item 1.2.1")])])])])]),_v(" "),_c('li',[_v("Item 2")]),_v(" "),_c('li',[_v("Item 3")])])])],1)]),_v(" "),_m(52),_v(" "),_c('div',[_m(53),_v(" "),_m(54),_v(" "),_m(55),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ol',[_c('li',[_v("Item 1\n"),_c('ol',[_c('li',[_v("Sub item 1.1")]),_v(" "),_c('li',[_v("Sub item 1.2")])])]),_v(" "),_c('li',[_v("Item 2")]),_v(" "),_c('li',[_v("Item 3")])])])],1)]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_v("\nYou can also start an ordered list at a particular number by changing the\n"),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"popover"}},[_v("\nfirst number\n"),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_c('div',{staticStyle:{"text-align":"center","margin-bottom":"5px"}},[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])],1),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("10.")]),_v(" Item 1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" 1.")]),_v(" Sub item 1.1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" 1.")]),_v(" Sub item 1.2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 2\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ol',{staticClass:"pl-0 ml-0",attrs:{"start":"10"}},[_c('li',[_v("Item 1")]),_v(" "),_c('li',[_v("Sub item 1.1")]),_v(" "),_c('li',[_v("Sub item 1.2")]),_v(" "),_c('li',[_v("Item 2")])])])],1)])])]),_v("!\n")]),_v(" "),_m(56),_v(" "),_m(57),_v(" "),_c('span',{attrs:{"id":"main-example-gfmd"}},[_c('div',[_m(58),_v(" "),_m(59),_v(" "),_m(60),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ul',{staticClass:"contains-task-list"},[_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"type":"checkbox"}}),_v(" Item 1\n"),_c('ul',{staticClass:"contains-task-list"},[_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"type":"checkbox"}}),_v(" Sub item 1.1")]),_v(" "),_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"checked":"","type":"checkbox"}}),_v(" Sub item 1.2")])])]),_v(" "),_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"checked":"","type":"checkbox"}}),_v(" Item 2")]),_v(" "),_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"type":"checkbox"}}),_v(" Item 3")])])])],1)])]),_v(" "),_m(61),_v(" "),_c('div',{attrs:{"id":"main-example-markbind"}},[_c('div',[_m(62),_v(" "),_m(63),_v(" "),_m(64),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ul',{staticClass:"radio-list",attrs:{"radio-group":"e5b87"}},[_c('li',{staticClass:"radio-list-item"},[_c('label',[_c('input',{staticClass:"radio-list-input",attrs:{"name":"e5b87","type":"radio"}}),_v(" Item 1")])]),_v(" "),_c('li',{staticClass:"radio-list-item"},[_c('label',[_c('input',{staticClass:"radio-list-input",attrs:{"name":"e5b87","type":"radio"}}),_v(" Item 2")])]),_v(" "),_c('li',{staticClass:"radio-list-item"},[_c('label',[_c('input',{staticClass:"radio-list-input",attrs:{"checked":"","name":"e5b87","type":"radio"}}),_v(" Item 3")])])])])],1)])]),_v(" "),_m(65),_v(" "),_m(66)],1),_v(" "),_c('hr'),_v(" "),_c('div',[_m(67),_v(" "),_m(68),_v(" "),_m(69),_v(" "),_m(70),_v(" "),_m(71),_v(" "),_m(72),_v(" "),_m(73),_v(" "),_c('p',[_v("Features:")]),_v(" "),_m(74),_v(" "),_m(75),_v(" "),_c('p',[_v("To enable syntax coloring, specify a language next to the backticks before the fenced code block.")]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_m(76),_v(" "),_m(77),_v(" "),_m(78),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])],1)])]),_v(" "),_m(79),_v(" "),_m(80),_v(" "),_c('div',[_m(81),_v(" "),_m(82),_v(" "),_m(83),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])],1)]),_v(" "),_m(84),_v(" "),_c('div',[_m(85),_v(" "),_m(86),_v(" "),_m(87),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pre',[_c('code',{pre:true,attrs:{"style":"counter-reset: line 5;","class":"hljs js"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("function")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("add")]),_v("("),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("a, b")]),_v(") ")]),_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" a + b;\n")]),_c('span',[_v("}\n")])])])])],1)]),_v(" "),_m(88),_v(" "),_m(89),_v(" "),_c('div',[_m(90),_v(" "),_m(91),_v(" "),_m(92),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs java"}},[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("import")]),_v(" java.util.List;\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_c('span',[_v("// "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("Inventory")]),_v(" is a class that stores inventory items in a list.")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_c('span',[_v("// "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("It's designed")]),_v(" as a thin wrapper on the List interface.")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-class"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("class")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("Inventory")]),_v(" ")]),_v("{")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("private")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("List")]),_v(" items;\n")])]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword highlighted"}},[_v("public")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")]),_c('span',{pre:true,attrs:{"class":"hljs-keyword highlighted"}},[_v("int")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("getItemCount")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("()")])]),_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.size();\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" bool "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("isEmpty")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("()")]),_v(" ")]),_v("{\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.isEmpty();\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" }\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" Item "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("getItem")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("(idx: "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("int")]),_v(")")]),_v(" ")]),_v("{")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.get(idx);")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("}")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("void")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title highlighted"}},[_v("addItem")]),_c('span',{pre:true,attrs:{"class":"hljs-params highlighted"}},[_v("(item: Item)")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")])]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("{")]),_v("\n")])]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.add(item);")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("}")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword highlighted"}},[_v("void")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")]),_c('span',{pre:true,attrs:{"class":"hljs-title highlighted"}},[_v("removeItem")]),_c('span',{pre:true,attrs:{"class":"hljs-params highlighted"}},[_v("(item: Item)")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")])]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("{")]),_v("\n")])]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.remove(item);")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("}")]),_v("\n")]),_c('span',[_v("}\n")])])])])],1)]),_v(" "),_m(93),_v(" "),_c('p',[_v("You can specify the highlight rules in many different ways, each is detailed as follows:")]),_v(" "),_m(94),_m(95),_v(" "),_m(96),_m(97),_v(" "),_m(98),_v(" "),_c('div',[_m(99),_v(" "),_m(100),_v(" "),_m(101),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Heading title")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Heading title","class":"hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])])])],1)]),_v(" "),_m(102),_v(" "),_c('div',[_m(103),_v(" "),_m(104),_v(" "),_m(105),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading inline-markdown-heading"},[_c('span',[_c('strong',[_v("Bold")]),_v(", "),_c('em',[_v("Italic")]),_v(", "),_c('em',[_c('strong',[_v("Bold and Italic")])]),_v(", "),_c('s',[_v("Strike through")]),_v(", "),_c('strong',[_c('strong',[_v("Super Bold")])]),_v(", "),_c('span',{staticClass:"underline"},[_v("Underline")]),_v(", "),_c('mark',[_v("Highlight")]),_v(", 👍 ❗️ ❌ 🚧"),_c('br'),_v("We support page breaks")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"**Bold**, _Italic_, ___Bold and Italic___, ~~Strike through~~, ****Super Bold****, !!Underline!!, ==Highlight==, :+1: :exclamation: :x: :construction:
          We support page breaks","class":"hljs"}},[_c('span',[_v("\n")])])])])])])],1)]),_v(" "),_m(106),_v(" "),_c('p',[_v("You can also use multiple features together, as shown below.")]),_v(" "),_c('div',[_m(107),_v(" "),_m(108),_v(" "),_m(109),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Heading title")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Heading title","class":"hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])])])],1)]),_v(" "),_m(110),_v(" "),_m(111),_v(" "),_c('panel',{attrs:{"type":"seamless","popup-url":"usingPlugins.html#plugin-codeblockcopybuttons"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("User Guide: Using Plugins → Plugin: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockCopyButtons")])])])]},proxy:true}])},[_v(" "),_c('div',[_c('h3',{attrs:{"id":"plugin-codeblockcopybuttons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugin-codeblockcopybuttons"}}),_v("Plugin: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockCopyButtons")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-codeblockcopybuttons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("This plugin adds a "),_c('em',[_v("copy")]),_v(" button to fenced code blocks so that readers can copy the code easily.")]),_v(" "),_c('p',[_v("To enable it, simply add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockCopyButtons")]),_v(" to your site's plugins.")]),_v(" "),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugins\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"codeBlockCopyButtons\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v("}\n")])])])])]),_c('p',[_v("This is what it'll look like once added:")]),_v(" "),_c('pic',{attrs:{"src":"/images/copyCode.png","width":"750","alt":"copyCode"}})],1)]),_v(" "),_c('br'),_v(" "),_m(112),_v(" "),_m(113),_v(" "),_c('panel',{attrs:{"type":"seamless","popup-url":"usingPlugins.html#plugin-codeblockwrapbuttons"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("User Guide: Using Plugins → Plugin: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockWrapButtons")])])])]},proxy:true}])},[_v(" "),_c('div',[_c('h3',{attrs:{"id":"plugin-codeblockwrapbuttons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugin-codeblockwrapbuttons"}}),_v("Plugin: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockWrapButtons")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-codeblockwrapbuttons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("This plugin adds a "),_c('em',[_v("wrap text")]),_v(" button to fenced code blocks so that readers can read long lines of code without scrolling sideways.")]),_v(" "),_c('p',[_v("To enable it, simply add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockWrapButtons")]),_v(" to your site's plugins.")]),_v(" "),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugins\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"codeBlockWrapButtons\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v("}\n")])])])])]),_c('p',[_v("This is what it'll look like once added:")]),_v(" "),_c('pic',{attrs:{"src":"/images/wrapCodeOff.png","width":"750","alt":"wrapCodeOff"}}),_v(" "),_c('p',[_v("Clicking the "),_c('em',[_v("wrap text")]),_v(" button will result in the following:")]),_v(" "),_c('pic',{attrs:{"src":"/images/wrapCodeOn.png","width":"750","alt":"wrapCodeOn"}}),_v(" "),_c('p',[_v("In case a single long word is encountered, it will be split across multiple lines similar to the following:")]),_v(" "),_c('pic',{attrs:{"src":"/images/wrapCodeOnWordBreak.png","width":"750","alt":"wrapCodeOnWordBreak"}})],1)]),_v(" "),_c('br'),_v(" "),_m(114),_v(" "),_m(115),_v(" "),_c('p',[_v("MarkBind can apply syntax-coloring on inline code too.")]),_v(" "),_c('div',[_m(116),_v(" "),_m(117),_v(" "),_m(118),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Consider the xml code "),_c('code',{pre:true,attrs:{"class":"hljs inline xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v(","),_c('br'),_v("\nor the java code "),_c('code',{pre:true,attrs:{"class":"hljs inline java"}},[_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("static")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("void")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("main")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("(String[] args)")])])]),_v(".")])])],1)]),_v(" "),_m(119),_v(" "),_m(120)],1),_v(" "),_c('hr'),_v(" "),_c('div',[_m(121),_v(" "),_m(122),_v(" "),_c('div',[_m(123),_v(" "),_m(124),_v(" "),_m(125),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('hr'),_v(" "),_c('hr'),_v(" "),_c('hr')])],1)]),_v(" "),_m(126),_v(" "),_c('p',[_v("Add additional classes to modify the style, thickness, and color of a horizontal line.")]),_v(" "),_c('p',[_v("Available style classes:")]),_v(" "),_m(127),_v(" "),_c('div',[_m(128),_v(" "),_m(129),_v(" "),_m(130),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('hr',{staticClass:"dotted"}),_v(" "),_c('hr',{staticClass:"dashed"}),_v(" "),_c('hr',{staticClass:"double"})])],1)]),_v(" "),_c('p',[_v("Available size classes:")]),_v(" "),_m(131),_v(" "),_c('div',[_m(132),_v(" "),_m(133),_v(" "),_m(134),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('hr',{staticClass:"thick"}),_v(" "),_c('hr',{staticClass:"thick-1"}),_v(" "),_c('hr',{staticClass:"thick-2"}),_v(" "),_c('hr',{staticClass:"thick-3"})])],1)]),_v(" "),_c('p',[_v("Available color classes (use any of the available BootStrap border color classes):")]),_v(" "),_m(135),_v(" "),_c('div',[_m(136),_v(" "),_m(137),_v(" "),_m(138),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('hr',{staticClass:"border-primary"}),_v(" "),_c('hr',{staticClass:"border-secondary"}),_v(" "),_c('hr',{staticClass:"border-danger"}),_v(" "),_c('hr',{staticClass:"border-info"}),_v(" "),_c('hr',{staticClass:"border-success"})])],1)]),_v(" "),_c('p',[_v("Add a comibnation of the above classes to further customize the style of a horizontal line.")]),_v(" "),_c('div',[_m(139),_v(" "),_m(140),_v(" "),_m(141),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('hr',{staticClass:"dashed thick-3"}),_v(" "),_c('hr',{staticClass:"double border-secondary"}),_v(" "),_c('hr',{staticClass:"dotted thick-1 border-primary"})])],1)]),_v(" "),_m(142),_v(" "),_m(143)]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(144),_v(" "),_c('p',[_v("Basic style:")]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_m(145),_v(" "),_m(146),_v(" "),_m(147),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("MarkBind home is at "),_c('a',{attrs:{"href":"https://markbind.org"}},[_v("here")]),_v(".")])])],1)])]),_v(" "),_m(148),_v(" "),_c('div',[_m(149),_v(" "),_m(150),_v(" "),_m(151),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("MarkBind home is at "),_c('a',{attrs:{"href":"https://markbind.org"}},[_v("here")]),_v(".")])])],1)]),_v(" "),_m(152),_v(" "),_m(153),_v(" "),_c('div',{attrs:{"id":"intraSiteLinks"}},[_c('p',[_v("Links to files of the generated site (e.g., an HTML page or an image file) can be specified either as relative paths or absolute paths.")]),_v(" "),_m(154),_v(" "),_c('div',{staticClass:"indented"},[_m(155),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Click [here](index.md)")]),_v(" --- "),_c('em',[_v("auto-conversion")]),_v(" ---> "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Click [here](index.html)")])],1),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("If you wish to disable the auto-conversion, you may use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-convert")]),_v(" attribute in your link.")]),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Click [here](index.md){no-convert}")])],1)])],1),_v(" "),_m(156),_v(" "),_c('div',{staticClass:"indented"},[_m(157),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Here's how to specify a link to (1) a page, and (2) an image, using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{{ baseUrl }}")]),_v(":")],1),_v(" "),_m(158),_v(" "),_c('box',{attrs:{"type":"important"}},[_c('p',[_v("To ensure that links in the "),_c('code',{pre:true},[_v("_markbind/")]),_v(" folder work correctly across the entire site, they should be written as absolute paths, prepended with "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{{ baseUrl }}")]),_v(".")])])],1),_v(" "),_m(159),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Assuming that we have the following folder structure:")],1),_v(" "),_m(160),_m(161),_v(" "),_m(162),_m(163),_v(" "),_m(164),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Relative links to resources (e.g. images, hrefs) should be valid "),_c('strong',[_v("relative to the file where the link is defined")]),_v(".")]),_v(" "),_c('p',[_v("In the example above, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("image.png")]),_v(" is in the same directory as "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("subsite.md")]),_v(". Thus, the correct path is "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("image.png")]),_v(" and not "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("textbook/image.png")]),_v(".")])])],1),_v(" "),_m(165),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_v("Links will be validated when generating a site and a warning will be displayed in the console for every link that is invalid.")]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_c('strong',[_v("Disabling link validation")])]),_v(" "),_c('p',[_v("Link validation is enabled by default.")]),_v(" "),_c('p',[_v("If you wish to only disable validation for a "),_c('strong',[_v("specific link")]),_v(", you may use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-validation")]),_v(" attribute.")]),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Click [here](index.md){no-validation}")])],1),_v(" "),_c('p',[_v("However, if you wish to disable this feature "),_c('strong',[_v("entirely")]),_v(", you may simply modify your "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" like "),_c('trigger',{attrs:{"for":"pop:global-intralink-disable","placement":"bottom","trigger":"click"}},[_v(" this ")]),_v(".")],1),_v(" "),_c('b-modal',{ref:"pop:global-intralink-disable",attrs:{"id":"pop:global-intralink-disable","hide-footer":"","size":"","modal-class":"mb-zoom"},scopedSlots:_u([{key:"modal-title",fn:function(){return [_v("Disabling global intra-site link validation in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")])]},proxy:true}])},[_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs js"}},[_c('span',[_v("...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"intrasiteLinkValidation\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"enabled\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-literal"}},[_v("false")]),_v("\n")]),_c('span',[_v("},\n")]),_c('span',[_v("...\n")])])])])])],1)],1)]),_v(" "),_m(166),_v(" "),_m(167),_c('p')]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(168),_v(" "),_c('span',{attrs:{"id":"main-example-markbind"}},[_c('div',[_m(169),_v(" "),_m(170),_v(" "),_m(171),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('strong',[_v("Normal footnotes:")]),_v("\nHere is a footnote reference,"),_c('trigger',{attrs:{"for":"pop:footnotefn-42-1"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-42-1"}},[_v("[1]")])])]),_v(" and another."),_c('trigger',{attrs:{"for":"pop:footnotefn-42-2"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-42-2"}},[_v("[2]")])])])],1),_v(" "),_c('p',[_c('strong',[_v("Inline footnotes:")]),_v("\nHere is an inline note."),_c('trigger',{attrs:{"for":"pop:footnotefn-42-3"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-42-3"}},[_v("[3]")])])])],1)])],1)])]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Normal footnotes won't work when used inside the attributes of markbind components!\n"),_c('br'),_v("\nFor example, it won't work in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("header")]),_v(" attribute of "),_c('a',{attrs:{"href":"/userGuide/components/presentation.html#panels"}},[_v("panels")]),_v(".")])]),_v(" "),_m(172),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_v("\n1 + 1 = 2 ^[Math]\n")])],1),_v(" "),_c('hr'),_v(" "),_c('div',[_m(173),_v(" "),_c('div',[_m(174),_v(" "),_m(175),_v(" "),_m(176),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('a',{attrs:{"href":"https://markbind.org/images/logo-lightbackground.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","alt":""}})])])])],1)]),_v(" "),_c('box',{attrs:{"type":"info"}},[_v("\n URLs can be specified as relative references. More info in: "),_c('i',[_c('a',{attrs:{"href":"#intraSiteLinks"}},[_v("Intra-Site Links")])])]),_v(" "),_m(177),_v(" "),_m(178),_c('p')],1),_v(" "),_c('hr'),_v(" "),_c('div',[_m(179),_v(" "),_m(180),_v(" "),_m(181),_v(" "),_c('div',[_m(182),_v(" "),_m(183),_v(" "),_m(184),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',{staticClass:"text-success",attrs:{"id":"attribute-example"}},[_v("Apply classes, attributes, identifiers to block level markdown (eg. paragraphs, headings)\nby leaving a space before '{'")]),_v(" "),_c('h4',{staticClass:"text-info",attrs:{"id":"heading-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-2"}}),_v("heading"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('hr',{staticClass:"border-danger"}),_v(" "),_c('p',[_v("Apply the same to inline markdown (eg. bold text) by\nomitting the "),_c('strong',{staticClass:"text-primary bg-light",attrs:{"header":"attributes example"}},[_v("space")])])])],1)]),_v(" "),_m(185),_v(" "),_m(186),_v(" "),_c('div',[_m(187),_v(" "),_m(188),_v(" "),_m(189),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ul',{staticClass:"alert-info"},[_c('li',{staticClass:"text-success",attrs:{"id":"list-item-id"}},[_v("Apply to the list item itself like so\n"),_c('ul',{staticClass:"bg-light"},[_c('li',{staticClass:"text-danger"},[_v("Curly groups after newlines apply to the closest nested list")])])]),_v(" "),_c('li',[_v("Curly groups two lines after the last line apply to the top most list")])])])],1)]),_v(" "),_m(190),_v(" "),_m(191),_v(" "),_m(192),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_v("\nFormatting features listed above this section support this syntax for attributes, classes and identifiers.\nThose below this section do not.\n")]),_v(" "),_m(193),_c('p'),_v(" "),_m(194)],1),_v(" "),_c('hr'),_v(" "),_c('div',[_m(195),_v(" "),_c('div',[_m(196),_v(" "),_m(197),_v(" "),_m(198),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',{staticStyle:{"text-align":"left"}},[_v("Animal")]),_v(" "),_c('th',{staticStyle:{"text-align":"center"}},[_v("Trainable?")]),_v(" "),_c('th',{staticStyle:{"text-align":"right"}},[_v("Price")]),_v(" "),_c('th',[_v("Remarks")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Ants")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("no")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("5")]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Bees")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("no")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("20")]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Cats")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("yes")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("100")]),_v(" "),_c('td')])])])])])],1)]),_v(" "),_m(199),_v(" "),_m(200),_v(" "),_m(201),_v(" "),_m(202),_v(" "),_c('td',{staticStyle:{"text-align":"center"}}),_v(" "),_c('td',{staticStyle:{"text-align":"right"}}),_v(" "),_c('td')]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(203),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_m(204),_v(" "),_m(205),_v(" "),_m(206),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("👍 ❗️ ❌ 🚧")])])],1)])]),_v(" "),_m(207),_v(" "),_m(208),_v(" "),_m(209),_c('p')]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(210),_v(" "),_m(211),_v(" "),_c('p',[_v("MarkBind supports using Font Icons provided by Font Awesome, Glyphicons and GitHub's Octicons.")]),_v(" "),_c('div',[_c('box',{attrs:{"border-left-color":"#00B0F0"}},[_c('p',[_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-lightbulb",attrs:{"aria-hidden":"true"}})]),_v("\nThe advantage of font icons over emojis is font icons can be "),_c('em',[_v("styled")]),_v(" to fit your needs. e.g.,")]),_v(" "),_c('ul',[_c('li',[_v("emoji: "),_c('span',{staticStyle:{"color":"purple"}},[_v("Don't judge the 📖 by it's cover! 👎")])]),_v(" "),_c('li',[_v("font icons: "),_c('span',{staticStyle:{"color":"purple"}},[_v("Don't judge the "),_c('span',{staticClass:"fas fa-book",attrs:{"aria-hidden":"true"}}),_v(" by it's cover! "),_c('span',{staticClass:"fas fa-thumbs-down",attrs:{"aria-hidden":"true"}})])])])])],1),_v(" "),_c('box',{attrs:{"type":"important"}},[_c('p',[_v("The syntax for icons has changed, and the earlier "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{{ prefix_name }}")]),_v(" syntax has been deprecated. "),_c('br'),_v("\nPlease use the new "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(":prefix-name:")]),_v(" syntax instead.")])]),_v(" "),_m(212),_v(" "),_m(213),_v(" "),_m(214),_v(" "),_m(215),_v(" "),_m(216),_v(" "),_m(217),_c('p'),_v(" "),_m(218),_v(" "),_c('ol',[_m(219),_v(" "),_c('li',[_v("Insert the name for the icon enclosed within colons to get the icon in your page."),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Merge a **pull request** :octicon-git-pull-request:")]),_v(" → Merge a "),_c('strong',[_v("pull request")]),_v(" "),_c('svg',{staticClass:"octicon octicon-git-pull-request",attrs:{"version":"1.1","width":"16","height":"16","viewBox":"0 0 16 16","aria-hidden":"true"}},[_c('path',{attrs:{"fill-rule":"evenodd","d":"M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"}})])]),_v(" "),_m(220),_v(" "),_m(221)]),_v(" "),_m(222),_v(" "),_m(223)],1),_v(" "),_c('hr'),_v(" "),_c('div',[_m(224),_v(" "),_m(225),_v(" "),_m(226),_v(" "),_c('p',[_v("Here are three ways of embedding YouTube videos and one example of how it will look in the page.")]),_v(" "),_c('div',[_m(227),_v(" "),_m(228),_v(" "),_m(229),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"block-embed block-embed-service-youtube"},[_c('iframe',{attrs:{"type":"text/html","src":"//www.youtube.com/embed/v40b3ExbM0c","frameborder":"0","width":"640","height":"390","webkitallowfullscreen":"","mozallowfullscreen":"","allowfullscreen":""}})])])],1)]),_v(" "),_m(230),_v(" "),_m(231),_v(" "),_c('p',[_v("Here is an example of embedding a PowerPoint slide deck:")]),_v(" "),_c('div',[_m(232),_v(" "),_m(233),_v(" "),_m(234),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"block-embed block-embed-service-powerpoint"},[_c('iframe',{attrs:{"type":"text/html","src":"https://onedrive.live.com/embed?cid=A5AF047C4CAD67AB&resid=A5AF047C4CAD67AB%212070&authkey=&em=2&action=embedview&wdAr=1.3333333333333333","frameborder":"0","width":"610","height":"481","webkitallowfullscreen":"","mozallowfullscreen":"","allowfullscreen":""}})])])],1)]),_v(" "),_m(235),_v(" "),_m(236)]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(237),_v(" "),_m(238),_v(" "),_m(239),_v(" "),_m(240),_v(" "),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("The baseDate follows the format: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("YYYY-MM-DD")])]),_v(" "),_c('p',[_v("The default output format is "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"ddd D MMM\"")]),_v(" e.g. Fri 6 Mar")])]),_v(" "),_m(241),_v(" "),_m(242),_v(" "),_m(243),_v(" "),_m(244),_v(" "),_m(245),_v(" "),_m(246),_v(" "),_m(247),_v(" "),_m(248),_v(" "),_m(249),_v(" "),_m(250),_v(" "),_m(251),_m(252),_v(" "),_m(253),_v(" "),_c('p',[_v("The output date can be formatted to suit your needs by specifying a format string as an argument to the date filter.")]),_v(" "),_m(254),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("Brief reference")])])]},proxy:true}])},[_v(" "),_c('p',[_v("Token | Output")]),_v(" "),_c('ul',[_c('li',[_v("| -\nD | 1\nDo | 1st\nDD | 01\nM | 1\nMM | 01\nMMM | Jan\nMMMM | January\nYY | 19\nYYYY | 2019")])])]),_v(" "),_m(255),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}})],1),_v(" "),_c('div',[_m(256),_v(" "),_c('div',{staticClass:"indented"},[_c('box',[_c('span',[_c('code',{pre:true},[_v("{"),_c('a'),_v("% set base1 = \"2019-08-12\" %}")]),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("% set format1 = \"DD MM YYYY\" %}")]),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("% set format2 = \"ddd Do MM\" %}")]),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date }}")]),_v(" ``"),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format1) }}")]),_v(" ``"),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format1, 10) }}")]),_v(" ``"),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format2, 10) }}")]),_v(" ``"),_c('br')])])],1),_v(" "),_m(257),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Mon 12 Aug"),_c('br'),_v("\n12 08 2019"),_c('br'),_v("\n22 08 2019"),_c('br'),_v("\nThu 22/08")])])],1)]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('box',[_c('span',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ \"2019-08-12\" | date(\"DD.MM.YYYY\", 10) }}")]),_v(" ``"),_c('br')])]),_v(" "),_c('p',[_v("22.08.2019\n")])],1),_v(" "),_c('p')],1),_v(" "),_c('hr'),_v(" "),_c('div',[_m(258),_v(" "),_m(259),_v(" "),_m(260),_v(" "),_m(261),_v(" "),_m(262),_v(" "),_c('div',[_m(263),_v(" "),_m(264),_v(" "),_m(265),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Solve the following simultaneous equations:")]),_v(" "),_c('section',{staticClass:"eqno"},[_c('eqn',{pre:true},[_c('span',{pre:true,attrs:{"class":"katex-display"}},[_c('span',{pre:true,attrs:{"class":"katex"}},[_c('span',{pre:true,attrs:{"class":"katex-mathml"}},[_c('math',{pre:true,attrs:{"xmlns":"http://www.w3.org/1998/Math/MathML","display":"block"}},[_c('semantics',{pre:true},[_c('mrow',{pre:true},[_c('mn',{pre:true},[_v("3")]),_c('mi',{pre:true},[_v("x")]),_c('mo',{pre:true},[_v("+")]),_c('mi',{pre:true},[_v("y")]),_c('mo',{pre:true},[_v("=")]),_c('mn',{pre:true},[_v("11")])],1),_c('annotation',{pre:true,attrs:{"encoding":"application/x-tex","v-pre":""}},[_v(" 3x + y = 11 ")])],1)],1)],1),_c('span',{pre:true,attrs:{"class":"katex-html","aria-hidden":"true"}},[_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.72777em;vertical-align:-0.08333em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("3")]),_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("x")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.625em;vertical-align:-0.19444em;"}}),_c('span',{pre:true,attrs:{"class":"mord mathnormal","style":"margin-right:0.03588em;"}},[_v("y")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.64444em;vertical-align:0em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("1")]),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("1")])])])])])]),_c('span',[_v("(1)")])],1),_v(" "),_c('section',{staticClass:"eqno"},[_c('eqn',{pre:true},[_c('span',{pre:true,attrs:{"class":"katex-display"}},[_c('span',{pre:true,attrs:{"class":"katex"}},[_c('span',{pre:true,attrs:{"class":"katex-mathml"}},[_c('math',{pre:true,attrs:{"xmlns":"http://www.w3.org/1998/Math/MathML","display":"block"}},[_c('semantics',{pre:true},[_c('mrow',{pre:true},[_c('mfrac',{pre:true},[_c('mrow',{pre:true},[_c('mn',{pre:true},[_v("2")]),_c('mi',{pre:true},[_v("x")])],1),_c('mn',{pre:true},[_v("3")])],1),_c('mo',{pre:true},[_v("+")]),_c('mfrac',{pre:true},[_c('mrow',{pre:true},[_c('mn',{pre:true},[_v("2")]),_c('mi',{pre:true},[_v("y")])],1),_c('mn',{pre:true},[_v("3")])],1),_c('mo',{pre:true},[_v("=")]),_c('mn',{pre:true},[_v("8")])],1),_c('annotation',{pre:true,attrs:{"encoding":"application/x-tex","v-pre":""}},[_v("\\frac{2x}{3} + \\frac{2y}{3} = 8")])],1)],1)],1),_c('span',{pre:true,attrs:{"class":"katex-html","aria-hidden":"true"}},[_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:2.00744em;vertical-align:-0.686em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mopen nulldelimiter"}}),_c('span',{pre:true,attrs:{"class":"mfrac"}},[_c('span',{pre:true,attrs:{"class":"vlist-t vlist-t2"}},[_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:1.32144em;"}},[_c('span',{pre:true,attrs:{"style":"top:-2.314em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord"}},[_v("3")])])]),_c('span',{pre:true,attrs:{"style":"top:-3.23em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"frac-line","style":"border-bottom-width:0.04em;"}})]),_c('span',{pre:true,attrs:{"style":"top:-3.677em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord"}},[_v("2")]),_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("x")])])])]),_c('span',{pre:true,attrs:{"class":"vlist-s"}},[_v("​")])]),_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:0.686em;"}},[_c('span')])])])]),_c('span',{pre:true,attrs:{"class":"mclose nulldelimiter"}})]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:2.00744em;vertical-align:-0.686em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mopen nulldelimiter"}}),_c('span',{pre:true,attrs:{"class":"mfrac"}},[_c('span',{pre:true,attrs:{"class":"vlist-t vlist-t2"}},[_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:1.32144em;"}},[_c('span',{pre:true,attrs:{"style":"top:-2.314em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord"}},[_v("3")])])]),_c('span',{pre:true,attrs:{"style":"top:-3.23em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"frac-line","style":"border-bottom-width:0.04em;"}})]),_c('span',{pre:true,attrs:{"style":"top:-3.677em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord"}},[_v("2")]),_c('span',{pre:true,attrs:{"class":"mord mathnormal","style":"margin-right:0.03588em;"}},[_v("y")])])])]),_c('span',{pre:true,attrs:{"class":"vlist-s"}},[_v("​")])]),_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:0.686em;"}},[_c('span')])])])]),_c('span',{pre:true,attrs:{"class":"mclose nulldelimiter"}})]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.64444em;vertical-align:0em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("8")])])])])])]),_c('span',[_v("(2)")])],1),_v(" "),_c('p',[_v("Euler's equation "),_c('eq',{pre:true},[_c('span',{pre:true,attrs:{"class":"katex"}},[_c('span',{pre:true,attrs:{"class":"katex-mathml"}},[_c('math',{pre:true,attrs:{"xmlns":"http://www.w3.org/1998/Math/MathML"}},[_c('semantics',{pre:true},[_c('mrow',{pre:true},[_c('msup',{pre:true},[_c('mi',{pre:true},[_v("e")]),_c('mrow',{pre:true},[_c('mi',{pre:true},[_v("i")]),_c('mi',{pre:true},[_v("π")])],1)],1),_c('mo',{pre:true},[_v("+")]),_c('mn',{pre:true},[_v("1")]),_c('mo',{pre:true},[_v("=")]),_c('mn',{pre:true},[_v("0")])],1),_c('annotation',{pre:true,attrs:{"encoding":"application/x-tex","v-pre":""}},[_v(" e^{i\\pi}+1=0 ")])],1)],1)],1),_c('span',{pre:true,attrs:{"class":"katex-html","aria-hidden":"true"}},[_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.907994em;vertical-align:-0.08333em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("e")]),_c('span',{pre:true,attrs:{"class":"msupsub"}},[_c('span',{pre:true,attrs:{"class":"vlist-t"}},[_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:0.824664em;"}},[_c('span',{pre:true,attrs:{"style":"top:-3.063em;margin-right:0.05em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:2.7em;"}}),_c('span',{pre:true,attrs:{"class":"sizing reset-size6 size3 mtight"}},[_c('span',{pre:true,attrs:{"class":"mord mtight"}},[_c('span',{pre:true,attrs:{"class":"mord mathnormal mtight"}},[_v("i")]),_c('span',{pre:true,attrs:{"class":"mord mathnormal mtight","style":"margin-right:0.03588em;"}},[_v("π")])])])])])])])])]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.64444em;vertical-align:0em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("1")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.64444em;vertical-align:0em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("0")])])])])]),_v(" is a beautiful equation.")],1)])],1)]),_v(" "),_c('box',{attrs:{"type":"important"}},[_c('p',[_v("If your equation requires special Nunjucks tags like "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{{")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("}}")]),_v(",use a\n"),_c('a',{attrs:{"href":"https://markbind.org/userGuide/tipsAndTricks.html#using-raw-endraw-to-display-content"}},[_v("raw-endraw block")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("{% raw %}\\(e^{{\\frac{1}{3}} + 1}\\){% endraw %}\n")])])])]),_v(" "),_m(266),_v(" "),_m(267),_v(" "),_m(268)],1),_v(" "),_c('hr'),_v(" "),_m(269),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Escaping Characters")])]},proxy:true}])},[_v(" "),_c('div',[_c('h5',{attrs:{"id":"escaping-characters"}},[_c('span',{staticClass:"anchor",attrs:{"id":"escaping-characters"}}),_c('span',{staticClass:"fas fa-lightbulb",attrs:{"aria-hidden":"true"}}),_v(" Escaping Characters"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#escaping-characters","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("For Markdown syntax: To display a literal character that are normally used for Markdown formatting, add a backslash ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\\")]),_v(") in front of the character.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("\\"),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("* item 1")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("*")]),_v(" item 1\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("* item 1")]),_v(" "),_c('ul',[_c('li',[_v("item 1")])])])],1)])])]),_v(" "),_m(270),_v(" "),_c('br'),_c('hr',{staticClass:"footnotes-sep"}),_v(" "),_c('section',{staticClass:"footnotes"},[_c('ol',{staticClass:"footnotes-list"},[_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"id":"pop:footnotefn-42-1","data-mb-component-type":"popover"}},[_m(271)]),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"id":"pop:footnotefn-42-2","data-mb-component-type":"popover"}},[_m(272)]),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"id":"pop:footnotefn-42-3","data-mb-component-type":"popover"}},[_m(273)]),_v(" "),_m(274),_v(" "),_m(275),_v(" "),_m(276)])]),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})],1),_v(" "),_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"},[_c('overlay-source',{staticClass:"nav nav-pills flex-column my-0 small no-flex-wrap",attrs:{"id":"mb-page-nav","tag-name":"nav","to":"mb-page-nav"}},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#formatting-contents"}},[_v("Formatting Contents‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#headings"}},[_v("Headings‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#paragraphs"}},[_v("Paragraphs‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#line-breaks"}},[_v("Line Breaks‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#text-styles"}},[_v("Text Styles‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#blockquotes"}},[_v("Blockquotes‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#lists"}},[_v("Lists‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#code"}},[_v("Code‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#horizontal-rules"}},[_v("Horizontal Rules‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#links"}},[_v("Links‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#footnotes"}},[_v("Footnotes‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#images"}},[_v("Images‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#classes-attributes-and-amp-identifiers"}},[_v("Classes, Attributes & Identifiers‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#tables"}},[_v("Tables‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#emoji"}},[_v("Emoji‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#icons"}},[_v("Icons‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#embeds"}},[_v("Embeds‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#dates"}},[_v("Dates‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#math-formulae"}},[_v("Math Formulae‎")])]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#relevant-tips-and-amp-tricks"}},[_v("Relevant Tips & Tricks‎")])])],1)])],1),_v(" "),_m(277)])} +}; + var pageVueStaticRenderFns = [function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}},[_v("Formatting Contents")])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_c('em',[_v("User Guide → Formatting Contents")])])])])} +},function anonymous( +) { +with(this){return _c('h1',{attrs:{"id":"formatting-contents"}},[_c('span',{staticClass:"anchor",attrs:{"id":"formatting-contents"}}),_v("Formatting Contents"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#formatting-contents","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p',[_c('strong',[_v("MarkBind supports a wide collection of Markdown-like basic content formatting syntax")]),_v(" such as text styling, tables, lists, images, links, etc.")])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"headings"}},[_c('span',{staticClass:"anchor",attrs:{"id":"headings"}}),_v("Headings"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#headings","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("You can prepend the heading text with 1-6 "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("#")]),_v(" characters to indicate headings of levels 1-6.")])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("### Heading level 3")]),_v("\n")]),_c('span',[_v("...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("###### Heading level 6")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" "),_c('strong',[_v("MarkBind auto-generates anchors for all headings.")]),_c('br'),_v("\nIf the heading text is "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Foo Bar (Goo)")]),_v(", the ID of the generated anchor will be "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("foo-bar-goo")]),_v(" (all lower case, special characters omitted, joined by "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v(").")])} +},function anonymous( +) { +with(this){return _c('p',[_c('small',[_v("Alternative syntax, more info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/basic-syntax#headings"}},[_v("https://www.markdownguide.org/basic-syntax#headings")])])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("### Heading level 3")]),_v("\n")]),_c('span',[_v("...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("###### Heading level 6")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('h3',{attrs:{"id":"heading-level-3-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-3-2"}}),_v("Heading level 3"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-3-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("...")]),_v(" "),_c('h6',{attrs:{"id":"heading-level-6-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-6-2"}}),_v("Heading level 6"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-6-2","onclick":"event.stopPropagation()"}})])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"paragraphs"}},[_c('span',{staticClass:"anchor",attrs:{"id":"paragraphs"}}),_v("Paragraphs"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#paragraphs","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("This is the first paragraph.\n")]),_c('span',[_v("\n")]),_c('span',[_v("This is another paragraph. This is the second sentence.\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("This is the first paragraph.\n")]),_c('span',[_v("\n")]),_c('span',[_v("This is another paragraph. This is the second sentence.\n")])])])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"line-breaks"}},[_c('span',{staticClass:"anchor",attrs:{"id":"line-breaks"}}),_v("Line Breaks"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#line-breaks","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("The preferred way to indicate line breaks is to use a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("
          ")]),_v(" tag.")])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("This is the second sentence."),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")])]),_v("\n")]),_c('span',[_v("This should be on a new line.\n")]),_c('span',[_v("This will not be in a new line.\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"text-styles"}},[_c('span',{staticClass:"anchor",attrs:{"id":"text-styles"}}),_v("Text Styles"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#text-styles","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**Bold**")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_Italic_")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__"),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_Bold and Italic"),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__"),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_, `Inline Code`")])])])]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("~~Strike through~~\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("****")]),_v("Super Bold"),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("****")]),_v(", !!Underline!!, ==Highlight==, %%Dim%%, ++Large++, --Small--, Super^script^, Sub~script~\n")]),_c('span',[_v("->Center-align<-\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('small',[_v("Alternative syntax: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/basic-syntax#emphasis"}},[_v("https://www.markdownguide.org/basic-syntax#emphasis")])])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**Bold**")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_Italic_")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__"),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_Bold and Italic"),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__"),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_, `Inline Code`")])])])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("~~Strike through~~, "),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("****")]),_v("Super Bold"),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("****")]),_v(", !!Underline!!, ==Highlight==, %%Dim%%, ++Large++, --Small--, Super^script^, Sub~script~")])])])]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_c('strong',[_v("Bold")]),_v(", "),_c('em',[_v("Italic")]),_v(", "),_c('em',[_c('strong',[_v("Bold and Italic")])]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Inline Code")]),_v(" "),_c('s',[_v("Strike through")]),_v(", "),_c('strong',[_c('strong',[_v("Super Bold")])]),_v(", "),_c('span',{staticClass:"underline"},[_v("Underline")]),_v(", "),_c('mark',[_v("Highlight")]),_v(", "),_c('span',{staticClass:"dimmed"},[_v("Dim")]),_v(", "),_c('span',{staticClass:"large"},[_v("Large")]),_v(", "),_c('span',{staticClass:"small"},[_v("Small")]),_v(", Super"),_c('sup',[_v("script")]),_v(", Sub"),_c('sub',[_v("script")])])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"blockquotes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"blockquotes"}}),_v("Blockquotes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#blockquotes","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs"}},[_c('span',[_v("Normal text\n")]),_c('span',[_v("> Blockquote, first paragraph\n")]),_c('span',[_v(">\n")]),_c('span',[_v("> Second paragraph\n")]),_c('span',[_v(">> Nested quoteblock\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("Alternatively, you can use "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("
          ")]),_v(" tags:")])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("Normal text\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("blockquote")]),_v(">")])]),_v("\n")]),_c('span',[_v("Blockquote, first paragraph\n")]),_c('span',[_v("\n")]),_c('span',[_v("Second paragraph\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("blockquote")]),_v(">")])]),_v("\n")]),_c('span',[_v("Nested blockquote\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('small',[_v("More info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/basic-syntax#blockquotes-1"}},[_v("https://www.markdownguide.org/basic-syntax#blockquotes-1")])])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("> Blockquote, first paragraph\n")]),_c('span',[_v(">\n")]),_c('span',[_v("> Second paragraph\n")]),_c('span',[_v(">> Nested blockquote\n")])])])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('blockquote',[_c('p',[_v("Blockquote, first paragraph")]),_v(" "),_c('p',[_v("Second paragraph")]),_v(" "),_c('blockquote',[_c('p',[_v("Nested blockquote\n")])])])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"lists"}},[_c('span',{staticClass:"anchor",attrs:{"id":"lists"}}),_v("Lists"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#lists","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_c('strong',[_v("Unordered lists:")])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Sub item 1.1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Sub item 1.2"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" Second line")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" * Sub item 1.2.1")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("* Item 2")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("* Item 3")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_c('strong',[_v("Ordered lists:")])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" 1.")]),_v(" Sub item 1.1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" 1.")]),_v(" Sub item 1.2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 3\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('small',[_v("More info on above list types: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/basic-syntax#lists"}},[_v("https://www.markdownguide.org/basic-syntax#lists")])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_c('strong',[_v("Task lists")])]),_v(" (from GFMD):")])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" [ ] Item 1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" -")]),_v(" [ ] Sub item 1.1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" -")]),_v(" [x] Sub item 1.2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" [x] Item 2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" [ ] Item 3\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_c('strong',[_v("Radio-button lists:")])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" ( ) Item 1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" ( ) Item 2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" (x) Item 3\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" 1.")]),_v(" Sub item 1.1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" 1.")]),_v(" Sub item 1.2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" item 2.1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" [ ] Item 3\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" [x] Item 4\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" ( ) Item 5\n")])])])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('ol',[_c('li',[_v("Item 1\n"),_c('ol',[_c('li',[_v("Sub item 1.1")]),_v(" "),_c('li',[_v("Sub item 1.2")])])])]),_v(" "),_c('ul',[_c('li',[_v("Item 2\n"),_c('ul',[_c('li',[_v("item 2.1")])])])]),_v(" "),_c('ul',{staticClass:"contains-task-list",attrs:{"radio-group":"890e1"}},[_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"type":"checkbox"}}),_v(" Item 3")]),_v(" "),_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"checked":"","type":"checkbox"}}),_v(" Item 4")]),_v(" "),_c('li',{staticClass:"radio-list-item"},[_c('label',[_c('input',{staticClass:"radio-list-input",attrs:{"name":"890e1","type":"radio"}}),_v(" Item 5\n")])])])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"code"}},[_c('span',{staticClass:"anchor",attrs:{"id":"code"}}),_v("Code"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#code","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"themes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"themes"}}),_v("Themes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#themes","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("MarkBind can present formatted code blocks, be it fenced or inline, with either "),_c('strong',[_v("light")]),_v(" or "),_c('strong',[_v("dark")]),_v(" themes. The default is dark.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("Refer "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#style"}},[_v("here")]),_v(" for configuring MarkBind to use a specific theme for the code blocks.")])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"fenced-code"}},[_c('span',{staticClass:"anchor",attrs:{"id":"fenced-code"}}),_v("Fenced Code"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#fenced-code","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("MarkBind provides several features, some of which are added on top of the existing functionality of Markdown's "),_c('em',[_v("fenced code blocks")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('p',[_c('small',[_v("More info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/extended-syntax#fenced-code-blocks"}},[_v("https://www.markdownguide.org/extended-syntax#fenced-code-blocks")])])])} +},function anonymous( +) { +with(this){return _c('ul',[_c('li',[_v("Syntax coloring")]),_v(" "),_c('li',[_v("Line numbering")]),_v(" "),_c('li',[_v("Line highlighting")]),_v(" "),_c('li',[_v("Code block headers")])])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"syntax-coloring"}},[_c('span',{staticClass:"anchor",attrs:{"id":"syntax-coloring"}}),_v("Syntax coloring"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#syntax-coloring","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```xml")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" goo")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"line-numbering"}},[_c('span',{staticClass:"anchor",attrs:{"id":"line-numbering"}}),_v("Line numbering"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#line-numbering","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("Line numbers are provided by default. To hide line numbers, add the class "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-line-numbers")]),_v(" to the code block as below")])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```xml {.no-line-numbers}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" goo")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("You can have your line numbers start with a value other than "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("1")]),_v(" with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start-from")]),_v(" attribute.")])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```js {start-from=6}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("function add(a, b) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return a + b;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"line-highlighting"}},[_c('span',{staticClass:"anchor",attrs:{"id":"line-highlighting"}}),_v("Line highlighting"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#line-highlighting","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("You can add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("highlight-lines")]),_v(" attribute to add highlighting to your code block. Refer to the example code block\nbelow for a visual demonstration of all the possible ways of highlighting a code block.")])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```java {highlight-lines=\"1[:],3['Inventory'],4['It\\'s designed'],5,6[8:18],8[0::2],12[:]-14,16-18,20[12:]-22,24[1::]-26\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("import java.util.List;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("// Inventory is a class that stores inventory items in a list.")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("// It's designed as a thin wrapper on the List interface.")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("public class Inventory {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" private List items;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public int getItemCount(){")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.size();")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public bool isEmpty() {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.isEmpty();")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public Item getItem(idx: int) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.get(idx);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public void addItem(item: Item) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.add(item);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public void removeItem(item: Item) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.remove(item);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("The value of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("highlight-lines")]),_v(" is composed of "),_c('em',[_v("highlight rules")]),_v(", separated by commas.\nThese rules dictate where and how MarkBind should highlight your code block.")])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Format")]),_v(" "),_c('th',[_v("Example")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_c('strong',[_v("Full text highlight")]),_c('br'),_v("Highlights the entirety of the text portion of the line")]),_v(" "),_c('td',[_v("The line numbers as-is (subject to the starting line number set in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start-from")]),_v(").")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("3")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("5")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Substring highlight")]),_c('br'),_v("Highlights "),_c('em',[_v("all")]),_v(" occurrences of a substring in the line")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineNumber[part]")]),_c('br'),_c('br'),_c('em',[_v("Limitations")]),_v(": "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("part")]),_v(" must be wrapped in quotes. If "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("part")]),_v(" contains a quote, escape it with a backslash ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\\")]),_v(").")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("3['Inventory']")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("4['It\\'s designed']")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Character-bounded highlight")]),_c('br'),_v("Highlights a specific range of characters in the line")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineNumber[start:end]")]),_v(", highlights from character position "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start")]),_v(" up to (but not including) "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("end")]),_v("."),_c('br'),_c('br'),_v("Character positions start from "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0")]),_v(" as the first non-whitespace character, upwards."),_c('br'),_c('br'),_v("Omit either "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start")]),_v("/"),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("end")]),_v(" to highlight from the start / up to the end, respectively.")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("19[1:5]")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("30[10:]")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("35[:20]")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Word-bounded highlight")]),_c('br'),_v("Highlights a specific range of words in the line")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineNumber[start::end]")]),_v(", highlights from word position "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start")]),_v(" up to (but not including) "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("end")]),_v("."),_c('br'),_c('br'),_v("Word positions start from "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0")]),_v(" as the first word (sequence of non-whitespace characters), upwards."),_c('br'),_c('br'),_v("Omit either "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start")]),_v("/"),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("end")]),_v(" to highlight from the start / up to the end, respectively.")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("5[2::4]")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("9[1::]")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("11[::5]")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Full line highlight")]),_c('br'),_v("Highlights the entirety of the line")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineNumber[:]")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("7[:]")])])])])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("Not only a single line, MarkBind is also capable of highlighting ranges of lines in various ways. In general, the syntax\nfor range highlighting consists of two single line highlight rules as listed above joined by a dash ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v(").")])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Format")]),_v(" "),_c('th',[_v("Example")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_c('strong',[_v("Ranged full text highlight")]),_c('br'),_v("Highlights from the first non-whitespace character to the last non-whitespace character")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart-lineEnd")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("2-4")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Ranged full line highlight")]),_c('br'),_v("Like ranged full text highlight, but highlights the entirety of the lines")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart[:]-lineEnd")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart-lineEnd[:]")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("1[:]-5")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("10-12[:]")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Ranged character-bounded highlight")]),_c('br'),_v("Highlights the text portion of the lines within the range, but starts/ends at an arbitrary character")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart[start:]-lineEnd")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart-lineEnd[:end]")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("3[2:]-7")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("4-9[:17]")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Ranged word-bounded highlight")]),_c('br'),_v("Like ranged character-bounded highlight, but starts/ends at an arbitrary word")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart[start::]-lineEnd")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart-lineEnd[::end]")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("16[1::]-20")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("22-24[::3]")])])])])])])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"heading"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading"}}),_v("Heading"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("To add a heading, add the attribute "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("heading")]),_v(" with the heading text as the value, as shown below.")])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```xml {heading=\"Heading title\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" goo")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("Headings support inline Markdown, except for "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Inline Code")]),_v(" and "),_c('span',{staticClass:"dimmed"},[_v("Dim")]),_v(" text styles.")])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```{heading=\"**Bold**, _Italic_, ___Bold and Italic___, ~~Strike through~~, ****Super Bold****, !!Underline!!, ==Highlight==, :+1: :exclamation: :x: :construction:
          We support page breaks\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"using-multiple-features"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-multiple-features"}}),_v("Using multiple features"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-multiple-features","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```xml {highlight-lines=\"2\" heading=\"Heading title\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" goo")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"copy-button"}},[_c('span',{staticClass:"anchor",attrs:{"id":"copy-button"}}),_v("Copy button"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#copy-button","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("A "),_c('em',[_v("copy")]),_v(" button can be added to code blocks using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockCopyButtons")]),_v(" plugin:")])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"wrap-text-button"}},[_c('span',{staticClass:"anchor",attrs:{"id":"wrap-text-button"}}),_v("Wrap text button"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#wrap-text-button","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("A "),_c('em',[_v("wrap text")]),_v(" button can be added to code blocks using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockWrapButtons")]),_v(" plugin:")])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"inline-code"}},[_c('span',{staticClass:"anchor",attrs:{"id":"inline-code"}}),_v("Inline Code"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#inline-code","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"syntax-coloring-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"syntax-coloring-2"}}),_v("Syntax coloring"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#syntax-coloring-2","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs"}},[_c('span',[_v("Consider the xml code `goo`{.xml},
          \n")]),_c('span',[_v("or the java code `public static void main(String[] args)`{.java}.\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("```xml\n")]),_c('span',[_v("\n")]),_c('span',[_v(" goo\n")]),_c('span',[_v("\n")]),_c('span',[_v("```\n")])])]),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("`goo`{.xml}\n")])])])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])]),_c('p',[_v("Syntax coloring for inline code: "),_c('code',{pre:true,attrs:{"class":"hljs inline xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v(" too!")])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"horizontal-rules"}},[_c('span',{staticClass:"anchor",attrs:{"id":"horizontal-rules"}}),_v("Horizontal Rules"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#horizontal-rules","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("Use three or more asterisks ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("***")]),_v("), dashes ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("---")]),_v("), or underscores ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("___")]),_v(") to indicate a horizontal line.")])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("****")]),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("*")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("-----")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__")])])]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('h3',{attrs:{"id":"different-types-of-horizontal-rules"}},[_c('span',{staticClass:"anchor",attrs:{"id":"different-types-of-horizontal-rules"}}),_v("Different Types Of Horizontal Rules"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#different-types-of-horizontal-rules","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('ul',[_c('li',[_v("dotted")]),_v(" "),_c('li',[_v("dashed")]),_v(" "),_c('li',[_v("double")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("--- {.dotted}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.dashed}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.double}\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('ul',[_c('li',[_v("thick")]),_v(" "),_c('li',[_v("thick-1")]),_v(" "),_c('li',[_v("thick-2")]),_v(" "),_c('li',[_v("thick-3")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("--- {.thick}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.thick-1}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.thick-2}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.thick-3}\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('ul',[_c('li',[_v("border-info")]),_v(" "),_c('li',[_v("border-primary")]),_v(" "),_c('li',[_v("etc")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("--- {.border-primary}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.border-secondary}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.border-danger}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.border-info}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.border-success}\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("--- {.dashed .thick-3}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.double .border-secondary}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.dotted .thick-1 .border-primary}\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("****")]),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("*")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("-----")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__")])])]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('hr')])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"links"}},[_c('span',{staticClass:"anchor",attrs:{"id":"links"}}),_v("Links"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#links","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("MarkBind home is at ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("here")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org")]),_v(").\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('em',[_v("Reference style")]),_v(" links (i.e., specify the URL in a separate place):")])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("MarkBind home is at ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("here")]),_v("]["),_c('span',{pre:true,attrs:{"class":"hljs-symbol"}},[_v("1")]),_v("].\n")]),_c('span',[_v("\n")]),_c('span',[_v("["),_c('span',{pre:true,attrs:{"class":"hljs-symbol"}},[_v("1")]),_v("]: "),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('small',[_v("More info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/basic-syntax#links"}},[_v("https://www.markdownguide.org/basic-syntax#links")])])])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"intra-site-links"}},[_c('span',{staticClass:"anchor",attrs:{"id":"intra-site-links"}}),_v("Intra-Site Links"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#intra-site-links","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_c('strong',[_v("Auto-conversion of extension")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("You may link to markdown files using its original extension ("),_c('strong',[_v(".md")]),_v(") as it will automatically be converted to a html extension ("),_c('strong',[_v(".html")]),_v(") when the site is generated.")])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_c('strong',[_v("Absolute paths")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("Links should start with "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{{ baseUrl }}")]),_v(" (which represents the root directory of the site).")])} +},function anonymous( +) { +with(this){return _c('ol',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Click [here]({{ baseUrl }}/userGuide/reusingContents.html).")])]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("![]({{ baseUrl }}/images/preview.png)")])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_c('strong',[_v("Relative paths")])])])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("C:\\course\\\n")]),_c('span',[_v(" ├── textbook\\\n")]),_c('span',[_v(" | ├── subsite.md\n")]),_c('span',[_v(" | ├── image.png\n")]),_c('span',[_v(" | └── site.json\n")]),_c('span',[_v(" ├── index.md\n")]),_c('span',[_v(" └── site.json\n")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("Within "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("textbook/subsite.md")]),_v(", we can refer to the image using:")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("img")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"image.png\"")]),_v(" />")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v("![](image.png)\n")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("Within "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("index.md")]),_v(", we can also display the image using")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("img")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"textbook/image.png\"")]),_v(" />")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v("![](textbook/image.png)\n")])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_c('strong',[_v("Link validation")])])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("MarkBind home is at ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("here")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org")]),_v(").\n")]),_c('span',[_v("\n")]),_c('span',[_v("MarkBind home is at ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("here")]),_v("]["),_c('span',{pre:true,attrs:{"class":"hljs-symbol"}},[_v("1")]),_v("].\n")]),_c('span',[_v("\n")]),_c('span',[_v("["),_c('span',{pre:true,attrs:{"class":"hljs-symbol"}},[_v("1")]),_v("]: "),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("MarkBind home is at "),_c('a',{attrs:{"href":"https://markbind.org"}},[_v("here")]),_v(".\n")])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"footnotes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"footnotes"}}),_v("Footnotes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#footnotes","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**Normal footnotes:**")]),_v("\n")]),_c('span',[_v("Here is a footnote reference,[^1] and another.[^longnote]\n")]),_c('span',[_v("\n")]),_c('span',[_v("["),_c('span',{pre:true,attrs:{"class":"hljs-symbol"}},[_v("^1")]),_v("]: "),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("Here is the footnote. Footnotes will appear at the bottom of the page.")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("["),_c('span',{pre:true,attrs:{"class":"hljs-symbol"}},[_v("^longnote")]),_v("]: "),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("Here's one with multiple blocks.")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" Subsequent paragraphs are indented to show that they")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("belong to the previous footnote.")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**Inline footnotes:**")]),_v("\n")]),_c('span',[_v("Here is an inline note.^[Inlines notes are easier to write, since\n")]),_c('span',[_v("you don't have to pick an identifier and move down to type the\n")]),_c('span',[_v("note.]\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("**Normal footnotes:**\n")]),_c('span',[_v("Here is a footnote reference,[^1] and another.[^longnote]\n")]),_c('span',[_v("\n")]),_c('span',[_v("[^1]: Here is the footnote. Footnotes will appear at the bottom of the page.\n")]),_c('span',[_v("\n")]),_c('span',[_v("[^longnote]: Here's one with multiple blocks.\n")]),_c('span',[_v(" Subsequent paragraphs are indented to show that they\n")]),_c('span',[_v("belong to the previous footnote.\n")])])])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"images"}},[_c('span',{staticClass:"anchor",attrs:{"id":"images"}}),_v("Images"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#images","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("![](https://markbind.org/images/logo-lightbackground.png)\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("!["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("alt text here")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org/images/logo-lightbackground.png \"title here\"")]),_v(")\n")])])])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_c('a',{attrs:{"href":"https://markbind.org/images/logo-lightbackground.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","alt":"","title":"title here"}})])])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"classes-attributes-and-amp-identifiers"}},[_c('span',{staticClass:"anchor",attrs:{"id":"classes-attributes-and-amp-identifiers"}}),_v("Classes, Attributes & Identifiers"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#classes-attributes-and-amp-identifiers","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("Most markdown syntax above this section supports adding classes, attributes and identifiers\nusing "),_c('a',{attrs:{"href":"https://pandoc.org/MANUAL.html"}},[_v("pandoc")]),_v(" syntax without the need for a wrapper html element.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("The syntax is "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{.class-name attribute=\"value\" attribute=value #id}")]),_v(", which is placed at different locations depending\non the type of markdown.")])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("Apply classes, attributes, identifiers to block level markdown (eg. paragraphs, headings)\n")]),_c('span',[_v("by leaving a space before '{' {.text-success #attribute-example}\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("#### heading {.text-info}")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.border-danger}\n")]),_c('span',[_v("\n")]),_c('span',[_v("Apply the same to inline markdown (eg. bold text) by\n")]),_c('span',[_v("omitting the "),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**space**")]),_v("{.text-primary .bg-light header=\"attributes example\"}\n")]),_c('span',[_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',{staticClass:"mb-4"},[_v("Some other types of markdown have "),_c('strong',[_v("different placements")]),_v(" of the curly group "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{...}")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_c('strong',[_v("Unordered and Ordered lists")])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Apply to the list item itself like so {.text-success #list-item-id}\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Curly groups after newlines apply to the closest nested list {.text-danger}\n")]),_c('span',[_v("{.bg-light}\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Curly groups two lines after the last line apply to the top most list\n")]),_c('span',[_v("\n")]),_c('span',[_v("{.alert-info}\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_c('strong',[_v("Fenced code blocks")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("Refer to the above "),_c('a',{attrs:{"href":"/userGuide/formattingContents.html#line-numbering"}},[_v("section")]),_v("!")])} +},function anonymous( +) { +with(this){return _c('p',[_c('small',[_v("For a more detailed guide, see: "),_c('a',{attrs:{"href":"https://www.npmjs.com/package/markdown-it-attrs"}},[_v("https://www.npmjs.com/package/markdown-it-attrs")])])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("add a space before '{' for block level markdown {.class-name attribute=\"value\" attribute=value #id}\n")]),_c('span',[_v("\n")]),_c('span',[_v("don't add a space for **inline**{.text-danger} markdown\n")])])]),_c('p',[_c('small',[_v("For a more detailed guide, see: "),_c('a',{attrs:{"href":"https://www.npmjs.com/package/markdown-it-attrs"}},[_v("https://www.npmjs.com/package/markdown-it-attrs")])])])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('div',[_v("\n* Apply to the list item itself like so {.text-success #list-item-id}\n * Curly groups after newlines apply to the closest nested list {.text-danger}\n{.bg-light}\n* Curly groups two lines after the last line apply to the top most list\n\n{.alert-info}\n")])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"tables"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tables"}}),_v("Tables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tables","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("Animal | Trainable?| Price | Remarks\n")]),_c('span',[_v(":----- | :-------: | ----: | ----\n")]),_c('span',[_v("Ants | no | 5 |\n")]),_c('span',[_v("Bees | no | 20 |\n")]),_c('span',[_v("Cats|yes|100|\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('ul',[_c('li',[_v("Colons ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(":")]),_v(") in the 2nd line are optional and they indicates whether to left/center/right-align the values in that column.")]),_v(" "),_c('li',[_v("There is no need to align pipe symbols to be on a vertical line; it's just for aesthetic purposes only.")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('small',[_v("More info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/extended-syntax#tables"}},[_v("https://www.markdownguide.org/extended-syntax#tables")])])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("Animal | Trainable?| Price | Remarks\n")]),_c('span',[_v(":----- | :-------: | ----: | ----\n")]),_c('span',[_v("Ants | no | 5 |\n")]),_c('span',[_v("Bees | no | 20 |\n")]),_c('span',[_v("Cats|yes|100|\n")])])])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',{staticStyle:{"text-align":"left"}},[_v("Animal")]),_v(" "),_c('th',{staticStyle:{"text-align":"center"}},[_v("Trainable?")]),_v(" "),_c('th',{staticStyle:{"text-align":"right"}},[_v("Price")]),_v(" "),_c('th',[_v("Remarks")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Ants")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("no")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("5")]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Bees")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("no")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("20")]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Cats")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("yes")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("100")]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}})])])])])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"emoji"}},[_c('span',{staticClass:"anchor",attrs:{"id":"emoji"}}),_v("Emoji"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#emoji","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v(":+1: :exclamation: :x: :construction:\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" "),_c('a',{attrs:{"href":"https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md"}},[_v("the list of supported emoji")]),_v(".")])])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v(":+1: :exclamation: :x: :construction:\n")])])])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("👍 ❗️ ❌ 🚧\n")])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"icons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"icons"}}),_v("Icons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#icons","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('small',[_c('span',{staticClass:"dimmed"},[_v("Acknowledgement: Font Awesome icons are provided by "),_c('a',{attrs:{"href":"https://fontawesome.com/"}},[_v("Font Awesome")]),_v(" under their "),_c('a',{attrs:{"href":"https://fontawesome.com/license"}},[_v("free license")]),_v(", Glyphicons are provided by "),_c('a',{attrs:{"href":"https://glyphicons.com/"}},[_v("Glyphicons")]),_v(" via "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/3.3/"}},[_v("Bootstrap 3")]),_v(", "),_c('a',{attrs:{"href":"https://octicons.github.com"}},[_v("Octicons")]),_v(" are copyright of GitHub, and Material icons are provided by "),_c('a',{attrs:{"href":"https://fonts.google.com/icons"}},[_v("Google Fonts")]),_v(" via "),_c('a',{attrs:{"href":"https://www.npmjs.com/package/material-icons"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("material-icons")]),_v(" by Ravindra Marella")]),_v(" under the "),_c('a',{attrs:{"href":"https://www.apache.org/licenses/LICENSE-2.0.html"}},[_v("Apache license 2.0")]),_v(".")])])])} +},function anonymous( +) { +with(this){return _c('h6',{attrs:{"id":"using-font-awesome-icons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-font-awesome-icons"}}),_v("Using Font Awesome Icons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-font-awesome-icons","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('ol',[_c('li',[_c('p',[_v("Decide which icon you want to use from the "),_c('a',{attrs:{"href":"https://fontawesome.com/icons?d=gallery&m=free"}},[_v("list of available icons")]),_v(".")])]),_v(" "),_c('li',[_c('p',[_v("Construct the MarkBind name for the selected icon by adding the "),_c('em',[_v("type prefix")]),_v(".\nNote: Font Awesome has three different styles for their icons, each with their own type prefix. Here is an example from each type:")]),_v(" "),_c('ul',[_c('li',[_c('em',[_v("Solid")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fas-")]),_v(") e.g., "),_c('span',{staticClass:"fas fa-file-code",attrs:{"aria-hidden":"true"}}),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("file-code")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fas-file-code")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Regular")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("far-")]),_v(") e.g., "),_c('span',{staticClass:"far fa-file-code",attrs:{"aria-hidden":"true"}}),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("file-code")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("far-file-code")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Brands")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fab-")]),_v("): e.g., "),_c('span',{staticClass:"fab fa-github-alt",attrs:{"aria-hidden":"true"}}),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("github-alt")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fab-github-alt")]),_v(")")])])]),_v(" "),_c('li',[_c('p',[_v("Insert MarkBind name for the icon enclosed within colons to get the icon in your page."),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Create a **branch**")]),_c('code',{pre:true},[_v(":"),_c('span'),_v("fas-code-branch: now!")]),_v(" → Create a "),_c('strong',[_v("branch")]),_v(" "),_c('span',{staticClass:"fas fa-code-branch",attrs:{"aria-hidden":"true"}}),_v(" now!")])])])} +},function anonymous( +) { +with(this){return _c('h6',{attrs:{"id":"using-glyphicons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-glyphicons"}}),_v("Using Glyphicons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-glyphicons","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('ol',[_c('li',[_v("Decide which icon you want to use from "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/3.3/components/#glyphicons"}},[_v("list of provided glyphicons")]),_v(".")]),_v(" "),_c('li',[_v("Insert the name for the icon enclosed within colons to get the icon in your page."),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Move to the right!")]),_c('code',{pre:true},[_v(":"),_c('span'),_v("glyphicon-hand-right:")]),_v(" → Move to the right! "),_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}})])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('p',[_c('code',{pre:true},[_v(":"),_c('span'),_v("glyphicon-hand-right:")]),_v(" "),_c('code',{pre:true},[_v(":"),_c('span'),_v("fab-github:")]),_v(" "),_c('code',{pre:true},[_v(":"),_c('span'),_v("fas-home:")])])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fas fa-home",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fas fa-home",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('span',{staticStyle:{"color":"red"}},[_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fas fa-home",attrs:{"aria-hidden":"true"}})])])])} +},function anonymous( +) { +with(this){return _c('h6',{attrs:{"id":"using-octicons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-octicons"}}),_v("Using Octicons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-octicons","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('li',[_v("Decide which icon you want to use from "),_c('a',{attrs:{"href":"https://octicons.github.com"}},[_v("list of available Octicons")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('li',[_v("You may also append "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("~class-name")]),_v(" to the end of the octicon name to add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("class=\"class-name\"")]),_v(" property to your Octicon (e.g. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(":octicon-git-pull-request~icon-large-red:")]),_v(" will generate an Octicon of class "),_c('em',[_v("icon-large-red")]),_v("). You may then add corresponding CSS to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{root}/_markbind/layouts/{layout-name}/styles.css")]),_v(" to customize the style of your Octicon.")])} +},function anonymous( +) { +with(this){return _c('li',[_v("If your background is dark, you may use "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(":octiconlight-*:")]),_v(" to render the icon as white.")])} +},function anonymous( +) { +with(this){return _c('h6',{attrs:{"id":"using-material-icons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-material-icons"}}),_v("Using Material Icons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-material-icons","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('ol',[_c('li',[_c('p',[_v("Decide which icon you want to use from "),_c('a',{attrs:{"href":"https://fonts.google.com/icons"}},[_v("list of available icons")]),_v(".")])]),_v(" "),_c('li',[_c('p',[_v("Construct the MarkBind name for the selected icon by writing the icon name in "),_c('em',[_v("lowercase letters only")]),_v(", replacing any spaces between the words in the name with "),_c('em',[_v("dashes")]),_v(" ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v("), then adding the "),_c('em',[_v("type prefix")]),_v(".\nNote: Google has five different styles for their Material icons, each with their own type prefix. Here is an example from each type:")]),_v(" "),_c('ul',[_c('li',[_c('em',[_v("Filled")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mif-")]),_v(") e.g. "),_c('span',{staticClass:"material-icons align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mif-perm-media")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Outlined")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mio-")]),_v(") e.g., "),_c('span',{staticClass:"material-icons-outlined align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mio-perm-media")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Rounded")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mir-")]),_v("): e.g., "),_c('span',{staticClass:"material-icons-round align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mir-perm-media")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Sharp")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mis-")]),_v("): e.g., "),_c('span',{staticClass:"material-icons-sharp align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mis-perm-media")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Two tone")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mit-")]),_v("): e.g., "),_c('span',{staticClass:"material-icons-two-tone align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mit-perm-media")]),_v(")")])])]),_v(" "),_c('li',[_c('p',[_v("Insert the name for the icon enclosed within colons to get the icon in your page."),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Download from Cloud :mio-cloud-download:")]),_v(" → Download from Cloud "),_c('span',{staticClass:"material-icons-outlined align-middle",attrs:{"aria-hidden":"true"}},[_v("cloud_download")])])])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"embeds"}},[_c('span',{staticClass:"anchor",attrs:{"id":"embeds"}}),_v("Embeds"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#embeds","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("There are easy ways to embed media content such as YouTube videos and PowerPoint slides")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('h6',{attrs:{"id":"embedding-youtube-videos"}},[_c('span',{staticClass:"anchor",attrs:{"id":"embedding-youtube-videos"}}),_v("Embedding Youtube Videos"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#embedding-youtube-videos","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("youtube")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("v40b3ExbM0c")]),_v(")\n")]),_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("youtube")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("http://www.youtube.com/watch?v=v40b3ExbM0c")]),_v(")\n")]),_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("youtube")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("http://youtu.be/v40b3ExbM0c")]),_v(")\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("More media blocks, embedding services and additional options can be found in "),_c('a',{attrs:{"href":"https://github.com/rotorz/markdown-it-block-embed"}},[_v("Markdown-it documentation")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('h6',{attrs:{"id":"embedding-powerpoint-slides-using-the-embed-url-from-powerpoint-online"}},[_c('span',{staticClass:"anchor",attrs:{"id":"embedding-powerpoint-slides-using-the-embed-url-from-powerpoint-online"}}),_v("Embedding Powerpoint Slides (using the embed url from Powerpoint online)"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#embedding-powerpoint-slides-using-the-embed-url-from-powerpoint-online","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("powerpoint")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://onedrive.live.com/embed?cid=A5AF047C4CAD67AB&resid=A5AF047C4CAD67AB%212070&authkey=&em=2")]),_v(")\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("youtube")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("v40b3ExbM0c")]),_v(")\n")]),_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("youtube")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("http://www.youtube.com/watch?v=v40b3ExbM0c")]),_v(")\n")]),_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("youtube")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("http://youtu.be/v40b3ExbM0c")]),_v(")\n")]),_c('span',[_v("\n")]),_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("powerpoint")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://onedrive.live.com/embed?cid=A5AF047C4CAD67AB&resid=A5AF047C4CAD67AB%212070&authkey=&em=2")]),_v(")\n")])])])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("Embedded YouTube video:")]),_v(" "),_c('div',{staticClass:"block-embed block-embed-service-youtube"},[_c('iframe',{attrs:{"type":"text/html","src":"//www.youtube.com/embed/v40b3ExbM0c","frameborder":"0","width":"640","height":"390","webkitallowfullscreen":"","mozallowfullscreen":"","allowfullscreen":""}})]),_v(" "),_c('p',[_v("Embedded slide deck:")]),_v(" "),_c('div',{staticClass:"block-embed block-embed-service-powerpoint"},[_c('iframe',{attrs:{"type":"text/html","src":"https://onedrive.live.com/embed?cid=A5AF047C4CAD67AB&resid=A5AF047C4CAD67AB%212070&authkey=&em=2&action=embedview&wdAr=1.3333333333333333","frameborder":"0","width":"610","height":"481","webkitallowfullscreen":"","mozallowfullscreen":"","allowfullscreen":""}})])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"dates"}},[_c('span',{staticClass:"anchor",attrs:{"id":"dates"}}),_v("Dates"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#dates","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Markbind supports date formatting and simple calculations")]),_v(" as a Nunjucks "),_c('a',{attrs:{"href":"https://mozilla.github.io/nunjucks/templating.html#filters"}},[_v("filter")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Syntax:")]),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("{ baseDate | date(format, daysToAdd) }}")])])} +},function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"main-example"}},[_c('p',[_v("20 days after 1st Jan 2020:")]),_v(" "),_c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ \"2020-01-01\" | date(\"ddd, Do MMM, YYYY\", 20) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Tue, 21st Jan, 2020")])])} +},function anonymous( +) { +with(this){return _c('h3',{attrs:{"id":"using-variables"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-variables"}}),_v("Using variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-variables","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("% set base1 = \"2020-01-01\" %}")]),_v(" "),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("% set format1 = \"DD MM YYYY\" %}")]),_v(" "),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("% set format2 = \"ddd Do MMM (DD/MM/YYYY)\" %}")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Wed 1 Jan"),_c('br')])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"custom-formatting"}},[_c('span',{staticClass:"anchor",attrs:{"id":"custom-formatting"}}),_v("Custom formatting"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#custom-formatting","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format1) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" 01 01 2020"),_c('br')])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"adding-days"}},[_c('span',{staticClass:"anchor",attrs:{"id":"adding-days"}}),_v("Adding days"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#adding-days","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format2, 0) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Wed 1st Jan (01/01/2020)"),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format2, 10) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Sat 11th Jan (11/01/2020)"),_c('br')])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"page-variables"}},[_c('span',{staticClass:"anchor",attrs:{"id":"page-variables"}}),_v("Page variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#page-variables","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("Dates can be supplied using "),_c('a',{attrs:{"href":"/userGuide/reusingContents.html#variables"}},[_v("page variables")]),_v(" for convenience.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("Inside "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("variables.md")]),_v(" or referencing page:")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("{% set date_pagevar = \"2020-03-06\" %}\n")])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ date_pagevar | date(format2) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Fri 6th Mar (06/03/2020) "),_c('br')])} +},function anonymous( +) { +with(this){return _c('h3',{attrs:{"id":"advanced-formatting"}},[_c('span',{staticClass:"anchor",attrs:{"id":"advanced-formatting"}}),_v("Advanced Formatting"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#advanced-formatting","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("Default format: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"ddd D MMM\"")]),_v(" e.g. Fri 6 Mar")])} +},function anonymous( +) { +with(this){return _c('p',[_v("Full formatting reference available "),_c('a',{attrs:{"href":"https://momentjs.com/docs/#/displaying/format/"}},[_v("here")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"math-formulae"}},[_c('span',{staticClass:"anchor",attrs:{"id":"math-formulae"}}),_v("Math Formulae"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#math-formulae","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("Markbind supports typesetting TeX math equations. "),_c('a',{attrs:{"href":"https://katex.org"}},[_v("KaTeX")]),_v(" is used as a fast math renderer.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("Insert "),_c('strong',[_v("inline")]),_v(" equations by enclosing them in round brackets "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\\( ... \\)")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('p',[_v("Insert "),_c('strong',[_v("display")]),_v(" equations by enclosing them in square brackets "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\\[ ... \\]")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('p',[_v("Insert numbered "),_c('strong',[_v("display")]),_v(" equations by enclosing the equation square brackets and the equation number in curly brackets "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\\[ ... \\] (1)")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("Solve the following simultaneous equations:\n")]),_c('span',[_v("\n")]),_c('span',[_v("\\[ 3x + y = 11 \\] (1)\n")]),_c('span',[_v("\n")]),_c('span',[_v("\\[\\frac{2x}{3} + \\frac{2y}{3} = 8\\] (2)\n")]),_c('span',[_v("\n")]),_c('span',[_v("Euler's equation \\( e^{i\\pi}+1=0 \\) is a beautiful equation.\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('small',[_v("More info on allowed symbols: "),_c('a',{attrs:{"href":"https://katex.org/docs/support_table.html"}},[_v("https://katex.org/docs/support_table.html")])])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("\n")]),_c('span',[_v("Solve the following simultaneous equations:\n")]),_c('span',[_v("\n")]),_c('span',[_v("\\[ 3x + y = 11 \\] (1)\n")]),_c('span',[_v("\n")]),_c('span',[_v("\\[\\frac{2x}{3} + \\frac{2y}{3} = 8\\] (2)\n")]),_c('span',[_v("\n")]),_c('span',[_v("Euler's equation \\( e^{i\\pi}+1=0 \\) is a beautiful equation.\n")]),_c('span',[_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("Solve the following simultaneous equations:")]),_v(" "),_c('section',{staticClass:"eqno"},[_c('eqn',{pre:true},[_c('span',{pre:true,attrs:{"class":"katex-display"}},[_c('span',{pre:true,attrs:{"class":"katex"}},[_c('span',{pre:true,attrs:{"class":"katex-mathml"}},[_c('math',{pre:true,attrs:{"xmlns":"http://www.w3.org/1998/Math/MathML","display":"block"}},[_c('semantics',{pre:true},[_c('mrow',{pre:true},[_c('mn',{pre:true},[_v("3")]),_c('mi',{pre:true},[_v("x")]),_c('mo',{pre:true},[_v("+")]),_c('mi',{pre:true},[_v("y")]),_c('mo',{pre:true},[_v("=")]),_c('mn',{pre:true},[_v("11")])],1),_c('annotation',{pre:true,attrs:{"encoding":"application/x-tex","v-pre":""}},[_v(" 3x + y = 11 ")])],1)],1)],1),_c('span',{pre:true,attrs:{"class":"katex-html","aria-hidden":"true"}},[_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.72777em;vertical-align:-0.08333em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("3")]),_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("x")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.625em;vertical-align:-0.19444em;"}}),_c('span',{pre:true,attrs:{"class":"mord mathnormal","style":"margin-right:0.03588em;"}},[_v("y")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.64444em;vertical-align:0em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("1")]),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("1")])])])])])]),_c('span',[_v("(1)")])],1),_v(" "),_c('section',{staticClass:"eqno"},[_c('eqn',{pre:true},[_c('span',{pre:true,attrs:{"class":"katex-display"}},[_c('span',{pre:true,attrs:{"class":"katex"}},[_c('span',{pre:true,attrs:{"class":"katex-mathml"}},[_c('math',{pre:true,attrs:{"xmlns":"http://www.w3.org/1998/Math/MathML","display":"block"}},[_c('semantics',{pre:true},[_c('mrow',{pre:true},[_c('mfrac',{pre:true},[_c('mrow',{pre:true},[_c('mn',{pre:true},[_v("2")]),_c('mi',{pre:true},[_v("x")])],1),_c('mn',{pre:true},[_v("3")])],1),_c('mo',{pre:true},[_v("+")]),_c('mfrac',{pre:true},[_c('mrow',{pre:true},[_c('mn',{pre:true},[_v("2")]),_c('mi',{pre:true},[_v("y")])],1),_c('mn',{pre:true},[_v("3")])],1),_c('mo',{pre:true},[_v("=")]),_c('mn',{pre:true},[_v("8")])],1),_c('annotation',{pre:true,attrs:{"encoding":"application/x-tex","v-pre":""}},[_v("\\frac{2x}{3} + \\frac{2y}{3} = 8")])],1)],1)],1),_c('span',{pre:true,attrs:{"class":"katex-html","aria-hidden":"true"}},[_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:2.00744em;vertical-align:-0.686em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mopen nulldelimiter"}}),_c('span',{pre:true,attrs:{"class":"mfrac"}},[_c('span',{pre:true,attrs:{"class":"vlist-t vlist-t2"}},[_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:1.32144em;"}},[_c('span',{pre:true,attrs:{"style":"top:-2.314em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord"}},[_v("3")])])]),_c('span',{pre:true,attrs:{"style":"top:-3.23em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"frac-line","style":"border-bottom-width:0.04em;"}})]),_c('span',{pre:true,attrs:{"style":"top:-3.677em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord"}},[_v("2")]),_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("x")])])])]),_c('span',{pre:true,attrs:{"class":"vlist-s"}},[_v("​")])]),_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:0.686em;"}},[_c('span')])])])]),_c('span',{pre:true,attrs:{"class":"mclose nulldelimiter"}})]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:2.00744em;vertical-align:-0.686em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mopen nulldelimiter"}}),_c('span',{pre:true,attrs:{"class":"mfrac"}},[_c('span',{pre:true,attrs:{"class":"vlist-t vlist-t2"}},[_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:1.32144em;"}},[_c('span',{pre:true,attrs:{"style":"top:-2.314em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord"}},[_v("3")])])]),_c('span',{pre:true,attrs:{"style":"top:-3.23em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"frac-line","style":"border-bottom-width:0.04em;"}})]),_c('span',{pre:true,attrs:{"style":"top:-3.677em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord"}},[_v("2")]),_c('span',{pre:true,attrs:{"class":"mord mathnormal","style":"margin-right:0.03588em;"}},[_v("y")])])])]),_c('span',{pre:true,attrs:{"class":"vlist-s"}},[_v("​")])]),_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:0.686em;"}},[_c('span')])])])]),_c('span',{pre:true,attrs:{"class":"mclose nulldelimiter"}})]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.64444em;vertical-align:0em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("8")])])])])])]),_c('span',[_v("(2)")])],1),_v(" "),_c('p',[_v("Euler's equation "),_c('eq',{pre:true},[_c('span',{pre:true,attrs:{"class":"katex"}},[_c('span',{pre:true,attrs:{"class":"katex-mathml"}},[_c('math',{pre:true,attrs:{"xmlns":"http://www.w3.org/1998/Math/MathML"}},[_c('semantics',{pre:true},[_c('mrow',{pre:true},[_c('msup',{pre:true},[_c('mi',{pre:true},[_v("e")]),_c('mrow',{pre:true},[_c('mi',{pre:true},[_v("i")]),_c('mi',{pre:true},[_v("π")])],1)],1),_c('mo',{pre:true},[_v("+")]),_c('mn',{pre:true},[_v("1")]),_c('mo',{pre:true},[_v("=")]),_c('mn',{pre:true},[_v("0")])],1),_c('annotation',{pre:true,attrs:{"encoding":"application/x-tex","v-pre":""}},[_v(" e^{i\\pi}+1=0 ")])],1)],1)],1),_c('span',{pre:true,attrs:{"class":"katex-html","aria-hidden":"true"}},[_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.907994em;vertical-align:-0.08333em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("e")]),_c('span',{pre:true,attrs:{"class":"msupsub"}},[_c('span',{pre:true,attrs:{"class":"vlist-t"}},[_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:0.824664em;"}},[_c('span',{pre:true,attrs:{"style":"top:-3.063em;margin-right:0.05em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:2.7em;"}}),_c('span',{pre:true,attrs:{"class":"sizing reset-size6 size3 mtight"}},[_c('span',{pre:true,attrs:{"class":"mord mtight"}},[_c('span',{pre:true,attrs:{"class":"mord mathnormal mtight"}},[_v("i")]),_c('span',{pre:true,attrs:{"class":"mord mathnormal mtight","style":"margin-right:0.03588em;"}},[_v("π")])])])])])])])])]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.64444em;vertical-align:0em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("1")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.64444em;vertical-align:0em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("0")])])])])]),_v(" is a beautiful equation.")],1)])} +},function anonymous( +) { +with(this){return _c('h1',{attrs:{"id":"relevant-tips-and-amp-tricks"}},[_c('span',{staticClass:"anchor",attrs:{"id":"relevant-tips-and-amp-tricks"}}),_v("Relevant Tips & Tricks"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#relevant-tips-and-amp-tricks","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-left"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("MarkBind Syntax Overview")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-right"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/usingComponents.html"}},[_c('span',[_c('span',[_v("Using Components")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} +},function anonymous( +) { +with(this){return _c('span',{attrs:{"data-mb-slot-name":"content"}},[_c('div',[_c('p',[_v("Here is the footnote. Footnotes will appear at the bottom of the page.")])])])} +},function anonymous( +) { +with(this){return _c('span',{attrs:{"data-mb-slot-name":"content"}},[_c('div',[_c('p',[_v("Here's one with multiple blocks.")]),_v(" "),_c('p',[_v("Subsequent paragraphs are indented to show that they\nbelong to the previous footnote.")])])])} +},function anonymous( +) { +with(this){return _c('span',{attrs:{"data-mb-slot-name":"content"}},[_c('div',[_c('p',[_v("Inlines notes are easier to write, since\nyou don't have to pick an identifier and move down to type the\nnote.")])])])} +},function anonymous( +) { +with(this){return _c('li',{staticClass:"footnote-item",attrs:{"id":"fn-42-1"}},[_c('p',[_v("Here is the footnote. Footnotes will appear at the bottom of the page.")])])} +},function anonymous( +) { +with(this){return _c('li',{staticClass:"footnote-item",attrs:{"id":"fn-42-2"}},[_c('p',[_v("Here's one with multiple blocks.")]),_v(" "),_c('p',[_v("Subsequent paragraphs are indented to show that they\nbelong to the previous footnote.")])])} +},function anonymous( +) { +with(this){return _c('li',{staticClass:"footnote-item",attrs:{"id":"fn-42-3"}},[_c('p',[_v("Inlines notes are easier to write, since\nyou don't have to pick an identifier and move down to type the\nnote.")])])} +},function anonymous( +) { +with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 3.1.1")]),_v(" on Sat, 22 Jan 2022, 16:49:34 UTC]")]),_c('br'),_v(" "),_c('small',[_v("This site is powered by "),_c('a',{attrs:{"href":"https://www.netlify.com/"}},[_v("Netlify")]),_v(".")])])])])} +}]; + \ No newline at end of file diff --git a/userGuide/fullSyntaxReference.html b/userGuide/fullSyntaxReference.html new file mode 100644 index 0000000..635e807 --- /dev/null +++ b/userGuide/fullSyntaxReference.html @@ -0,0 +1,38 @@ + + + + + + + + MarkBind - User Guide: Full Syntax Reference + + + + + + + + + + + + + + + + +

          Full Syntax Reference

          Classes, Attributes & Identifiers
          Badges
          Blockquotes
          Boxes
          Code
          Dates
          Diagrams
          Embeds
          Emoji
          Footnotes
          Front Matter
          Headings
          Horizontal Rules
          Icons
          Images
          Includes
          Keywords
          Line Breaks
          Lists
          Math Formulae
          Modals
          Page Navigation Menus
          Panels
          Paragraphs
          Pictures
          Popovers
          Questions and Quizzes
          Search Bars
          Tables
          Tabs
          Tags
          Text Styles
          Thumbnails
          Tooltips
          Variables

            Here is the footnote. Footnotes will appear at the bottom of the page.

            Here's one with multiple blocks.

            Subsequent paragraphs are indented to show that they +belong to the previous footnote.

            Inlines notes are easier to write, since +you don't have to pick an identifier and move down to type the +note.

          1. Here is the footnote. Footnotes will appear at the bottom of the page.

          2. Here's one with multiple blocks.

            Subsequent paragraphs are indented to show that they +belong to the previous footnote.

          3. Inlines notes are easier to write, since +you don't have to pick an identifier and move down to type the +note.

          + + + diff --git a/userGuide/fullSyntaxReference.page-vue-render.js b/userGuide/fullSyntaxReference.page-vue-render.js new file mode 100644 index 0000000..1ff459e --- /dev/null +++ b/userGuide/fullSyntaxReference.page-vue-render.js @@ -0,0 +1,31 @@ + + var pageVueRenderFn = function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',[_c('header',{attrs:{"fixed":""}},[_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/index.html","title":"Home"}},[_c('img',{attrs:{"src":"/images/logo-darkbackground.svg","height":"20"}})])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('form',{staticClass:"navbar-form"},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback,"menu-align-right":""}})],1)])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/index.html"}},[_v("HOME")])]),_v(" "),_c('div',{attrs:{"tags":"environment--ug"}},[_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"sibling-or-child","href":"/userGuide/index.html"}},[_v("USER GUIDE")])])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/showcase.html"}},[_v("SHOWCASE")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/about.html"}},[_v("ABOUT")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_c('span',[_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}})])])])])],1)]),_v(" "),_c('div',{attrs:{"id":"flex-body"}},[_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"site-nav","tag-name":"nav","to":"site-nav"}},[_c('div',{staticClass:"site-nav-top"},[_c('div',{staticClass:"font-weight-bold mb-2",staticStyle:{"font-size":"1.25rem"}},[_v("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tipsAndTricks.html"}},[_v("Tips & Tricks")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/glossary.html"}},[_v("Glossary")])])])])])])],1)],1)]),_v(" "),_c('div',{staticClass:"fixed-header-padding",attrs:{"id":"content-wrapper"}},[_m(0),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"classes-attributes-and-amp-identifiers"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"classes-attributes-and-amp-identifiers"}},[_c('span',{staticClass:"anchor",attrs:{"id":"classes-attributes-and-amp-identifiers"}}),_c('strong',[_v("Classes, Attributes & Identifiers")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#classes-attributes-and-amp-identifiers","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"classes-attributes-and-amp-identifiers-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"classes-attributes-and-amp-identifiers-2"}}),_v("Classes, Attributes & Identifiers"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#classes-attributes-and-amp-identifiers-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Most markdown syntax above this section supports adding classes, attributes and identifiers\nusing "),_c('a',{attrs:{"href":"https://pandoc.org/MANUAL.html"}},[_v("pandoc")]),_v(" syntax without the need for a wrapper html element.")]),_v(" "),_c('p',[_v("The syntax is "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{.class-name attribute=\"value\" attribute=value #id}")]),_v(", which is placed at different locations depending\non the type of markdown.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("Apply classes, attributes, identifiers to block level markdown (eg. paragraphs, headings)\n")]),_c('span',[_v("by leaving a space before '{' {.text-success #attribute-example}\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("#### heading {.text-info}")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.border-danger}\n")]),_c('span',[_v("\n")]),_c('span',[_v("Apply the same to inline markdown (eg. bold text) by\n")]),_c('span',[_v("omitting the "),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**space**")]),_v("{.text-primary .bg-light header=\"attributes example\"}\n")]),_c('span',[_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',{staticClass:"text-success",attrs:{"id":"attribute-example"}},[_v("Apply classes, attributes, identifiers to block level markdown (eg. paragraphs, headings)\nby leaving a space before '{'")]),_v(" "),_c('h4',{staticClass:"text-info",attrs:{"id":"heading"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading"}}),_v("heading"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading","onclick":"event.stopPropagation()"}})]),_v(" "),_c('hr',{staticClass:"border-danger"}),_v(" "),_c('p',[_v("Apply the same to inline markdown (eg. bold text) by\nomitting the "),_c('strong',{staticClass:"text-primary bg-light",attrs:{"header":"attributes example"}},[_v("space")])])])],1)]),_v(" "),_c('p',{staticClass:"mb-4"},[_v("Some other types of markdown have "),_c('strong',[_v("different placements")]),_v(" of the curly group "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{...}")]),_v(".")]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Unordered and Ordered lists")])])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Apply to the list item itself like so {.text-success #list-item-id}\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Curly groups after newlines apply to the closest nested list {.text-danger}\n")]),_c('span',[_v("{.bg-light}\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Curly groups two lines after the last line apply to the top most list\n")]),_c('span',[_v("\n")]),_c('span',[_v("{.alert-info}\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ul',{staticClass:"alert-info"},[_c('li',{staticClass:"text-success",attrs:{"id":"list-item-id"}},[_v("Apply to the list item itself like so\n"),_c('ul',{staticClass:"bg-light"},[_c('li',{staticClass:"text-danger"},[_v("Curly groups after newlines apply to the closest nested list")])])]),_v(" "),_c('li',[_v("Curly groups two lines after the last line apply to the top most list")])])])],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Fenced code blocks")])])]),_v(" "),_c('p',[_v("Refer to the above "),_c('a',{attrs:{"href":"/userGuide/formattingContents.html#line-numbering"}},[_v("section")]),_v("!")]),_v(" "),_c('p',[_c('small',[_v("For a more detailed guide, see: "),_c('a',{attrs:{"href":"https://www.npmjs.com/package/markdown-it-attrs"}},[_v("https://www.npmjs.com/package/markdown-it-attrs")])])]),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_v("\nFormatting features listed above this section support this syntax for attributes, classes and identifiers.\nThose below this section do not.\n")]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("add a space before '{' for block level markdown {.class-name attribute=\"value\" attribute=value #id}\n")]),_c('span',[_v("\n")]),_c('span',[_v("don't add a space for **inline**{.text-danger} markdown\n")])])]),_c('p',[_c('small',[_v("For a more detailed guide, see: "),_c('a',{attrs:{"href":"https://www.npmjs.com/package/markdown-it-attrs"}},[_v("https://www.npmjs.com/package/markdown-it-attrs")])])])]),_c('p'),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('div',[_v("\n* Apply to the list item itself like so {.text-success #list-item-id}\n * Curly groups after newlines apply to the closest nested list {.text-danger}\n{.bg-light}\n* Curly groups two lines after the last line apply to the top most list\n\n{.alert-info}\n")])])],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"badges"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"badges"}},[_c('span',{staticClass:"anchor",attrs:{"id":"badges"}}),_c('strong',[_v("Badges")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#badges","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"badges-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"badges-2"}}),_v("Badges"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#badges-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_v("Normal:\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-primary\"")]),_v(">")]),_v("Primary"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-secondary\"")]),_v(">")]),_v("Secondary"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-success\"")]),_v(">")]),_v("Success"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-danger\"")]),_v(">")]),_v("Danger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-warning\"")]),_v(">")]),_v("Warning"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-info\"")]),_v(">")]),_v("Info"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-light\"")]),_v(">")]),_v("Light"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-dark\"")]),_v(">")]),_v("Dark"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("Pills:\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-pill badge-primary\"")]),_v(">")]),_v("Primary"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-pill badge-secondary\"")]),_v(">")]),_v("Secondary"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-pill badge-success\"")]),_v(">")]),_v("Success"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-pill badge-danger\"")]),_v(">")]),_v("Danger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-pill badge-warning\"")]),_v(">")]),_v("Warning"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-pill badge-info\"")]),_v(">")]),_v("Info"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-pill badge-light\"")]),_v(">")]),_v("Light"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-pill badge-dark\"")]),_v(">")]),_v("Dark"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Normal:\n"),_c('span',{staticClass:"badge badge-primary"},[_v("Primary")]),_v(" "),_c('span',{staticClass:"badge badge-secondary"},[_v("Secondary")]),_v(" "),_c('span',{staticClass:"badge badge-success"},[_v("Success")]),_v(" "),_c('span',{staticClass:"badge badge-danger"},[_v("Danger")]),_v(" "),_c('span',{staticClass:"badge badge-warning"},[_v("Warning")]),_v(" "),_c('span',{staticClass:"badge badge-info"},[_v("Info")]),_v(" "),_c('span',{staticClass:"badge badge-light"},[_v("Light")]),_v(" "),_c('span',{staticClass:"badge badge-dark"},[_v("Dark")]),_v(" "),_c('br'),_v("Pills:\n"),_c('span',{staticClass:"badge badge-pill badge-primary"},[_v("Primary")]),_v(" "),_c('span',{staticClass:"badge badge-pill badge-secondary"},[_v("Secondary")]),_v(" "),_c('span',{staticClass:"badge badge-pill badge-success"},[_v("Success")]),_v(" "),_c('span',{staticClass:"badge badge-pill badge-danger"},[_v("Danger")]),_v(" "),_c('span',{staticClass:"badge badge-pill badge-warning"},[_v("Warning")]),_v(" "),_c('span',{staticClass:"badge badge-pill badge-info"},[_v("Info")]),_v(" "),_c('span',{staticClass:"badge badge-pill badge-light"},[_v("Light")]),_v(" "),_c('span',{staticClass:"badge badge-pill badge-dark"},[_v("Dark")])])])],1)]),_v(" "),_c('p',[_v("You can use Badges in combination with headings, buttons, links, etc.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_v("Links:\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-primary\"")]),_v(">")]),_v("Primary"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-pill badge-warning\"")]),_v(">")]),_v("Warning"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("Buttons:\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Difficulty Level "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-light\"")]),_v(">")]),_v("4"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("Headings:\n")]),_c('span',[_v("\n")]),_c('span',[_v("### Feature X "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-danger\"")]),_v(">")]),_v("beta"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" {.no-index}\n")]),_c('span',[_v("##### Feature Y "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-pill badge-success\"")]),_v(">")]),_v("stable"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" {.no-index}\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Links:\n"),_c('a',{staticClass:"badge badge-primary",attrs:{"href":"#"}},[_v("Primary")]),_v(" "),_c('a',{staticClass:"badge badge-pill badge-warning",attrs:{"href":"#"}},[_v("Warning")])]),_v(" "),_c('p',[_v("Buttons:\n"),_c('button',{staticClass:"btn btn-primary",attrs:{"type":"button"}},[_v("\nDifficulty Level "),_c('span',{staticClass:"badge badge-light"},[_v("4")])])]),_v(" "),_c('p',[_v("Headings:")]),_v(" "),_c('h3',{staticClass:"no-index",attrs:{"id":"feature-x-beta"}},[_c('span',{staticClass:"anchor",attrs:{"id":"feature-x-beta"}}),_v("Feature X "),_c('span',{staticClass:"badge badge-danger"},[_v("beta")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#feature-x-beta","onclick":"event.stopPropagation()"}})]),_v(" "),_c('h5',{staticClass:"no-index",attrs:{"id":"feature-y-stable"}},[_c('span',{staticClass:"anchor",attrs:{"id":"feature-y-stable"}}),_v("Feature Y "),_c('span',{staticClass:"badge badge-pill badge-success"},[_v("stable")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#feature-y-stable","onclick":"event.stopPropagation()"}})])])],1)]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" You can refer to "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/4.2/components/badge/"}},[_v("Bootstrap documentation")]),_v(" to find more information about Badges.")])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-primary\"")]),_v(">")])]),_v("Primary"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-pill badge-success\"")]),_v(">")])]),_v("Success"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-primary\"")]),_v(">")])]),_v("\n")]),_c('span',[_v(" Difficulty Level "),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-light\"")]),_v(">")])]),_v("4"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_c('span',{staticClass:"badge badge-primary"},[_v("Primary")]),_v(" "),_c('span',{staticClass:"badge badge-pill badge-success"},[_v("Success")]),_v(" "),_c('button',{staticClass:"btn btn-primary",attrs:{"type":"button"}},[_v("\nDifficulty Level "),_c('span',{staticClass:"badge badge-light"},[_v("4")])])]),_v(" "),_c('h5',{staticClass:"no-index",attrs:{"id":"feature-y-stable-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"feature-y-stable-2"}}),_v("Feature Y "),_c('span',{staticClass:"badge badge-pill badge-warning"},[_v("stable")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#feature-y-stable-2","onclick":"event.stopPropagation()"}})])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"blockquotes"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"blockquotes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"blockquotes"}}),_c('strong',[_v("Blockquotes")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#blockquotes","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"blockquotes-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"blockquotes-2"}}),_v("Blockquotes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#blockquotes-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs"}},[_c('span',[_v("Normal text\n")]),_c('span',[_v("> Blockquote, first paragraph\n")]),_c('span',[_v(">\n")]),_c('span',[_v("> Second paragraph\n")]),_c('span',[_v(">> Nested quoteblock\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Normal text")]),_v(" "),_c('blockquote',[_c('p',[_v("Blockquote, first paragraph")]),_v(" "),_c('p',[_v("Second paragraph")]),_v(" "),_c('blockquote',[_c('p',[_v("Nested quoteblock")])])])])],1)]),_v(" "),_c('p',[_v("Alternatively, you can use "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("
          ")]),_v(" tags:")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("Normal text\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("blockquote")]),_v(">")])]),_v("\n")]),_c('span',[_v("Blockquote, first paragraph\n")]),_c('span',[_v("\n")]),_c('span',[_v("Second paragraph\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("blockquote")]),_v(">")])]),_v("\n")]),_c('span',[_v("Nested blockquote\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Normal text")]),_v(" "),_c('blockquote',[_v("\nBlockquote, first paragraph\n"),_c('p',[_v("Second paragraph")]),_v(" "),_c('blockquote',[_v("\nNested blockquote\n")])])])],1)]),_v(" "),_c('p',[_c('small',[_v("More info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/basic-syntax#blockquotes-1"}},[_v("https://www.markdownguide.org/basic-syntax#blockquotes-1")])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("> Blockquote, first paragraph\n")]),_c('span',[_v(">\n")]),_c('span',[_v("> Second paragraph\n")]),_c('span',[_v(">> Nested blockquote\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('blockquote',[_c('p',[_v("Blockquote, first paragraph")]),_v(" "),_c('p',[_v("Second paragraph")]),_v(" "),_c('blockquote',[_c('p',[_v("Nested blockquote\n")])])])]),_c('p')])]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"boxes"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"boxes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"boxes"}}),_c('strong',[_v("Boxes")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#boxes","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"boxes-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"boxes-2"}}),_v("Boxes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#boxes-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Boxes come with different built-in types.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("\n")]),_c('span',[_v(" default\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" info\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" warning\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" success\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"important\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" important\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"wrong\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" wrong\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tip\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" tip\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" definition\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("dismissible")]),_v(">")]),_v("\n")]),_c('span',[_v(" dismissible info\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#### Header :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon-size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"2x\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"You can use **markdown** here! :pizza:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("dismissible")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',[_v("\n default\n")]),_v(" "),_c('box',{attrs:{"type":"info"}},[_v("\n info\n")]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_v("\n warning\n")]),_v(" "),_c('box',{attrs:{"type":"success"}},[_v("\n success\n")]),_v(" "),_c('box',{attrs:{"type":"important"}},[_v("\n important\n")]),_v(" "),_c('box',{attrs:{"type":"wrong"}},[_v("\n wrong\n")]),_v(" "),_c('box',{attrs:{"type":"tip"}},[_v("\n tip\n")]),_v(" "),_c('box',{attrs:{"type":"definition"}},[_v("\n definition\n")]),_v(" "),_c('box',{attrs:{"type":"info","dismissible":""}},[_v("\n dismissible info\n")]),_v(" "),_c('box',{attrs:{"type":"success","icon-size":"2x"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h4',{attrs:{"id":"header"}},[_c('span',{staticClass:"anchor",attrs:{"id":"header"}}),_v("Header 🚀"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#header","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('p',[_v("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.")]),_v(" "),_c('box',{attrs:{"type":"warning","dismissible":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("You can use "),_c('strong',[_v("markdown")]),_v(" here! 🍕")])]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n ")])],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("The built in types can be colored.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("\n")]),_c('span',[_v(" default\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" primary\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"secondary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" secondary\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" success\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"danger\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" danger\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" warning\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" info\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"light\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dark\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" dark\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',[_v("\n default\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"primary"}},[_v("\n primary\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"secondary"}},[_v("\n secondary\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"success"}},[_v("\n success\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"danger"}},[_v("\n danger\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"warning"}},[_v("\n warning\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"info"}},[_v("\n info\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"light"}},[_v("\n light\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"dark"}},[_v("\n dark\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Markbind also supports a light color scheme for boxes")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" default light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" info light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" warning light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" success light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"important\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" important light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"wrong\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" wrong light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tip\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" tip light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" definition light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"##### Header markdown :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" definition light with header markdown\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',{attrs:{"light":""}},[_v("\n default light\n")]),_v(" "),_c('box',{attrs:{"type":"info","light":""}},[_v("\n info light\n")]),_v(" "),_c('box',{attrs:{"type":"warning","light":""}},[_v("\n warning light\n")]),_v(" "),_c('box',{attrs:{"type":"success","light":""}},[_v("\n success light\n")]),_v(" "),_c('box',{attrs:{"type":"important","light":""}},[_v("\n important light\n")]),_v(" "),_c('box',{attrs:{"type":"wrong","light":""}},[_v("\n wrong light\n")]),_v(" "),_c('box',{attrs:{"type":"tip","light":""}},[_v("\n tip light\n")]),_v(" "),_c('box',{attrs:{"type":"definition","light":""}},[_v("\n definition light\n")]),_v(" "),_c('box',{attrs:{"type":"definition","light":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('h5',{attrs:{"id":"header-markdown"}},[_c('span',{staticClass:"anchor",attrs:{"id":"header-markdown"}}),_v("Header markdown 🚀"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#header-markdown","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v("\n definition light with header markdown\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("MarkBind also supports a seamless style of boxes")])]),_v(" "),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("As "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("light")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("seamless")]),_v(" are mutually exclusive styles, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("light")]),_v(" takes priority over "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("seamless")]),_v(".")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" default seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" info seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" warning seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" success seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"important\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" important seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"wrong\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" wrong seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tip\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" tip seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("dismissible")]),_v(">")]),_v("\n")]),_c('span',[_v(" dismissible definition seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"##### Header markdown :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" success seamless with header markdown\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',{attrs:{"seamless":""}},[_v("\n default seamless\n")]),_v(" "),_c('box',{attrs:{"type":"info","seamless":""}},[_v("\n info seamless\n")]),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_v("\n warning seamless\n")]),_v(" "),_c('box',{attrs:{"type":"success","seamless":""}},[_v("\n success seamless\n")]),_v(" "),_c('box',{attrs:{"type":"important","seamless":""}},[_v("\n important seamless\n")]),_v(" "),_c('box',{attrs:{"type":"wrong","seamless":""}},[_v("\n wrong seamless\n")]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_v("\n tip seamless\n")]),_v(" "),_c('box',{attrs:{"type":"definition","seamless":"","dismissible":""}},[_v("\n dismissible definition seamless\n")]),_v(" "),_c('box',{attrs:{"type":"definition","seamless":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('h5',{attrs:{"id":"header-markdown-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"header-markdown-2"}}),_v("Header markdown 🚀"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#header-markdown-2","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v("\n success seamless with header markdown\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("You can further customize the Box's appearance.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("background-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#ffca6a\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("border-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"grey\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("border-left-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#8b5a01\"")]),_v(">")]),_v("\n")]),_c('span',[_v("default type, styled as an orange box with a brown left border\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"red\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":rocket:\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("info, with a custom markdown rocket icon and `red` colored text.\n")]),_c('span',[_v("\n")]),_c('span',[_v("You can use any inline markdown in the `icon` property.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',{attrs:{"background-color":"#ffca6a","border-color":"grey","border-left-color":"#8b5a01"}},[_v("\ndefault type, styled as an orange box with a brown left border\n")]),_v(" "),_c('box',{attrs:{"type":"info","color":"red"},scopedSlots:_u([{key:"icon",fn:function(){return [_v("🚀")]},proxy:true}])},[_v(" "),_c('p',[_v("info, with a custom markdown rocket icon and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("red")]),_v(" colored text.")]),_v(" "),_c('p',[_v("You can use any inline markdown in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("icon")]),_v(" property.")])])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("You can remove the background, icon and borders of preset styles.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-icon")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-background")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" success box without a tick icon and backgound\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-border")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" definition type box, light style without border\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',{attrs:{"no-icon":"","no-background":"","type":"success"}},[_v("\n success box without a tick icon and backgound\n")]),_v(" "),_c('box',{attrs:{"no-border":"","type":"definition","light":""}},[_v("\n definition type box, light style without border\n")])],1)],1)]),_v(" "),_c('box',{attrs:{"type":"info","seamless":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Note")])]},proxy:true}])},[_v(" "),_c('p',[_v("Custom styles "),_c('strong',[_v("(")]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("background-color")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("border-color")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("border-left-color")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("icon")]),_v(" "),_c('strong',[_v(")")]),_v(" as introduced in the previous section, takes precedence over the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-background")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-border")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-icon")]),_v(" attributes.")])]),_v(" "),_c('p',[_c('strong',[_v("You can also use icons, resize them and change their color accordingly.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-camera:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-camera:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon-size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"2x\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-camera:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon-size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"3x\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-camera:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"red\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon-size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"3x\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',{attrs:{"type":"success"},scopedSlots:_u([{key:"icon",fn:function(){return [_c('span',{staticClass:"fas fa-camera",attrs:{"aria-hidden":"true"}})]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit\n")]),_v(" "),_c('box',{attrs:{"type":"warning","icon-size":"2x"},scopedSlots:_u([{key:"icon",fn:function(){return [_c('span',{staticClass:"fas fa-camera",attrs:{"aria-hidden":"true"}})]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n")]),_v(" "),_c('box',{attrs:{"type":"definition","icon-size":"3x"},scopedSlots:_u([{key:"icon",fn:function(){return [_c('span',{staticClass:"fas fa-camera",attrs:{"aria-hidden":"true"}})]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n")]),_v(" "),_c('box',{attrs:{"type":"info","icon-color":"red","icon-size":"3x"},scopedSlots:_u([{key:"icon",fn:function(){return [_c('span',{staticClass:"fas fa-camera",attrs:{"aria-hidden":"true"}})]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("background-color")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',[_v("border-color")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',[_v("border-left-color")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Overrides border-color for the left border.")])]),_v(" "),_c('tr',[_c('td',[_v("color")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Color of the text.")])]),_v(" "),_c('tr',[_c('td',[_v("dismissible")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Adds a button to close the box to the top right corner.")])]),_v(" "),_c('tr',[_c('td',[_v("icon"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Inline MarkDown text of the icon displayed on the left.")])]),_v(" "),_c('tr',[_c('td',[_v("icon-size")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Resizes the icon. Supports integer-scaling of the icon dimensions e.g. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("2x")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("3x")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("4x")]),_v(", etc.")])]),_v(" "),_c('tr',[_c('td',[_v("icon-color")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Color of the icon.")])]),_v(" "),_c('tr',[_c('td',[_v("header"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Markdown text of the box header.")])]),_v(" "),_c('tr',[_c('td',[_v("type")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("info")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("warning")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("success")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("important")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("wrong")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tip")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("definition")]),_v(", or empty for default.")])]),_v(" "),_c('tr',[_c('td',[_v("theme")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("primary")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("secondary")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("success")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("danger")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("warning")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tip")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("light")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("dark")]),_v(" or empty for default.")])]),_v(" "),_c('tr',[_c('td',[_v("light")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Uses a light color scheme for the box.")])]),_v(" "),_c('tr',[_c('td',[_v("seamless")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Uses a seamless style for the box. If "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("light")]),_v(" is specified, this style will not be activated.")])]),_v(" "),_c('tr',[_c('td',[_v("no-border")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Removes border, except if styled by "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("border-color")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("border-left-color")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("no-backgound")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Removes background, except if styled by "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("backgound-color")]),_v(" option.")])]),_v(" "),_c('tr',[_c('td',[_v("no-icon")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Removes icon, except if icon is displayed via "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("icon")]),_v(" option.")])])])])]),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" warning\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('box',[_v("\n default\n")]),_v(" "),_c('box',{attrs:{"type":"info"}},[_v("\n info\n")]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_v("\n warning\n")]),_v(" "),_c('box',{attrs:{"type":"success"}},[_v("\n success\n")]),_v(" "),_c('box',{attrs:{"type":"important"}},[_v("\n important\n")]),_v(" "),_c('box',{attrs:{"type":"wrong"}},[_v("\n wrong\n")]),_v(" "),_c('box',{attrs:{"type":"tip"}},[_v("\n tip\n")]),_v(" "),_c('box',{attrs:{"type":"definition"}},[_v("\n definition\n")])],1)],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"code"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"code"}},[_c('span',{staticClass:"anchor",attrs:{"id":"code"}}),_c('strong',[_v("Code")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#code","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"code-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"code-2"}}),_v("Code"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#code-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('h4',{attrs:{"id":"themes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"themes"}}),_v("Themes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#themes","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("MarkBind can present formatted code blocks, be it fenced or inline, with either "),_c('strong',[_v("light")]),_v(" or "),_c('strong',[_v("dark")]),_v(" themes. The default is dark.")]),_v(" "),_c('p',[_v("Refer "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#style"}},[_v("here")]),_v(" for configuring MarkBind to use a specific theme for the code blocks.")]),_v(" "),_c('h4',{attrs:{"id":"fenced-code"}},[_c('span',{staticClass:"anchor",attrs:{"id":"fenced-code"}}),_v("Fenced Code"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#fenced-code","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("MarkBind provides several features, some of which are added on top of the existing functionality of Markdown's "),_c('em',[_v("fenced code blocks")]),_v(".")]),_v(" "),_c('p',[_c('small',[_v("More info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/extended-syntax#fenced-code-blocks"}},[_v("https://www.markdownguide.org/extended-syntax#fenced-code-blocks")])])]),_v(" "),_c('p',[_v("Features:")]),_v(" "),_c('ul',[_c('li',[_v("Syntax coloring")]),_v(" "),_c('li',[_v("Line numbering")]),_v(" "),_c('li',[_v("Line highlighting")]),_v(" "),_c('li',[_v("Code block headers")])]),_v(" "),_c('h5',{attrs:{"id":"syntax-coloring"}},[_c('span',{staticClass:"anchor",attrs:{"id":"syntax-coloring"}}),_v("Syntax coloring"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#syntax-coloring","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("To enable syntax coloring, specify a language next to the backticks before the fenced code block.")]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```xml")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" goo")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])],1)])]),_v(" "),_c('h5',{attrs:{"id":"line-numbering"}},[_c('span',{staticClass:"anchor",attrs:{"id":"line-numbering"}}),_v("Line numbering"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#line-numbering","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Line numbers are provided by default. To hide line numbers, add the class "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-line-numbers")]),_v(" to the code block as below")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```xml {.no-line-numbers}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" goo")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])],1)]),_v(" "),_c('p',[_v("You can have your line numbers start with a value other than "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("1")]),_v(" with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start-from")]),_v(" attribute.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```js {start-from=6}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("function add(a, b) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return a + b;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pre',[_c('code',{pre:true,attrs:{"style":"counter-reset: line 5;","class":"hljs js"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("function")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("add")]),_v("("),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("a, b")]),_v(") ")]),_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" a + b;\n")]),_c('span',[_v("}\n")])])])])],1)]),_v(" "),_c('h5',{attrs:{"id":"line-highlighting"}},[_c('span',{staticClass:"anchor",attrs:{"id":"line-highlighting"}}),_v("Line highlighting"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#line-highlighting","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("highlight-lines")]),_v(" attribute to add highlighting to your code block. Refer to the example code block\nbelow for a visual demonstration of all the possible ways of highlighting a code block.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```java {highlight-lines=\"1[:],3['Inventory'],4['It\\'s designed'],5,6[8:18],8[0::2],12[:]-14,16-18,20[12:]-22,24[1::]-26\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("import java.util.List;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("// Inventory is a class that stores inventory items in a list.")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("// It's designed as a thin wrapper on the List interface.")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("public class Inventory {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" private List items;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public int getItemCount(){")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.size();")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public bool isEmpty() {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.isEmpty();")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public Item getItem(idx: int) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.get(idx);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public void addItem(item: Item) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.add(item);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public void removeItem(item: Item) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.remove(item);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs java"}},[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("import")]),_v(" java.util.List;\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_c('span',[_v("// "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("Inventory")]),_v(" is a class that stores inventory items in a list.")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_c('span',[_v("// "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("It's designed")]),_v(" as a thin wrapper on the List interface.")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-class"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("class")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("Inventory")]),_v(" ")]),_v("{")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("private")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("List")]),_v(" items;\n")])]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword highlighted"}},[_v("public")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")]),_c('span',{pre:true,attrs:{"class":"hljs-keyword highlighted"}},[_v("int")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("getItemCount")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("()")])]),_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.size();\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" bool "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("isEmpty")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("()")]),_v(" ")]),_v("{\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.isEmpty();\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" }\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" Item "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("getItem")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("(idx: "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("int")]),_v(")")]),_v(" ")]),_v("{")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.get(idx);")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("}")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("void")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title highlighted"}},[_v("addItem")]),_c('span',{pre:true,attrs:{"class":"hljs-params highlighted"}},[_v("(item: Item)")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")])]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("{")]),_v("\n")])]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.add(item);")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("}")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword highlighted"}},[_v("void")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")]),_c('span',{pre:true,attrs:{"class":"hljs-title highlighted"}},[_v("removeItem")]),_c('span',{pre:true,attrs:{"class":"hljs-params highlighted"}},[_v("(item: Item)")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")])]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("{")]),_v("\n")])]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.remove(item);")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("}")]),_v("\n")]),_c('span',[_v("}\n")])])])])],1)]),_v(" "),_c('p',[_v("The value of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("highlight-lines")]),_v(" is composed of "),_c('em',[_v("highlight rules")]),_v(", separated by commas.\nThese rules dictate where and how MarkBind should highlight your code block.")]),_v(" "),_c('p',[_v("You can specify the highlight rules in many different ways, each is detailed as follows:")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Format")]),_v(" "),_c('th',[_v("Example")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_c('strong',[_v("Full text highlight")]),_c('br'),_v("Highlights the entirety of the text portion of the line")]),_v(" "),_c('td',[_v("The line numbers as-is (subject to the starting line number set in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start-from")]),_v(").")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("3")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("5")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Substring highlight")]),_c('br'),_v("Highlights "),_c('em',[_v("all")]),_v(" occurrences of a substring in the line")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineNumber[part]")]),_c('br'),_c('br'),_c('em',[_v("Limitations")]),_v(": "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("part")]),_v(" must be wrapped in quotes. If "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("part")]),_v(" contains a quote, escape it with a backslash ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\\")]),_v(").")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("3['Inventory']")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("4['It\\'s designed']")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Character-bounded highlight")]),_c('br'),_v("Highlights a specific range of characters in the line")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineNumber[start:end]")]),_v(", highlights from character position "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start")]),_v(" up to (but not including) "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("end")]),_v("."),_c('br'),_c('br'),_v("Character positions start from "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0")]),_v(" as the first non-whitespace character, upwards."),_c('br'),_c('br'),_v("Omit either "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start")]),_v("/"),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("end")]),_v(" to highlight from the start / up to the end, respectively.")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("19[1:5]")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("30[10:]")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("35[:20]")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Word-bounded highlight")]),_c('br'),_v("Highlights a specific range of words in the line")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineNumber[start::end]")]),_v(", highlights from word position "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start")]),_v(" up to (but not including) "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("end")]),_v("."),_c('br'),_c('br'),_v("Word positions start from "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0")]),_v(" as the first word (sequence of non-whitespace characters), upwards."),_c('br'),_c('br'),_v("Omit either "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start")]),_v("/"),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("end")]),_v(" to highlight from the start / up to the end, respectively.")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("5[2::4]")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("9[1::]")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("11[::5]")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Full line highlight")]),_c('br'),_v("Highlights the entirety of the line")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineNumber[:]")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("7[:]")])])])])])]),_c('p',[_v("Not only a single line, MarkBind is also capable of highlighting ranges of lines in various ways. In general, the syntax\nfor range highlighting consists of two single line highlight rules as listed above joined by a dash ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v(").")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Format")]),_v(" "),_c('th',[_v("Example")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_c('strong',[_v("Ranged full text highlight")]),_c('br'),_v("Highlights from the first non-whitespace character to the last non-whitespace character")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart-lineEnd")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("2-4")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Ranged full line highlight")]),_c('br'),_v("Like ranged full text highlight, but highlights the entirety of the lines")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart[:]-lineEnd")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart-lineEnd[:]")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("1[:]-5")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("10-12[:]")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Ranged character-bounded highlight")]),_c('br'),_v("Highlights the text portion of the lines within the range, but starts/ends at an arbitrary character")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart[start:]-lineEnd")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart-lineEnd[:end]")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("3[2:]-7")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("4-9[:17]")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Ranged word-bounded highlight")]),_c('br'),_v("Like ranged character-bounded highlight, but starts/ends at an arbitrary word")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart[start::]-lineEnd")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart-lineEnd[::end]")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("16[1::]-20")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("22-24[::3]")])])])])])]),_c('h5',{attrs:{"id":"heading-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-2"}}),_v("Heading"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("To add a heading, add the attribute "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("heading")]),_v(" with the heading text as the value, as shown below.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```xml {heading=\"Heading title\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" goo")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Heading title")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Heading title","class":"hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])])])],1)]),_v(" "),_c('p',[_v("Headings support inline Markdown, except for "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Inline Code")]),_v(" and "),_c('span',{staticClass:"dimmed"},[_v("Dim")]),_v(" text styles.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```{heading=\"**Bold**, _Italic_, ___Bold and Italic___, ~~Strike through~~, ****Super Bold****, !!Underline!!, ==Highlight==, :+1: :exclamation: :x: :construction:
          We support page breaks\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading inline-markdown-heading"},[_c('span',[_c('strong',[_v("Bold")]),_v(", "),_c('em',[_v("Italic")]),_v(", "),_c('em',[_c('strong',[_v("Bold and Italic")])]),_v(", "),_c('s',[_v("Strike through")]),_v(", "),_c('strong',[_c('strong',[_v("Super Bold")])]),_v(", "),_c('span',{staticClass:"underline"},[_v("Underline")]),_v(", "),_c('mark',[_v("Highlight")]),_v(", 👍 ❗️ ❌ 🚧"),_c('br'),_v("We support page breaks")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"**Bold**, _Italic_, ___Bold and Italic___, ~~Strike through~~, ****Super Bold****, !!Underline!!, ==Highlight==, :+1: :exclamation: :x: :construction:
          We support page breaks","class":"hljs"}},[_c('span',[_v("\n")])])])])])])],1)]),_v(" "),_c('h5',{attrs:{"id":"using-multiple-features"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-multiple-features"}}),_v("Using multiple features"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-multiple-features","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can also use multiple features together, as shown below.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```xml {highlight-lines=\"2\" heading=\"Heading title\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" goo")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Heading title")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Heading title","class":"hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])])])],1)]),_v(" "),_c('h5',{attrs:{"id":"copy-button"}},[_c('span',{staticClass:"anchor",attrs:{"id":"copy-button"}}),_v("Copy button"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#copy-button","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("A "),_c('em',[_v("copy")]),_v(" button can be added to code blocks using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockCopyButtons")]),_v(" plugin:")]),_v(" "),_c('panel',{attrs:{"type":"seamless","popup-url":"usingPlugins.html#plugin-codeblockcopybuttons"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("User Guide: Using Plugins → Plugin: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockCopyButtons")])])])]},proxy:true}])},[_v(" "),_c('div',[_c('h3',{attrs:{"id":"plugin-codeblockcopybuttons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugin-codeblockcopybuttons"}}),_v("Plugin: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockCopyButtons")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-codeblockcopybuttons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("This plugin adds a "),_c('em',[_v("copy")]),_v(" button to fenced code blocks so that readers can copy the code easily.")]),_v(" "),_c('p',[_v("To enable it, simply add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockCopyButtons")]),_v(" to your site's plugins.")]),_v(" "),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugins\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"codeBlockCopyButtons\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v("}\n")])])])])]),_c('p',[_v("This is what it'll look like once added:")]),_v(" "),_c('pic',{attrs:{"src":"/images/copyCode.png","width":"750","alt":"copyCode"}})],1)]),_v(" "),_c('br'),_v(" "),_c('h5',{attrs:{"id":"wrap-text-button"}},[_c('span',{staticClass:"anchor",attrs:{"id":"wrap-text-button"}}),_v("Wrap text button"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#wrap-text-button","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("A "),_c('em',[_v("wrap text")]),_v(" button can be added to code blocks using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockWrapButtons")]),_v(" plugin:")]),_v(" "),_c('panel',{attrs:{"type":"seamless","popup-url":"usingPlugins.html#plugin-codeblockwrapbuttons"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("User Guide: Using Plugins → Plugin: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockWrapButtons")])])])]},proxy:true}])},[_v(" "),_c('div',[_c('h3',{attrs:{"id":"plugin-codeblockwrapbuttons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugin-codeblockwrapbuttons"}}),_v("Plugin: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockWrapButtons")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-codeblockwrapbuttons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("This plugin adds a "),_c('em',[_v("wrap text")]),_v(" button to fenced code blocks so that readers can read long lines of code without scrolling sideways.")]),_v(" "),_c('p',[_v("To enable it, simply add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockWrapButtons")]),_v(" to your site's plugins.")]),_v(" "),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugins\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"codeBlockWrapButtons\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v("}\n")])])])])]),_c('p',[_v("This is what it'll look like once added:")]),_v(" "),_c('pic',{attrs:{"src":"/images/wrapCodeOff.png","width":"750","alt":"wrapCodeOff"}}),_v(" "),_c('p',[_v("Clicking the "),_c('em',[_v("wrap text")]),_v(" button will result in the following:")]),_v(" "),_c('pic',{attrs:{"src":"/images/wrapCodeOn.png","width":"750","alt":"wrapCodeOn"}}),_v(" "),_c('p',[_v("In case a single long word is encountered, it will be split across multiple lines similar to the following:")]),_v(" "),_c('pic',{attrs:{"src":"/images/wrapCodeOnWordBreak.png","width":"750","alt":"wrapCodeOnWordBreak"}})],1)]),_v(" "),_c('br'),_v(" "),_c('h4',{attrs:{"id":"inline-code"}},[_c('span',{staticClass:"anchor",attrs:{"id":"inline-code"}}),_v("Inline Code"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#inline-code","onclick":"event.stopPropagation()"}})]),_v(" "),_c('h5',{attrs:{"id":"syntax-coloring-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"syntax-coloring-2"}}),_v("Syntax coloring"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#syntax-coloring-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("MarkBind can apply syntax-coloring on inline code too.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs"}},[_c('span',[_v("Consider the xml code `goo`{.xml},
          \n")]),_c('span',[_v("or the java code `public static void main(String[] args)`{.java}.\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Consider the xml code "),_c('code',{pre:true,attrs:{"class":"hljs inline xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v(","),_c('br'),_v("\nor the java code "),_c('code',{pre:true,attrs:{"class":"hljs inline java"}},[_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("static")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("void")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("main")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("(String[] args)")])])]),_v(".")])])],1)]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("```xml\n")]),_c('span',[_v("\n")]),_c('span',[_v(" goo\n")]),_c('span',[_v("\n")]),_c('span',[_v("```\n")])])]),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("`goo`{.xml}\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])]),_c('p',[_v("Syntax coloring for inline code: "),_c('code',{pre:true,attrs:{"class":"hljs inline xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v(" too!")])])],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"dates"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"dates"}},[_c('span',{staticClass:"anchor",attrs:{"id":"dates"}}),_c('strong',[_v("Dates")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#dates","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"dates-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"dates-2"}}),_v("Dates"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#dates-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Markbind supports date formatting and simple calculations")]),_v(" as a Nunjucks "),_c('a',{attrs:{"href":"https://mozilla.github.io/nunjucks/templating.html#filters"}},[_v("filter")]),_v(".")]),_v(" "),_c('p',[_c('strong',[_v("Syntax:")]),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("{ baseDate | date(format, daysToAdd) }}")])]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('p',[_v("20 days after 1st Jan 2020:")]),_v(" "),_c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ \"2020-01-01\" | date(\"ddd, Do MMM, YYYY\", 20) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Tue, 21st Jan, 2020")])]),_v(" "),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("The baseDate follows the format: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("YYYY-MM-DD")])]),_v(" "),_c('p',[_v("The default output format is "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"ddd D MMM\"")]),_v(" e.g. Fri 6 Mar")])]),_v(" "),_c('h3',{attrs:{"id":"using-variables"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-variables"}}),_v("Using variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-variables","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("% set base1 = \"2020-01-01\" %}")]),_v(" "),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("% set format1 = \"DD MM YYYY\" %}")]),_v(" "),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("% set format2 = \"ddd Do MMM (DD/MM/YYYY)\" %}")])]),_v(" "),_c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Wed 1 Jan"),_c('br')]),_v(" "),_c('h4',{attrs:{"id":"custom-formatting"}},[_c('span',{staticClass:"anchor",attrs:{"id":"custom-formatting"}}),_v("Custom formatting"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#custom-formatting","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format1) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" 01 01 2020"),_c('br')]),_v(" "),_c('h4',{attrs:{"id":"adding-days"}},[_c('span',{staticClass:"anchor",attrs:{"id":"adding-days"}}),_v("Adding days"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#adding-days","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format2, 0) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Wed 1st Jan (01/01/2020)"),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format2, 10) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Sat 11th Jan (11/01/2020)"),_c('br')]),_v(" "),_c('h4',{attrs:{"id":"page-variables"}},[_c('span',{staticClass:"anchor",attrs:{"id":"page-variables"}}),_v("Page variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#page-variables","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Dates can be supplied using "),_c('a',{attrs:{"href":"/userGuide/reusingContents.html#variables"}},[_v("page variables")]),_v(" for convenience.")]),_v(" "),_c('p',[_v("Inside "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("variables.md")]),_v(" or referencing page:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("{% set date_pagevar = \"2020-03-06\" %}\n")])])]),_c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ date_pagevar | date(format2) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Fri 6th Mar (06/03/2020) "),_c('br')]),_v(" "),_c('h3',{attrs:{"id":"advanced-formatting"}},[_c('span',{staticClass:"anchor",attrs:{"id":"advanced-formatting"}}),_v("Advanced Formatting"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#advanced-formatting","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("The output date can be formatted to suit your needs by specifying a format string as an argument to the date filter.")]),_v(" "),_c('p',[_v("Default format: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"ddd D MMM\"")]),_v(" e.g. Fri 6 Mar")]),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("Brief reference")])])]},proxy:true}])},[_v(" "),_c('p',[_v("Token | Output")]),_v(" "),_c('ul',[_c('li',[_v("| -\nD | 1\nDo | 1st\nDD | 01\nM | 1\nMM | 01\nMMM | Jan\nMMMM | January\nYY | 19\nYYYY | 2019")])])]),_v(" "),_c('p',[_v("Full formatting reference available "),_c('a',{attrs:{"href":"https://momentjs.com/docs/#/displaying/format/"}},[_v("here")]),_v(".")]),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}})],1),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',[_c('span',[_c('code',{pre:true},[_v("{"),_c('a'),_v("% set base1 = \"2019-08-12\" %}")]),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("% set format1 = \"DD MM YYYY\" %}")]),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("% set format2 = \"ddd Do MM\" %}")]),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date }}")]),_v(" ``"),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format1) }}")]),_v(" ``"),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format1, 10) }}")]),_v(" ``"),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format2, 10) }}")]),_v(" ``"),_c('br')])])],1),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Mon 12 Aug"),_c('br'),_v("\n12 08 2019"),_c('br'),_v("\n22 08 2019"),_c('br'),_v("\nThu 22/08")])])],1)]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('box',[_c('span',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ \"2019-08-12\" | date(\"DD.MM.YYYY\", 10) }}")]),_v(" ``"),_c('br')])]),_v(" "),_c('p',[_v("22.08.2019\n")])],1),_v(" "),_c('p')],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"diagrams"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"diagrams"}},[_c('span',{staticClass:"anchor",attrs:{"id":"diagrams"}}),_c('strong',[_v("Diagrams")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#diagrams","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"diagrams-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"diagrams-2"}}),_v("Diagrams"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#diagrams-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can use the "),_c('a',{attrs:{"href":"http://plantuml.com/"}},[_v("PlantUML")]),_v(" syntax to add diagrams.")]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_c('strong',[_c('a',{attrs:{"href":"https://www.java.com/en/download/"}},[_v("Java")]),_v(" and\n"),_c('a',{attrs:{"href":"https://www.graphviz.org/download/"}},[_v("Graphviz")]),_v("\nmust be installed to use this feature")])]),_v(" "),_c('ul',[_c('li',[_v("Java 8 or later (required to run the PlantUML JAR executable)")]),_v(" "),_c('li',[_v("Graphviz v2.38 or later (required to generate "),_c('em',[_v("all")]),_v(" diagrams)")])])]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("\n")]),_c('span',[_v("@startuml\n")]),_c('span',[_v("alice -> bob ++ : hello\n")]),_c('span',[_v("bob -> bob ++ : self call\n")]),_c('span',[_v("bob -> bib ++ #005500 : hello\n")]),_c('span',[_v("bob -> george ** : create\n")]),_c('span',[_v("return done\n")]),_c('span',[_v("return rc\n")]),_c('span',[_v("bob -> george !! : delete\n")]),_c('span',[_v("return success\n")]),_c('span',[_v("@enduml\n")]),_c('span',[_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('pic',{attrs:{"src":"/userGuide/diagrams/sequence.png","width":"300"}})],1)])],1)])]),_v(" "),_c('p',[_v("Alternatively, a PlantUML diagram can be specified in a separate "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".puml")]),_v(" file and inserted into a page using a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" tag.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("diagrams/sequence.puml")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("@startuml\n")]),_c('span',[_v("alice -> bob ++ : hello\n")]),_c('span',[_v("bob -> bob ++ : self call\n")]),_c('span',[_v("bob -> bib ++ #005500 : hello\n")]),_c('span',[_v("bob -> george ** : create\n")]),_c('span',[_v("return done\n")]),_c('span',[_v("return rc\n")]),_c('span',[_v("bob -> george !! : delete\n")]),_c('span',[_v("return success\n")]),_c('span',[_v("@enduml\n")])])]),_c('p',[_v("in another file:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("puml")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"diagrams/sequence.puml\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"300\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('pic',{attrs:{"src":"/userGuide/diagrams/sequence.png","width":"300"}})],1)])],1)]),_v(" "),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("The full PlantUML syntax reference can be found at "),_c('a',{attrs:{"href":"http://plantuml.com/guide"}},[_v("plantuml.com/guide")])])]),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("More examples")])]},proxy:true}])},[_v(" "),_c('span',{attrs:{"id":"puml-examples"}},[_c('p',[_c('strong',[_v("Sequence Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/sequence.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Use Case Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/usecase.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Class Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/class.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Activity Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/activity.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Component Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/component.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("State Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/state.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Object Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/object.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Gantt Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/gantt.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Entity Relation Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/entityrelation.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Ditaa Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/ditaa.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Archimate Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/archimate.png"}})],1)])]),_v(" "),_c('p'),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("alt")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The alternative text of the diagram.")])]),_v(" "),_c('tr',[_c('td',[_v("height")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The height of the diagram in pixels.")])]),_v(" "),_c('tr',[_c('td',[_v("name")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The name of the output file.")])]),_v(" "),_c('tr',[_c('td',[_v("src")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The URL of the diagram if your diagram is in another "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".puml")]),_v(" file."),_c('br'),_v("The URL can be specified as absolute or relative references. More info in: "),_c('em',[_c('a',{attrs:{"href":"/userGuide/formattingContents.html#intraSiteLinks"}},[_v("Intra-Site Links")])])])]),_v(" "),_c('tr',[_c('td',[_v("width")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The width of the diagram in pixels."),_c('br'),_v("If both width and height are specified, width takes priority over height. It is to maintain the diagram's aspect ratio.")])])])])]),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("\n")]),_c('span',[_v("@startuml\n")]),_c('span',[_v("alice -> bob ++ : hello\n")]),_c('span',[_v("bob -> bob ++ : self call\n")]),_c('span',[_v("@enduml\n")]),_c('span',[_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('div',[_c('p',[_c('strong',[_v("Sequence Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/sequence.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Use Case Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/usecase.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Class Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/class.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Activity Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/activity.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Component Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/component.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("State Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/state.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Object Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/object.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Gantt Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/gantt.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Entity Relation Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/entityrelation.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Ditaa Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/ditaa.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Archimate Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/archimate.png"}})],1)])])],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"dropdowns"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"dropdowns"}},[_c('span',{staticClass:"anchor",attrs:{"id":"dropdowns"}}),_c('strong',[_v("Dropdowns")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#dropdowns","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"dropdowns-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"dropdowns-2"}}),_v("Dropdowns"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#dropdowns-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("While the main use case for dropdowns is under navbars, they can also be used as top-level components.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*Action*\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Action"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Another action"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Something else here"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"separator\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-divider\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Separated link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"before\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-info\"")]),_v(">")]),_v("Segmented"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Right aligned list\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Something else here"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn-group d-flex mt-3\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"group\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-danger w-100\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(">")]),_v("Left"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"w-100\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-warning dropdown-toggle w-100\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Action\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"caret\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("ul")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-menu\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-menu\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Action"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Another action"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Something else here"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"separator\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-divider\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Separated link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-success w-100\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(">")]),_v("Right"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('dropdown',{attrs:{"type":"primary"},scopedSlots:_u([{key:"header",fn:function(){return [_c('em',[_v("Action")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])]),_v(" "),_c('li',{staticClass:"dropdown-divider",attrs:{"role":"separator"}}),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Separated link")])])]),_v(" "),_c('dropdown',{attrs:{"type":"info"},scopedSlots:_u([{key:"before",fn:function(){return [_c('button',{staticClass:"btn btn-info",attrs:{"type":"button"}},[_v("Segmented")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("...")])])]),_v(" "),_c('dropdown',{attrs:{"type":"primary","menu-align-right":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Right aligned list")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])])]),_v(" "),_c('div',{staticClass:"btn-group d-flex mt-3",attrs:{"role":"group"}},[_c('a',{staticClass:"btn btn-danger w-100",attrs:{"href":"#dropdown","role":"button"}},[_v("Left")]),_v(" "),_c('dropdown',{staticClass:"w-100",scopedSlots:_u([{key:"button",fn:function(){return [_c('button',{staticClass:"btn btn-warning dropdown-toggle w-100",attrs:{"type":"button"}},[_v("\n Action\n "),_c('span',{staticClass:"caret"})])]},proxy:true},{key:"dropdown-menu",fn:function(){return [_c('ul',{staticClass:"dropdown-menu"},[_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])]),_v(" "),_c('li',{staticClass:"dropdown-divider",attrs:{"role":"separator"}}),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Separated link")])])])]},proxy:true}])}),_v(" "),_c('a',{staticClass:"btn btn-success w-100",attrs:{"href":"#dropdown","role":"button"}},[_v("Right")])],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Dropdowns can also be nested within each other to create multi-level submenus.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*Multi-Level Dropdown*\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Item"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Another item"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*Submenu*\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Item"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Another item"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('dropdown',{attrs:{"type":"primary"},scopedSlots:_u([{key:"header",fn:function(){return [_c('em',[_v("Multi-Level Dropdown")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Item")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another item")])]),_v(" "),_c('dropdown',{scopedSlots:_u([{key:"header",fn:function(){return [_c('em',[_v("Submenu")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Item")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another item")])])])],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("disabled")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether Dropdown can be opened.")])]),_v(" "),_c('tr',[_c('td',[_v("menu-align-right")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether the dropdown list will be right-aligned.")])]),_v(" "),_c('tr',[_c('td',[_v("header"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Dropdown button header text. (Supports inline MarkDown syntax)")])]),_v(" "),_c('tr',[_c('td',[_v("type")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("primary")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("danger")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("info")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("warning")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("success")]),_v(".")])])])])]),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" You may refer to "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/4.0/components/buttons/"}},[_v("this documentation")]),_v(" regarding how you can use the "),_c('strong',[_v("Bootstrap buttons")]),_v(", and how to style them.")])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Action\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")])]),_v("Action"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")])]),_v("Another action"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"separator\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-divider\"")]),_v(">")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")])]),_v("Separated link"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('dropdown',{attrs:{"type":"primary"},scopedSlots:_u([{key:"header",fn:function(){return [_v("Action")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])]),_v(" "),_c('li',{staticClass:"dropdown-divider",attrs:{"role":"separator"}}),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Separated link")])])]),_v(" "),_c('dropdown',{attrs:{"type":"info"},scopedSlots:_u([{key:"before",fn:function(){return [_c('button',{staticClass:"btn btn-info",attrs:{"type":"button"}},[_v("Segmented")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("...")])])]),_v(" "),_c('p'),_v(" "),_c('div',{staticClass:"btn-group d-flex",attrs:{"role":"group"}},[_c('a',{staticClass:"btn btn-danger w-100",attrs:{"href":"#dropdown","role":"button"}},[_v("Left")]),_v(" "),_c('dropdown',{staticClass:"w-100",scopedSlots:_u([{key:"button",fn:function(){return [_c('button',{staticClass:"btn btn-warning dropdown-toggle w-100",attrs:{"type":"button"}},[_v("\n Action\n "),_c('span',{staticClass:"caret"})])]},proxy:true},{key:"dropdown-menu",fn:function(){return [_c('ul',{staticClass:"dropdown-menu"},[_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])]),_v(" "),_c('li',{staticClass:"dropdown-divider",attrs:{"role":"separator"}}),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Separated link")])])])]},proxy:true}])}),_v(" "),_c('a',{staticClass:"btn btn-success w-100",attrs:{"href":"#dropdown","role":"button"}},[_v("Right")])],1)],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"embeds"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"embeds"}},[_c('span',{staticClass:"anchor",attrs:{"id":"embeds"}}),_c('strong',[_v("Embeds")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#embeds","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"embeds-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"embeds-2"}}),_v("Embeds"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#embeds-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("There are easy ways to embed media content such as YouTube videos and PowerPoint slides")]),_v(".")]),_v(" "),_c('h6',{attrs:{"id":"embedding-youtube-videos"}},[_c('span',{staticClass:"anchor",attrs:{"id":"embedding-youtube-videos"}}),_v("Embedding Youtube Videos"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#embedding-youtube-videos","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Here are three ways of embedding YouTube videos and one example of how it will look in the page.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("youtube")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("v40b3ExbM0c")]),_v(")\n")]),_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("youtube")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("http://www.youtube.com/watch?v=v40b3ExbM0c")]),_v(")\n")]),_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("youtube")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("http://youtu.be/v40b3ExbM0c")]),_v(")\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"block-embed block-embed-service-youtube"},[_c('iframe',{attrs:{"type":"text/html","src":"//www.youtube.com/embed/v40b3ExbM0c","frameborder":"0","width":"640","height":"390","webkitallowfullscreen":"","mozallowfullscreen":"","allowfullscreen":""}})])])],1)]),_v(" "),_c('p',[_v("More media blocks, embedding services and additional options can be found in "),_c('a',{attrs:{"href":"https://github.com/rotorz/markdown-it-block-embed"}},[_v("Markdown-it documentation")]),_v(".")]),_v(" "),_c('h6',{attrs:{"id":"embedding-powerpoint-slides-using-the-embed-url-from-powerpoint-online"}},[_c('span',{staticClass:"anchor",attrs:{"id":"embedding-powerpoint-slides-using-the-embed-url-from-powerpoint-online"}}),_v("Embedding Powerpoint Slides (using the embed url from Powerpoint online)"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#embedding-powerpoint-slides-using-the-embed-url-from-powerpoint-online","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Here is an example of embedding a PowerPoint slide deck:")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("powerpoint")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://onedrive.live.com/embed?cid=A5AF047C4CAD67AB&resid=A5AF047C4CAD67AB%212070&authkey=&em=2")]),_v(")\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"block-embed block-embed-service-powerpoint"},[_c('iframe',{attrs:{"type":"text/html","src":"https://onedrive.live.com/embed?cid=A5AF047C4CAD67AB&resid=A5AF047C4CAD67AB%212070&authkey=&em=2&action=embedview&wdAr=1.3333333333333333","frameborder":"0","width":"610","height":"481","webkitallowfullscreen":"","mozallowfullscreen":"","allowfullscreen":""}})])])],1)]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("youtube")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("v40b3ExbM0c")]),_v(")\n")]),_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("youtube")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("http://www.youtube.com/watch?v=v40b3ExbM0c")]),_v(")\n")]),_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("youtube")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("http://youtu.be/v40b3ExbM0c")]),_v(")\n")]),_c('span',[_v("\n")]),_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("powerpoint")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://onedrive.live.com/embed?cid=A5AF047C4CAD67AB&resid=A5AF047C4CAD67AB%212070&authkey=&em=2")]),_v(")\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("Embedded YouTube video:")]),_v(" "),_c('div',{staticClass:"block-embed block-embed-service-youtube"},[_c('iframe',{attrs:{"type":"text/html","src":"//www.youtube.com/embed/v40b3ExbM0c","frameborder":"0","width":"640","height":"390","webkitallowfullscreen":"","mozallowfullscreen":"","allowfullscreen":""}})]),_v(" "),_c('p',[_v("Embedded slide deck:")]),_v(" "),_c('div',{staticClass:"block-embed block-embed-service-powerpoint"},[_c('iframe',{attrs:{"type":"text/html","src":"https://onedrive.live.com/embed?cid=A5AF047C4CAD67AB&resid=A5AF047C4CAD67AB%212070&authkey=&em=2&action=embedview&wdAr=1.3333333333333333","frameborder":"0","width":"610","height":"481","webkitallowfullscreen":"","mozallowfullscreen":"","allowfullscreen":""}})])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"emoji"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"emoji"}},[_c('span',{staticClass:"anchor",attrs:{"id":"emoji"}}),_c('strong',[_v("Emoji")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#emoji","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"emoji-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"emoji-2"}}),_v("Emoji"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#emoji-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v(":+1: :exclamation: :x: :construction:\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("👍 ❗️ ❌ 🚧")])])],1)])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" "),_c('a',{attrs:{"href":"https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md"}},[_v("the list of supported emoji")]),_v(".")])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v(":+1: :exclamation: :x: :construction:\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("👍 ❗️ ❌ 🚧\n")])]),_c('p')])]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"footnotes"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"footnotes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"footnotes"}}),_c('strong',[_v("Footnotes")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#footnotes","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"footnotes-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"footnotes-2"}}),_v("Footnotes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#footnotes-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('span',{attrs:{"id":"main-example-markbind"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**Normal footnotes:**")]),_v("\n")]),_c('span',[_v("Here is a footnote reference,[^1] and another.[^longnote]\n")]),_c('span',[_v("\n")]),_c('span',[_v("["),_c('span',{pre:true,attrs:{"class":"hljs-symbol"}},[_v("^1")]),_v("]: "),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("Here is the footnote. Footnotes will appear at the bottom of the page.")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("["),_c('span',{pre:true,attrs:{"class":"hljs-symbol"}},[_v("^longnote")]),_v("]: "),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("Here's one with multiple blocks.")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" Subsequent paragraphs are indented to show that they")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("belong to the previous footnote.")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**Inline footnotes:**")]),_v("\n")]),_c('span',[_v("Here is an inline note.^[Inlines notes are easier to write, since\n")]),_c('span',[_v("you don't have to pick an identifier and move down to type the\n")]),_c('span',[_v("note.]\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('strong',[_v("Normal footnotes:")]),_v("\nHere is a footnote reference,"),_c('trigger',{attrs:{"for":"pop:footnotefn-45-1"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-45-1"}},[_v("[1]")])])]),_v(" and another."),_c('trigger',{attrs:{"for":"pop:footnotefn-45-2"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-45-2"}},[_v("[2]")])])])],1),_v(" "),_c('p',[_c('strong',[_v("Inline footnotes:")]),_v("\nHere is an inline note."),_c('trigger',{attrs:{"for":"pop:footnotefn-45-3"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-45-3"}},[_v("[3]")])])])],1)])],1)])]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Normal footnotes won't work when used inside the attributes of markbind components!\n"),_c('br'),_v("\nFor example, it won't work in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("header")]),_v(" attribute of "),_c('a',{attrs:{"href":"/userGuide/components/presentation.html#panels"}},[_v("panels")]),_v(".")])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("**Normal footnotes:**\n")]),_c('span',[_v("Here is a footnote reference,[^1] and another.[^longnote]\n")]),_c('span',[_v("\n")]),_c('span',[_v("[^1]: Here is the footnote. Footnotes will appear at the bottom of the page.\n")]),_c('span',[_v("\n")]),_c('span',[_v("[^longnote]: Here's one with multiple blocks.\n")]),_c('span',[_v(" Subsequent paragraphs are indented to show that they\n")]),_c('span',[_v("belong to the previous footnote.\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_v("\n1 + 1 = 2 ^[Math]\n")])],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"front-matter"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"front-matter"}},[_c('span',{staticClass:"anchor",attrs:{"id":"front-matter"}}),_c('strong',[_v("Front Matter")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#front-matter","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"front-matter-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"front-matter-2"}}),_v("Front Matter"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#front-matter-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("You can use a "),_c('em',[_v("Front Matter")]),_v(" section to specify page properties such as the title and keywords of the page.")]),_v(" To specify front matter for a page, insert a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" tag in the following format at the beginning of the page.")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" property1: value1\n")]),_c('span',[_v(" property2: value2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])]),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Here, we set the page "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("title")]),_v(" attribute as "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Binary Search Tree")]),_v(".")],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: Binary Search Tree\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_c('p',[_v("Should you need more expressive formatting, or encounter any issues when formatting the frontmatter, note that the frontmatter follows the "),_c('a',{attrs:{"href":"https://yaml.org/refcard.html"}},[_v("yaml")]),_v(" spec.")])]),_v(" "),_c('p',[_c('strong',[_v("Page properties:")])]),_v(" "),_c('ul',[_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("title")])]),_v(": The title of the page. Will be used as the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" attribute of the HTML page generated.")]),_v(" "),_c('li',[_v("Other properties such as "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("keywords")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("layout")]),_v(", etc. will be explained in other places of this user guide.")])]),_v(" "),_c('div',[_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Note: Page properties that are defined in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" for a particular page will override those defined in the front matter of the page.")])])],1),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: Binary Search Tree\n")]),_c('span',[_v(" pageNav: 2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")])])])])],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"headings"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"headings"}},[_c('span',{staticClass:"anchor",attrs:{"id":"headings"}}),_c('strong',[_v("Headings")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#headings","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"headings-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"headings-2"}}),_v("Headings"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#headings-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can prepend the heading text with 1-6 "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("#")]),_v(" characters to indicate headings of levels 1-6.")]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("### Heading level 3")]),_v("\n")]),_c('span',[_v("...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("###### Heading level 6")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('h3',{attrs:{"id":"heading-level-3"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-3"}}),_v("Heading level 3"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-3","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("...")]),_v(" "),_c('h6',{attrs:{"id":"heading-level-6"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-6"}}),_v("Heading level 6"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-6","onclick":"event.stopPropagation()"}})])])],1)])]),_v(" "),_c('p',[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" "),_c('strong',[_v("MarkBind auto-generates anchors for all headings.")]),_c('br'),_v("\nIf the heading text is "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Foo Bar (Goo)")]),_v(", the ID of the generated anchor will be "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("foo-bar-goo")]),_v(" (all lower case, special characters omitted, joined by "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v(").")]),_v(" "),_c('p',[_c('small',[_v("Alternative syntax, more info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/basic-syntax#headings"}},[_v("https://www.markdownguide.org/basic-syntax#headings")])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("### Heading level 3")]),_v("\n")]),_c('span',[_v("...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("###### Heading level 6")]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('h3',{attrs:{"id":"heading-level-3-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-3-2"}}),_v("Heading level 3"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-3-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("...")]),_v(" "),_c('h6',{attrs:{"id":"heading-level-6-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-6-2"}}),_v("Heading level 6"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-6-2","onclick":"event.stopPropagation()"}})])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"horizontal-rules"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"horizontal-rules"}},[_c('span',{staticClass:"anchor",attrs:{"id":"horizontal-rules"}}),_c('strong',[_v("Horizontal Rules")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#horizontal-rules","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"horizontal-rules-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"horizontal-rules-2"}}),_v("Horizontal Rules"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#horizontal-rules-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Use three or more asterisks ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("***")]),_v("), dashes ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("---")]),_v("), or underscores ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("___")]),_v(") to indicate a horizontal line.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("****")]),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("*")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("-----")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__")])])]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('hr'),_v(" "),_c('hr'),_v(" "),_c('hr')])],1)]),_v(" "),_c('h3',{attrs:{"id":"different-types-of-horizontal-rules"}},[_c('span',{staticClass:"anchor",attrs:{"id":"different-types-of-horizontal-rules"}}),_v("Different Types Of Horizontal Rules"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#different-types-of-horizontal-rules","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Add additional classes to modify the style, thickness, and color of a horizontal line.")]),_v(" "),_c('p',[_v("Available style classes:")]),_v(" "),_c('ul',[_c('li',[_v("dotted")]),_v(" "),_c('li',[_v("dashed")]),_v(" "),_c('li',[_v("double")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("--- {.dotted}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.dashed}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.double}\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('hr',{staticClass:"dotted"}),_v(" "),_c('hr',{staticClass:"dashed"}),_v(" "),_c('hr',{staticClass:"double"})])],1)]),_v(" "),_c('p',[_v("Available size classes:")]),_v(" "),_c('ul',[_c('li',[_v("thick")]),_v(" "),_c('li',[_v("thick-1")]),_v(" "),_c('li',[_v("thick-2")]),_v(" "),_c('li',[_v("thick-3")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("--- {.thick}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.thick-1}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.thick-2}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.thick-3}\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('hr',{staticClass:"thick"}),_v(" "),_c('hr',{staticClass:"thick-1"}),_v(" "),_c('hr',{staticClass:"thick-2"}),_v(" "),_c('hr',{staticClass:"thick-3"})])],1)]),_v(" "),_c('p',[_v("Available color classes (use any of the available BootStrap border color classes):")]),_v(" "),_c('ul',[_c('li',[_v("border-info")]),_v(" "),_c('li',[_v("border-primary")]),_v(" "),_c('li',[_v("etc")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("--- {.border-primary}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.border-secondary}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.border-danger}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.border-info}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.border-success}\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('hr',{staticClass:"border-primary"}),_v(" "),_c('hr',{staticClass:"border-secondary"}),_v(" "),_c('hr',{staticClass:"border-danger"}),_v(" "),_c('hr',{staticClass:"border-info"}),_v(" "),_c('hr',{staticClass:"border-success"})])],1)]),_v(" "),_c('p',[_v("Add a comibnation of the above classes to further customize the style of a horizontal line.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("--- {.dashed .thick-3}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.double .border-secondary}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.dotted .thick-1 .border-primary}\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('hr',{staticClass:"dashed thick-3"}),_v(" "),_c('hr',{staticClass:"double border-secondary"}),_v(" "),_c('hr',{staticClass:"dotted thick-1 border-primary"})])],1)]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("****")]),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("*")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("-----")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__")])])]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('hr')])])]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"icons"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"icons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"icons"}}),_c('strong',[_v("Icons")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#icons","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"icons-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"icons-2"}}),_v("Icons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#icons-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('small',[_c('span',{staticClass:"dimmed"},[_v("Acknowledgement: Font Awesome icons are provided by "),_c('a',{attrs:{"href":"https://fontawesome.com/"}},[_v("Font Awesome")]),_v(" under their "),_c('a',{attrs:{"href":"https://fontawesome.com/license"}},[_v("free license")]),_v(", Glyphicons are provided by "),_c('a',{attrs:{"href":"https://glyphicons.com/"}},[_v("Glyphicons")]),_v(" via "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/3.3/"}},[_v("Bootstrap 3")]),_v(", "),_c('a',{attrs:{"href":"https://octicons.github.com"}},[_v("Octicons")]),_v(" are copyright of GitHub, and Material icons are provided by "),_c('a',{attrs:{"href":"https://fonts.google.com/icons"}},[_v("Google Fonts")]),_v(" via "),_c('a',{attrs:{"href":"https://www.npmjs.com/package/material-icons"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("material-icons")]),_v(" by Ravindra Marella")]),_v(" under the "),_c('a',{attrs:{"href":"https://www.apache.org/licenses/LICENSE-2.0.html"}},[_v("Apache license 2.0")]),_v(".")])])]),_v(" "),_c('p',[_v("MarkBind supports using Font Icons provided by Font Awesome, Glyphicons and GitHub's Octicons.")]),_v(" "),_c('div',[_c('box',{attrs:{"border-left-color":"#00B0F0"}},[_c('p',[_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-lightbulb",attrs:{"aria-hidden":"true"}})]),_v("\nThe advantage of font icons over emojis is font icons can be "),_c('em',[_v("styled")]),_v(" to fit your needs. e.g.,")]),_v(" "),_c('ul',[_c('li',[_v("emoji: "),_c('span',{staticStyle:{"color":"purple"}},[_v("Don't judge the 📖 by it's cover! 👎")])]),_v(" "),_c('li',[_v("font icons: "),_c('span',{staticStyle:{"color":"purple"}},[_v("Don't judge the "),_c('span',{staticClass:"fas fa-book",attrs:{"aria-hidden":"true"}}),_v(" by it's cover! "),_c('span',{staticClass:"fas fa-thumbs-down",attrs:{"aria-hidden":"true"}})])])])])],1),_v(" "),_c('box',{attrs:{"type":"important"}},[_c('p',[_v("The syntax for icons has changed, and the earlier "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{{ prefix_name }}")]),_v(" syntax has been deprecated. "),_c('br'),_v("\nPlease use the new "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(":prefix-name:")]),_v(" syntax instead.")])]),_v(" "),_c('h6',{attrs:{"id":"using-font-awesome-icons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-font-awesome-icons"}}),_v("Using Font Awesome Icons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-font-awesome-icons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('ol',[_c('li',[_c('p',[_v("Decide which icon you want to use from the "),_c('a',{attrs:{"href":"https://fontawesome.com/icons?d=gallery&m=free"}},[_v("list of available icons")]),_v(".")])]),_v(" "),_c('li',[_c('p',[_v("Construct the MarkBind name for the selected icon by adding the "),_c('em',[_v("type prefix")]),_v(".\nNote: Font Awesome has three different styles for their icons, each with their own type prefix. Here is an example from each type:")]),_v(" "),_c('ul',[_c('li',[_c('em',[_v("Solid")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fas-")]),_v(") e.g., "),_c('span',{staticClass:"fas fa-file-code",attrs:{"aria-hidden":"true"}}),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("file-code")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fas-file-code")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Regular")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("far-")]),_v(") e.g., "),_c('span',{staticClass:"far fa-file-code",attrs:{"aria-hidden":"true"}}),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("file-code")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("far-file-code")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Brands")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fab-")]),_v("): e.g., "),_c('span',{staticClass:"fab fa-github-alt",attrs:{"aria-hidden":"true"}}),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("github-alt")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fab-github-alt")]),_v(")")])])]),_v(" "),_c('li',[_c('p',[_v("Insert MarkBind name for the icon enclosed within colons to get the icon in your page."),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Create a **branch**")]),_c('code',{pre:true},[_v(":"),_c('span'),_v("fas-code-branch: now!")]),_v(" → Create a "),_c('strong',[_v("branch")]),_v(" "),_c('span',{staticClass:"fas fa-code-branch",attrs:{"aria-hidden":"true"}}),_v(" now!")])])]),_v(" "),_c('h6',{attrs:{"id":"using-glyphicons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-glyphicons"}}),_v("Using Glyphicons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-glyphicons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('ol',[_c('li',[_v("Decide which icon you want to use from "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/3.3/components/#glyphicons"}},[_v("list of provided glyphicons")]),_v(".")]),_v(" "),_c('li',[_v("Insert the name for the icon enclosed within colons to get the icon in your page."),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Move to the right!")]),_c('code',{pre:true},[_v(":"),_c('span'),_v("glyphicon-hand-right:")]),_v(" → Move to the right! "),_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}})])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('p',[_c('code',{pre:true},[_v(":"),_c('span'),_v("glyphicon-hand-right:")]),_v(" "),_c('code',{pre:true},[_v(":"),_c('span'),_v("fab-github:")]),_v(" "),_c('code',{pre:true},[_v(":"),_c('span'),_v("fas-home:")])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fas fa-home",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fas fa-home",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('span',{staticStyle:{"color":"red"}},[_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fas fa-home",attrs:{"aria-hidden":"true"}})])])]),_c('p'),_v(" "),_c('h6',{attrs:{"id":"using-octicons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-octicons"}}),_v("Using Octicons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-octicons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('ol',[_c('li',[_v("Decide which icon you want to use from "),_c('a',{attrs:{"href":"https://octicons.github.com"}},[_v("list of available Octicons")]),_v(".")]),_v(" "),_c('li',[_v("Insert the name for the icon enclosed within colons to get the icon in your page."),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Merge a **pull request** :octicon-git-pull-request:")]),_v(" → Merge a "),_c('strong',[_v("pull request")]),_v(" "),_c('svg',{staticClass:"octicon octicon-git-pull-request",attrs:{"version":"1.1","width":"16","height":"16","viewBox":"0 0 16 16","aria-hidden":"true"}},[_c('path',{attrs:{"fill-rule":"evenodd","d":"M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"}})])]),_v(" "),_c('li',[_v("You may also append "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("~class-name")]),_v(" to the end of the octicon name to add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("class=\"class-name\"")]),_v(" property to your Octicon (e.g. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(":octicon-git-pull-request~icon-large-red:")]),_v(" will generate an Octicon of class "),_c('em',[_v("icon-large-red")]),_v("). You may then add corresponding CSS to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{root}/_markbind/layouts/{layout-name}/styles.css")]),_v(" to customize the style of your Octicon.")]),_v(" "),_c('li',[_v("If your background is dark, you may use "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(":octiconlight-*:")]),_v(" to render the icon as white.")])]),_v(" "),_c('h6',{attrs:{"id":"using-material-icons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-material-icons"}}),_v("Using Material Icons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-material-icons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('ol',[_c('li',[_c('p',[_v("Decide which icon you want to use from "),_c('a',{attrs:{"href":"https://fonts.google.com/icons"}},[_v("list of available icons")]),_v(".")])]),_v(" "),_c('li',[_c('p',[_v("Construct the MarkBind name for the selected icon by writing the icon name in "),_c('em',[_v("lowercase letters only")]),_v(", replacing any spaces between the words in the name with "),_c('em',[_v("dashes")]),_v(" ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v("), then adding the "),_c('em',[_v("type prefix")]),_v(".\nNote: Google has five different styles for their Material icons, each with their own type prefix. Here is an example from each type:")]),_v(" "),_c('ul',[_c('li',[_c('em',[_v("Filled")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mif-")]),_v(") e.g. "),_c('span',{staticClass:"material-icons align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mif-perm-media")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Outlined")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mio-")]),_v(") e.g., "),_c('span',{staticClass:"material-icons-outlined align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mio-perm-media")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Rounded")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mir-")]),_v("): e.g., "),_c('span',{staticClass:"material-icons-round align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mir-perm-media")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Sharp")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mis-")]),_v("): e.g., "),_c('span',{staticClass:"material-icons-sharp align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mis-perm-media")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Two tone")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mit-")]),_v("): e.g., "),_c('span',{staticClass:"material-icons-two-tone align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mit-perm-media")]),_v(")")])])]),_v(" "),_c('li',[_c('p',[_v("Insert the name for the icon enclosed within colons to get the icon in your page."),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Download from Cloud :mio-cloud-download:")]),_v(" → Download from Cloud "),_c('span',{staticClass:"material-icons-outlined align-middle",attrs:{"aria-hidden":"true"}},[_v("cloud_download")])])])])],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"images"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"images"}},[_c('span',{staticClass:"anchor",attrs:{"id":"images"}}),_c('strong',[_v("Images")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#images","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"images-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"images-2"}}),_v("Images"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#images-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("![](https://markbind.org/images/logo-lightbackground.png)\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('a',{attrs:{"href":"https://markbind.org/images/logo-lightbackground.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","alt":""}})])])])],1)]),_v(" "),_c('box',{attrs:{"type":"info"}},[_v("\n URLs can be specified as relative references. More info in: "),_c('i',[_c('a',{attrs:{"href":"#intraSiteLinks"}},[_v("Intra-Site Links")])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("!["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("alt text here")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org/images/logo-lightbackground.png \"title here\"")]),_v(")\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_c('a',{attrs:{"href":"https://markbind.org/images/logo-lightbackground.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","alt":"","title":"title here"}})])])]),_c('p')],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"includes"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"includes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"includes"}}),_c('strong',[_v("Includes")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#includes","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/reusingContents.html#includes"}},[_c('em',[_v("User Guide → Reusing Contents → Includes")])])])]),_v(" "),_c('h2',{attrs:{"id":"includes-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"includes-2"}}),_v("Includes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#includes-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('span',{attrs:{"id":"overview"}},[_c('p',[_c('strong',[_v("MarkBind has a powerful "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" mechanism")]),_v(" which allows you to create documents by combining other content fragments.\n")])]),_c('p'),_v(" "),_c('p',[_c('strong',[_v("You can use "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" tag to include another markdown or HTML document into the current document.")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Including text from a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tip2.md")]),_v(" in another file.")],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("Tip 1. ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tips/tip2.md\"")]),_v(" />")]),_v("\n")]),_c('span',[_v("Tip 3. ...\n")])])])]),_v(" "),_c('p',[_c('strong',[_v("You can "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" a fragment of a file")]),_v(" by specifying the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("#fragment-id")]),_v(" at the end of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" attribute value, provided the fragment is wrapped in a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<div>")]),_v("/"),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<span>")]),_v("/"),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<seg>")]),_v(" tag with the matching "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(".")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Including a fragment from a file:")],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("Some text\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"docs/tips.md#tip-1\"")]),_v(" />")]),_v("\n")]),_c('span',[_v("Some other text\n")])])]),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("docs/tips.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tip-1\"")]),_v(" />")]),_v("\n")]),_c('span',[_v(" Tip 1. ...\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v("Tip 2. ...\n")])])])]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("When setting the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(" of a fragment, be careful not to clash with heading anchor IDs auto-generated by MarkBind. For example, if you have a heading "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("## Some Useful Tips")]),_v(", MarkBind will auto-generate an ID "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("some-useful-tips")]),_v(" for that heading.")])]),_v(" "),_c('box',{attrs:{"border-left-color":"#00B0F0"}},[_c('p',[_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-lightbulb",attrs:{"aria-hidden":"true"}})]),_v(" The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" tag works for any MarBind source file including the "),_c('em',[_v("font matter")]),_v(" section but it may not work in some "),_c('em',[_v("special")]),_v(" files such as the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/variables.md")]),_v(".")])]),_v(" "),_c('p',[_c('strong',[_v("Attributes:")])]),_v(" "),_c('ul',[_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")])]),_v(": specify the source file path.")]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("inline")])]),_v(" (optional): make the included result an inline element. (wrapped in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<span>")]),_v(" tag). e.g.,"),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("The title is "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../docs/summary.md#title\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("inline")]),_v(" />")]),_v(" while ...\n")])])])]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("optional")])]),_v(" (optional): include the file/fragment only if it exists i.e., there will be no error message if the file/fragment does not exist. e.g.,"),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"UserStories.md\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("optional")]),_v(" />")]),_v("\n")])])])]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("trim")])]),_v(" (optional): remove leading and trailing whitespace and newlines from the document before including."),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"UserStories.md#epic\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trim")]),_v(" />")]),_v("\n")])])])]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("omitFrontmatter")])]),_v(" (optional): omit the front matter of the file/fragment from being included (if any)."),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("\n")])])])])]),_v(" "),_c('div',[_c('box',{attrs:{"border-left-color":"#00B0F0"}},[_c('p',[_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-lightbulb",attrs:{"aria-hidden":"true"}})]),_v("\nThe "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" mechanism can be used inside any MarkBind source file (even inside the "),_c('em',[_v("front matter")]),_v(" section) but it will not work inside some "),_c('em',[_v("special")]),_v(" files such as the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/variables.md")]),_v(".")])])],1),_v(" "),_c('h5',{attrs:{"id":"include-inside-an-included-file"}},[_c('span',{staticClass:"anchor",attrs:{"id":"include-inside-an-included-file"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" Inside an Included File"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#include-inside-an-included-file","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Although the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" attribute of an "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" is given "),_c('em',[_v("relative")]),_v(" to the current directory, it is converted to an "),_c('em',[_v("absolute")]),_v(" value "),_c('em',[_v("before")]),_v(" the "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("i.e., the file containing the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")])]),_v("host file")]),_v(" is included from another file.")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Suppose you have a MarkBind project with the following file structure.")],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs"}},[_c('span',[_v("C:/mySite/\n")]),_c('span',[_v(" ├── bookFiles/\n")]),_c('span',[_v(" | ├── book.md\n")]),_c('span',[_v(" | ├── chapter1.md\n")]),_c('span',[_v(" | └── chapter2.md\n")]),_c('span',[_v(" └── reviewFiles/\n")]),_c('span',[_v(" └── review.md\n")])])]),_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("book.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("# My Book")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"chapter1.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"chapter2.md\"")]),_v(" />")])]),_v("\n")])])]),_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("review.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("# My Review")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../bookFiles/book.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_v("...\n")])])]),_c('p',[_v("The content of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter1.md")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter2.md")]),_v(" will be included in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("review.md")]),_v(" (via "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include src=\"../bookFiles/book.md\" />")]),_v(") although "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter1.md")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter2.md")]),_v(" are not in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("reviewFiles")]),_v(" directory. i.e., "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include src=\"chapter1.md\" />")]),_v(" will be interpreted as "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include src=\"c:/mySite/bookFiles/chapter1.md\" />")])])]),_v(" "),_c('p',[_v("In other words, "),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" interprets the reused code relative to the original location of the file, not the location in which it is reused.")])]),_v(" "),_c('hr'),_v(" "),_c('h5',{attrs:{"id":"specifying-variables-in-an-include"}},[_c('span',{staticClass:"anchor",attrs:{"id":"specifying-variables-in-an-include"}}),_v("Specifying Variables in an "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#specifying-variables-in-an-include","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("It is possible to include variables in an "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(".")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Specifying "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("title")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("author")]),_v(" variables in an "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" tag:")],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"article.md\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("variable")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"title\"")]),_v(">")]),_v("My Title"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("variable")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("variable")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"author\"")]),_v(">")]),_v("John Doe"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("variable")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(">")]),_v("\n")])])]),_c('p',[_v("In "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("article.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("# {{ title }}"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v("Author: {{ author }}\n")])])])]),_v(" "),_c('p',[_v("These variables work the same way as variables in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/variables.md")]),_v(", except that they only apply to the included file. They allow the included file to be reused as a template, for different source files using different variable values.")]),_v(" "),_c('p',[_v("You can also specify include variables within the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" tag itself by adding a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("var-")]),_v(" prefix.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Specifying "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("title")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("author")]),_v(" variables inline:")],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"article.md\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("var-title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"My Title\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("var-author")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"John Doe\"")]),_v(" />")]),_v("\n")])])])]),_v(" "),_c('p',[_v("If the same variable is defined in a chain of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v("s (e.g. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("a.md")]),_v(" includes "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("b.md")]),_v(" includes "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("c.md")]),_v("...), variables defined in the top-most "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" will take precedence. Global variables ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/variables.md")]),_v(") will take precedence over any "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" variables.")]),_v(" "),_c('h3',{attrs:{"id":"using-boilerplate-files"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-boilerplate-files"}}),_v("Using Boilerplate Files"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-boilerplate-files","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("If you find duplicating a "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("code that needs to stay relative to the directory in which it used")]),_c('em',[_v("boilerplate code")])]),_v(" fragment in multiple places of your code base, you can use a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boilerplate")]),_v(" file to avoid such duplication.")]),_v(" Note that you cannot use a normal "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" in this case because the code included using a normal "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" stays relative to the original location while boilerplate code needs to be interpreted relative to the location it is being used.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Suppose you have a MarkBind project with the following file structure.")],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs"}},[_c('span',[_v("C:/mySite/\n")]),_c('span',[_v(" ├── chapter1/\n")]),_c('span',[_v(" | ├── chapter.md\n")]),_c('span',[_v(" | ├── text.md\n")]),_c('span',[_v(" | └── exercises.md\n")]),_c('span',[_v(" ├── chapter2/\n")]),_c('span',[_v(" | ├── chapter.md\n")]),_c('span',[_v(" | ├── text.md\n")]),_c('span',[_v(" | └── exercises.md\n")]),_c('span',[_v(" └── book.md\n")])])]),_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("book.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("# My Book")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"chapter1/chapter.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"chapter2/chapter.md\"")]),_v(" />")])]),_v("\n")])])]),_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter1/chapter.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Text")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Exercises")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exercises.md\"")]),_v(" />")])]),_v("\n")])])]),_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter2/chapter.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Text")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Exercises")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exercises.md\"")]),_v(" />")])]),_v("\n")])])]),_c('p',[_v("As you can see, both "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter.md")]),_v(" files are exactly the same. If we were to use only one of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter.md")]),_v(" files and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" it twice in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("book.md")]),_v(", we'll end up with the same chapter content duplicated twice, which is not what we want. In other words, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter.md")]),_v(" contains boilerplate code that needs to be interpreted relative to where it is applied, once relative to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter1")]),_v(" directory and once relative to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter2")]),_v(" directory.")])]),_v(" "),_c('p',[_v("To use a code fragment as a boilerplate file,")]),_v(" "),_c('ol',[_c('li',[_v("Put the code in a file inside the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/boilerplates")]),_v(" directory.")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" the file "),_c('em',[_v("as if")]),_v(" a copy of it exists in any directory you want it to applied, but add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boilerplate")]),_v(" attribute to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" tag.")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Here's how you can use a boilerplate file to avoid duplicating the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter.md")]),_v(":")],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs"}},[_c('span',[_v("C:/mySite/\n")]),_c('span',[_v(" ├── _markbind/boilerplates/\n")]),_c('span',[_v(" | └── chapter.md\n")]),_c('span',[_v(" ├── chapter1/\n")]),_c('span',[_v(" | ├── text.md\n")]),_c('span',[_v(" | └── exercises.md\n")]),_c('span',[_v(" ├── chapter2/\n")]),_c('span',[_v(" | ├── text.md\n")]),_c('span',[_v(" | └── exercises.md\n")]),_c('span',[_v(" └── book.md\n")])])]),_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("book.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("# My Book")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"chapter1/chapter.md\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("boilerplate")]),_v(" />")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"chapter2/chapter.md\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("boilerplate")]),_v(" />")])]),_v("\n")])])]),_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/boilerplates/chapter.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Text")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Exercises")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exercises.md\"")]),_v(" />")])]),_v("\n")])])]),_c('p',[_v("Consider the line "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include src=\"chapter1/chapter.md\" boilerplate />")]),_v(". Note how you can use "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src=\"chapter1/chapter.md\"")]),_v(" there is no such file. MarkBind will use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter.md")]),_v(" file "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("/_markbind/boilerplates/")]),_v(" but interpret it as if the file exist in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter1")]),_v(" directory (i.e., interpret the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter1.md")]),_v(" code relative to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter1")]),_v(" directory.")]),_v(" "),_c('p',[_v("Similarly, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include src=\"chapter2/chapter.md\" boilerplate />")]),_v(" interprets the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter.md")]),_v(" relative to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter2")]),_v(" directory.")])]),_v(" "),_c('p',[_v("If you have many boilerplate files, you can organize them into directories inside the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind")]),_v(" directory. When using such boilerplate files, you need to replace "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boilerplate")]),_v(" attribute with "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boilerplate=\"<path to file relative to _markbind/boilerplates>\"")]),_v(".")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Suppose the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter.md")]),_v(" is places in a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("book")]),_v(" directory:")],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs"}},[_c('span',[_v("C:/mySite/\n")]),_c('span',[_v(" └── _markbind/boilerplates/\n")]),_c('span',[_v(" └── book/\n")]),_c('span',[_v(" └── chapter.md\n")]),_c('span',[_v("\n")])])]),_c('p',[_v("It needs to be used as follows:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"chapter1/chapter.md\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("boilerplate")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"book/chapter.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"chapter2/chapter.md\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("boilerplate")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"book/chapter.md\"")]),_v(" />")])]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"foo.md#bar\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("boilerplate")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("inline")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trim")]),_v(">")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("variable")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"x\"")]),_v(">")])]),_v("5"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("variable")]),_v(">")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(">")])]),_v("\n")])])])])],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"keywords"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"keywords"}},[_c('span',{staticClass:"anchor",attrs:{"id":"keywords"}}),_c('strong',[_v("Keywords")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#keywords","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"keywords-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"keywords-2"}}),_v("Keywords"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#keywords-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('span',{staticClass:"keyword d-none"},[_v("regress")]),_v(" "),_c('span',{staticClass:"keyword d-none"},[_v("regression testing")])]),_v(" "),_c('p',[_c('strong',[_v("You can also specify additional keywords to be indexed under a heading")]),_v(" by tagging the words with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("keyword")]),_v(" class. Those keywords will be linked to the heading immediately above it. If you want to index a keyword without rendering it in the page, add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("d-none")]),_v(" as a class.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("#### Developer Testing\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"keyword d-none\"")]),_v(">")]),_v("regress"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"keyword d-none\"")]),_v(">")]),_v("regression testing"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("This is good for catching "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"keyword\"")]),_v(">")]),_v("regressions"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(">")]),_v(".\n")])])]),_c('p',[_c('span',{staticClass:"fas fa-arrow-down",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('box',[_c('p',[_c('big',[_c('strong',[_v("Developer Testing")])]),_c('br')],1),_v(" "),_c('p',[_v("This is good for catching "),_c('span',{staticClass:"keyword"},[_v("regressions")]),_v(".")])])],1),_v(" "),_c('p',[_c('strong',[_v("You can also set additional keywords to be indexed for an entire page")]),_v(" using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("keywords")]),_v(" attribute inside the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<frontmatter>")]),_v(" of that page.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" keywords: regress, regression testing, regressions\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v("...\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"keyword d-none\"")]),_v(">")]),_v("regress"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(">")]),_v("\n")])])])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"line-breaks"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"line-breaks"}},[_c('span',{staticClass:"anchor",attrs:{"id":"line-breaks"}}),_c('strong',[_v("Line Breaks")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#line-breaks","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"line-breaks-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"line-breaks-2"}}),_v("Line Breaks"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#line-breaks-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("The preferred way to indicate line breaks is to use a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<br>")]),_v(" tag.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("This is the second sentence."),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")])]),_v("\n")]),_c('span',[_v("This should be on a new line.\n")]),_c('span',[_v("This will not be in a new line.\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("This is the second sentence."),_c('br'),_v("\nThis should be on a new line.\nThis will not be in a new line.")])])],1)])])]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"links"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"links"}},[_c('span',{staticClass:"anchor",attrs:{"id":"links"}}),_c('strong',[_v("Links")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#links","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"links-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"links-2"}}),_v("Links"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#links-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Basic style:")]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("MarkBind home is at ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("here")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org")]),_v(").\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("MarkBind home is at "),_c('a',{attrs:{"href":"https://markbind.org"}},[_v("here")]),_v(".")])])],1)])]),_v(" "),_c('p',[_c('em',[_v("Reference style")]),_v(" links (i.e., specify the URL in a separate place):")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("MarkBind home is at ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("here")]),_v("]["),_c('span',{pre:true,attrs:{"class":"hljs-symbol"}},[_v("1")]),_v("].\n")]),_c('span',[_v("\n")]),_c('span',[_v("["),_c('span',{pre:true,attrs:{"class":"hljs-symbol"}},[_v("1")]),_v("]: "),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("MarkBind home is at "),_c('a',{attrs:{"href":"https://markbind.org"}},[_v("here")]),_v(".")])])],1)]),_v(" "),_c('p',[_c('small',[_v("More info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/basic-syntax#links"}},[_v("https://www.markdownguide.org/basic-syntax#links")])])]),_v(" "),_c('h4',{attrs:{"id":"intra-site-links"}},[_c('span',{staticClass:"anchor",attrs:{"id":"intra-site-links"}}),_v("Intra-Site Links"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#intra-site-links","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{attrs:{"id":"intraSiteLinks"}},[_c('p',[_v("Links to files of the generated site (e.g., an HTML page or an image file) can be specified either as relative paths or absolute paths.")]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Auto-conversion of extension")])])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_v("You may link to markdown files using its original extension ("),_c('strong',[_v(".md")]),_v(") as it will automatically be converted to a html extension ("),_c('strong',[_v(".html")]),_v(") when the site is generated.")]),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Click [here](index.md)")]),_v(" --- "),_c('em',[_v("auto-conversion")]),_v(" ---> "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Click [here](index.html)")])],1),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("If you wish to disable the auto-conversion, you may use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-convert")]),_v(" attribute in your link.")]),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Click [here](index.md){no-convert}")])],1)])],1),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Absolute paths")])])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_v("Links should start with "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{{ baseUrl }}")]),_v(" (which represents the root directory of the site).")]),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Here's how to specify a link to (1) a page, and (2) an image, using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{{ baseUrl }}")]),_v(":")],1),_v(" "),_c('ol',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Click [here]({{ baseUrl }}/userGuide/reusingContents.html).")])]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("![]({{ baseUrl }}/images/preview.png)")])])]),_v(" "),_c('box',{attrs:{"type":"important"}},[_c('p',[_v("To ensure that links in the "),_c('code',{pre:true},[_v("_markbind/")]),_v(" folder work correctly across the entire site, they should be written as absolute paths, prepended with "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{{ baseUrl }}")]),_v(".")])])],1),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Relative paths")])])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Assuming that we have the following folder structure:")],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("C:\\course\\\n")]),_c('span',[_v(" ├── textbook\\\n")]),_c('span',[_v(" | ├── subsite.md\n")]),_c('span',[_v(" | ├── image.png\n")]),_c('span',[_v(" | └── site.json\n")]),_c('span',[_v(" ├── index.md\n")]),_c('span',[_v(" └── site.json\n")])])]),_c('p',[_v("Within "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("textbook/subsite.md")]),_v(", we can refer to the image using:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("img")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"image.png\"")]),_v(" />")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- or -->")]),_v("\n")]),_c('span',[_v("![](image.png)\n")])])]),_c('p',[_v("Within "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("index.md")]),_v(", we can also display the image using")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("img")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"textbook/image.png\"")]),_v(" />")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- or -->")]),_v("\n")]),_c('span',[_v("![](textbook/image.png)\n")])])]),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Relative links to resources (e.g. images, hrefs) should be valid "),_c('strong',[_v("relative to the file where the link is defined")]),_v(".")]),_v(" "),_c('p',[_v("In the example above, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("image.png")]),_v(" is in the same directory as "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("subsite.md")]),_v(". Thus, the correct path is "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("image.png")]),_v(" and not "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("textbook/image.png")]),_v(".")])])],1),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Link validation")])])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_v("Links will be validated when generating a site and a warning will be displayed in the console for every link that is invalid.")]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_c('strong',[_v("Disabling link validation")])]),_v(" "),_c('p',[_v("Link validation is enabled by default.")]),_v(" "),_c('p',[_v("If you wish to only disable validation for a "),_c('strong',[_v("specific link")]),_v(", you may use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-validation")]),_v(" attribute.")]),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Click [here](index.md){no-validation}")])],1),_v(" "),_c('p',[_v("However, if you wish to disable this feature "),_c('strong',[_v("entirely")]),_v(", you may simply modify your "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" like "),_c('trigger',{attrs:{"for":"pop:global-intralink-disable","placement":"bottom","trigger":"click"}},[_v(" this ")]),_v(".")],1),_v(" "),_c('b-modal',{ref:"pop:global-intralink-disable",attrs:{"id":"pop:global-intralink-disable","hide-footer":"","size":"","modal-class":"mb-zoom"},scopedSlots:_u([{key:"modal-title",fn:function(){return [_v("Disabling global intra-site link validation in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")])]},proxy:true}])},[_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs js"}},[_c('span',[_v("...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"intrasiteLinkValidation\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"enabled\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-literal"}},[_v("false")]),_v("\n")]),_c('span',[_v("},\n")]),_c('span',[_v("...\n")])])])])])],1)],1)]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("MarkBind home is at ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("here")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org")]),_v(").\n")]),_c('span',[_v("\n")]),_c('span',[_v("MarkBind home is at ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("here")]),_v("]["),_c('span',{pre:true,attrs:{"class":"hljs-symbol"}},[_v("1")]),_v("].\n")]),_c('span',[_v("\n")]),_c('span',[_v("["),_c('span',{pre:true,attrs:{"class":"hljs-symbol"}},[_v("1")]),_v("]: "),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org")]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("MarkBind home is at "),_c('a',{attrs:{"href":"https://markbind.org"}},[_v("here")]),_v(".\n")])]),_c('p')])]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"lists"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"lists"}},[_c('span',{staticClass:"anchor",attrs:{"id":"lists"}}),_c('strong',[_v("Lists")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#lists","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"lists-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"lists-2"}}),_v("Lists"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#lists-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Unordered lists:")])])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Sub item 1.1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Sub item 1.2"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" Second line")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" * Sub item 1.2.1")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("* Item 2")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("* Item 3")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ul',[_c('li',[_v("Item 1\n"),_c('ul',[_c('li',[_v("Sub item 1.1")]),_v(" "),_c('li',[_v("Sub item 1.2"),_c('br'),_v("\nSecond line\n"),_c('ul',[_c('li',[_v("Sub item 1.2.1")])])])])]),_v(" "),_c('li',[_v("Item 2")]),_v(" "),_c('li',[_v("Item 3")])])])],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Ordered lists:")])])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" 1.")]),_v(" Sub item 1.1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" 1.")]),_v(" Sub item 1.2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 3\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ol',[_c('li',[_v("Item 1\n"),_c('ol',[_c('li',[_v("Sub item 1.1")]),_v(" "),_c('li',[_v("Sub item 1.2")])])]),_v(" "),_c('li',[_v("Item 2")]),_v(" "),_c('li',[_v("Item 3")])])])],1)]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_v("\nYou can also start an ordered list at a particular number by changing the\n"),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"popover"}},[_v("\nfirst number\n"),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_c('div',{staticStyle:{"text-align":"center","margin-bottom":"5px"}},[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])],1),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("10.")]),_v(" Item 1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" 1.")]),_v(" Sub item 1.1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" 1.")]),_v(" Sub item 1.2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 2\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ol',{staticClass:"pl-0 ml-0",attrs:{"start":"10"}},[_c('li',[_v("Item 1")]),_v(" "),_c('li',[_v("Sub item 1.1")]),_v(" "),_c('li',[_v("Sub item 1.2")]),_v(" "),_c('li',[_v("Item 2")])])])],1)])])]),_v("!\n")]),_v(" "),_c('p',[_c('small',[_v("More info on above list types: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/basic-syntax#lists"}},[_v("https://www.markdownguide.org/basic-syntax#lists")])])]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Task lists")])]),_v(" (from GFMD):")]),_v(" "),_c('span',{attrs:{"id":"main-example-gfmd"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" [ ] Item 1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" -")]),_v(" [ ] Sub item 1.1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" -")]),_v(" [x] Sub item 1.2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" [x] Item 2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" [ ] Item 3\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ul',{staticClass:"contains-task-list"},[_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"type":"checkbox"}}),_v(" Item 1\n"),_c('ul',{staticClass:"contains-task-list"},[_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"type":"checkbox"}}),_v(" Sub item 1.1")]),_v(" "),_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"checked":"","type":"checkbox"}}),_v(" Sub item 1.2")])])]),_v(" "),_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"checked":"","type":"checkbox"}}),_v(" Item 2")]),_v(" "),_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"type":"checkbox"}}),_v(" Item 3")])])])],1)])]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Radio-button lists:")])])]),_v(" "),_c('div',{attrs:{"id":"main-example-markbind"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" ( ) Item 1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" ( ) Item 2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" (x) Item 3\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ul',{staticClass:"radio-list",attrs:{"radio-group":"e5b87"}},[_c('li',{staticClass:"radio-list-item"},[_c('label',[_c('input',{staticClass:"radio-list-input",attrs:{"name":"e5b87","type":"radio"}}),_v(" Item 1")])]),_v(" "),_c('li',{staticClass:"radio-list-item"},[_c('label',[_c('input',{staticClass:"radio-list-input",attrs:{"name":"e5b87","type":"radio"}}),_v(" Item 2")])]),_v(" "),_c('li',{staticClass:"radio-list-item"},[_c('label',[_c('input',{staticClass:"radio-list-input",attrs:{"checked":"","name":"e5b87","type":"radio"}}),_v(" Item 3")])])])])],1)])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" 1.")]),_v(" Sub item 1.1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" 1.")]),_v(" Sub item 1.2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" item 2.1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" [ ] Item 3\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" [x] Item 4\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" ( ) Item 5\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('ol',[_c('li',[_v("Item 1\n"),_c('ol',[_c('li',[_v("Sub item 1.1")]),_v(" "),_c('li',[_v("Sub item 1.2")])])])]),_v(" "),_c('ul',[_c('li',[_v("Item 2\n"),_c('ul',[_c('li',[_v("item 2.1")])])])]),_v(" "),_c('ul',{staticClass:"contains-task-list",attrs:{"radio-group":"890e1"}},[_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"type":"checkbox"}}),_v(" Item 3")]),_v(" "),_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"checked":"","type":"checkbox"}}),_v(" Item 4")]),_v(" "),_c('li',{staticClass:"radio-list-item"},[_c('label',[_c('input',{staticClass:"radio-list-input",attrs:{"name":"890e1","type":"radio"}}),_v(" Item 5\n")])])])])],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"math-formulae"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"math-formulae"}},[_c('span',{staticClass:"anchor",attrs:{"id":"math-formulae"}}),_c('strong',[_v("Math Formulae")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#math-formulae","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"math-formulae-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"math-formulae-2"}}),_v("Math Formulae"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#math-formulae-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Markbind supports typesetting TeX math equations. "),_c('a',{attrs:{"href":"https://katex.org"}},[_v("KaTeX")]),_v(" is used as a fast math renderer.")]),_v(" "),_c('p',[_v("Insert "),_c('strong',[_v("inline")]),_v(" equations by enclosing them in round brackets "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\\( ... \\)")]),_v(".")]),_v(" "),_c('p',[_v("Insert "),_c('strong',[_v("display")]),_v(" equations by enclosing them in square brackets "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\\[ ... \\]")]),_v(".")]),_v(" "),_c('p',[_v("Insert numbered "),_c('strong',[_v("display")]),_v(" equations by enclosing the equation square brackets and the equation number in curly brackets "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\\[ ... \\] (1)")]),_v(".")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("Solve the following simultaneous equations:\n")]),_c('span',[_v("\n")]),_c('span',[_v("\\[ 3x + y = 11 \\] (1)\n")]),_c('span',[_v("\n")]),_c('span',[_v("\\[\\frac{2x}{3} + \\frac{2y}{3} = 8\\] (2)\n")]),_c('span',[_v("\n")]),_c('span',[_v("Euler's equation \\( e^{i\\pi}+1=0 \\) is a beautiful equation.\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Solve the following simultaneous equations:")]),_v(" "),_c('section',{staticClass:"eqno"},[_c('eqn',{pre:true},[_c('span',{pre:true,attrs:{"class":"katex-display"}},[_c('span',{pre:true,attrs:{"class":"katex"}},[_c('span',{pre:true,attrs:{"class":"katex-mathml"}},[_c('math',{pre:true,attrs:{"xmlns":"http://www.w3.org/1998/Math/MathML","display":"block"}},[_c('semantics',{pre:true},[_c('mrow',{pre:true},[_c('mn',{pre:true},[_v("3")]),_c('mi',{pre:true},[_v("x")]),_c('mo',{pre:true},[_v("+")]),_c('mi',{pre:true},[_v("y")]),_c('mo',{pre:true},[_v("=")]),_c('mn',{pre:true},[_v("11")])],1),_c('annotation',{pre:true,attrs:{"encoding":"application/x-tex","v-pre":""}},[_v(" 3x + y = 11 ")])],1)],1)],1),_c('span',{pre:true,attrs:{"class":"katex-html","aria-hidden":"true"}},[_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.72777em;vertical-align:-0.08333em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("3")]),_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("x")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.625em;vertical-align:-0.19444em;"}}),_c('span',{pre:true,attrs:{"class":"mord mathnormal","style":"margin-right:0.03588em;"}},[_v("y")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.64444em;vertical-align:0em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("1")]),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("1")])])])])])]),_c('span',[_v("(1)")])],1),_v(" "),_c('section',{staticClass:"eqno"},[_c('eqn',{pre:true},[_c('span',{pre:true,attrs:{"class":"katex-display"}},[_c('span',{pre:true,attrs:{"class":"katex"}},[_c('span',{pre:true,attrs:{"class":"katex-mathml"}},[_c('math',{pre:true,attrs:{"xmlns":"http://www.w3.org/1998/Math/MathML","display":"block"}},[_c('semantics',{pre:true},[_c('mrow',{pre:true},[_c('mfrac',{pre:true},[_c('mrow',{pre:true},[_c('mn',{pre:true},[_v("2")]),_c('mi',{pre:true},[_v("x")])],1),_c('mn',{pre:true},[_v("3")])],1),_c('mo',{pre:true},[_v("+")]),_c('mfrac',{pre:true},[_c('mrow',{pre:true},[_c('mn',{pre:true},[_v("2")]),_c('mi',{pre:true},[_v("y")])],1),_c('mn',{pre:true},[_v("3")])],1),_c('mo',{pre:true},[_v("=")]),_c('mn',{pre:true},[_v("8")])],1),_c('annotation',{pre:true,attrs:{"encoding":"application/x-tex","v-pre":""}},[_v("\\frac{2x}{3} + \\frac{2y}{3} = 8")])],1)],1)],1),_c('span',{pre:true,attrs:{"class":"katex-html","aria-hidden":"true"}},[_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:2.00744em;vertical-align:-0.686em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mopen nulldelimiter"}}),_c('span',{pre:true,attrs:{"class":"mfrac"}},[_c('span',{pre:true,attrs:{"class":"vlist-t vlist-t2"}},[_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:1.32144em;"}},[_c('span',{pre:true,attrs:{"style":"top:-2.314em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord"}},[_v("3")])])]),_c('span',{pre:true,attrs:{"style":"top:-3.23em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"frac-line","style":"border-bottom-width:0.04em;"}})]),_c('span',{pre:true,attrs:{"style":"top:-3.677em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord"}},[_v("2")]),_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("x")])])])]),_c('span',{pre:true,attrs:{"class":"vlist-s"}},[_v("​")])]),_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:0.686em;"}},[_c('span')])])])]),_c('span',{pre:true,attrs:{"class":"mclose nulldelimiter"}})]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:2.00744em;vertical-align:-0.686em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mopen nulldelimiter"}}),_c('span',{pre:true,attrs:{"class":"mfrac"}},[_c('span',{pre:true,attrs:{"class":"vlist-t vlist-t2"}},[_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:1.32144em;"}},[_c('span',{pre:true,attrs:{"style":"top:-2.314em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord"}},[_v("3")])])]),_c('span',{pre:true,attrs:{"style":"top:-3.23em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"frac-line","style":"border-bottom-width:0.04em;"}})]),_c('span',{pre:true,attrs:{"style":"top:-3.677em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord"}},[_v("2")]),_c('span',{pre:true,attrs:{"class":"mord mathnormal","style":"margin-right:0.03588em;"}},[_v("y")])])])]),_c('span',{pre:true,attrs:{"class":"vlist-s"}},[_v("​")])]),_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:0.686em;"}},[_c('span')])])])]),_c('span',{pre:true,attrs:{"class":"mclose nulldelimiter"}})]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.64444em;vertical-align:0em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("8")])])])])])]),_c('span',[_v("(2)")])],1),_v(" "),_c('p',[_v("Euler's equation "),_c('eq',{pre:true},[_c('span',{pre:true,attrs:{"class":"katex"}},[_c('span',{pre:true,attrs:{"class":"katex-mathml"}},[_c('math',{pre:true,attrs:{"xmlns":"http://www.w3.org/1998/Math/MathML"}},[_c('semantics',{pre:true},[_c('mrow',{pre:true},[_c('msup',{pre:true},[_c('mi',{pre:true},[_v("e")]),_c('mrow',{pre:true},[_c('mi',{pre:true},[_v("i")]),_c('mi',{pre:true},[_v("π")])],1)],1),_c('mo',{pre:true},[_v("+")]),_c('mn',{pre:true},[_v("1")]),_c('mo',{pre:true},[_v("=")]),_c('mn',{pre:true},[_v("0")])],1),_c('annotation',{pre:true,attrs:{"encoding":"application/x-tex","v-pre":""}},[_v(" e^{i\\pi}+1=0 ")])],1)],1)],1),_c('span',{pre:true,attrs:{"class":"katex-html","aria-hidden":"true"}},[_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.907994em;vertical-align:-0.08333em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("e")]),_c('span',{pre:true,attrs:{"class":"msupsub"}},[_c('span',{pre:true,attrs:{"class":"vlist-t"}},[_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:0.824664em;"}},[_c('span',{pre:true,attrs:{"style":"top:-3.063em;margin-right:0.05em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:2.7em;"}}),_c('span',{pre:true,attrs:{"class":"sizing reset-size6 size3 mtight"}},[_c('span',{pre:true,attrs:{"class":"mord mtight"}},[_c('span',{pre:true,attrs:{"class":"mord mathnormal mtight"}},[_v("i")]),_c('span',{pre:true,attrs:{"class":"mord mathnormal mtight","style":"margin-right:0.03588em;"}},[_v("π")])])])])])])])])]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.64444em;vertical-align:0em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("1")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.64444em;vertical-align:0em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("0")])])])])]),_v(" is a beautiful equation.")],1)])],1)]),_v(" "),_c('box',{attrs:{"type":"important"}},[_c('p',[_v("If your equation requires special Nunjucks tags like "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{{")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("}}")]),_v(",use a\n"),_c('a',{attrs:{"href":"https://markbind.org/userGuide/tipsAndTricks.html#using-raw-endraw-to-display-content"}},[_v("raw-endraw block")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("{% raw %}\\(e^{{\\frac{1}{3}} + 1}\\){% endraw %}\n")])])])]),_v(" "),_c('p',[_c('small',[_v("More info on allowed symbols: "),_c('a',{attrs:{"href":"https://katex.org/docs/support_table.html"}},[_v("https://katex.org/docs/support_table.html")])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("\n")]),_c('span',[_v("Solve the following simultaneous equations:\n")]),_c('span',[_v("\n")]),_c('span',[_v("\\[ 3x + y = 11 \\] (1)\n")]),_c('span',[_v("\n")]),_c('span',[_v("\\[\\frac{2x}{3} + \\frac{2y}{3} = 8\\] (2)\n")]),_c('span',[_v("\n")]),_c('span',[_v("Euler's equation \\( e^{i\\pi}+1=0 \\) is a beautiful equation.\n")]),_c('span',[_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("Solve the following simultaneous equations:")]),_v(" "),_c('section',{staticClass:"eqno"},[_c('eqn',{pre:true},[_c('span',{pre:true,attrs:{"class":"katex-display"}},[_c('span',{pre:true,attrs:{"class":"katex"}},[_c('span',{pre:true,attrs:{"class":"katex-mathml"}},[_c('math',{pre:true,attrs:{"xmlns":"http://www.w3.org/1998/Math/MathML","display":"block"}},[_c('semantics',{pre:true},[_c('mrow',{pre:true},[_c('mn',{pre:true},[_v("3")]),_c('mi',{pre:true},[_v("x")]),_c('mo',{pre:true},[_v("+")]),_c('mi',{pre:true},[_v("y")]),_c('mo',{pre:true},[_v("=")]),_c('mn',{pre:true},[_v("11")])],1),_c('annotation',{pre:true,attrs:{"encoding":"application/x-tex","v-pre":""}},[_v(" 3x + y = 11 ")])],1)],1)],1),_c('span',{pre:true,attrs:{"class":"katex-html","aria-hidden":"true"}},[_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.72777em;vertical-align:-0.08333em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("3")]),_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("x")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.625em;vertical-align:-0.19444em;"}}),_c('span',{pre:true,attrs:{"class":"mord mathnormal","style":"margin-right:0.03588em;"}},[_v("y")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.64444em;vertical-align:0em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("1")]),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("1")])])])])])]),_c('span',[_v("(1)")])],1),_v(" "),_c('section',{staticClass:"eqno"},[_c('eqn',{pre:true},[_c('span',{pre:true,attrs:{"class":"katex-display"}},[_c('span',{pre:true,attrs:{"class":"katex"}},[_c('span',{pre:true,attrs:{"class":"katex-mathml"}},[_c('math',{pre:true,attrs:{"xmlns":"http://www.w3.org/1998/Math/MathML","display":"block"}},[_c('semantics',{pre:true},[_c('mrow',{pre:true},[_c('mfrac',{pre:true},[_c('mrow',{pre:true},[_c('mn',{pre:true},[_v("2")]),_c('mi',{pre:true},[_v("x")])],1),_c('mn',{pre:true},[_v("3")])],1),_c('mo',{pre:true},[_v("+")]),_c('mfrac',{pre:true},[_c('mrow',{pre:true},[_c('mn',{pre:true},[_v("2")]),_c('mi',{pre:true},[_v("y")])],1),_c('mn',{pre:true},[_v("3")])],1),_c('mo',{pre:true},[_v("=")]),_c('mn',{pre:true},[_v("8")])],1),_c('annotation',{pre:true,attrs:{"encoding":"application/x-tex","v-pre":""}},[_v("\\frac{2x}{3} + \\frac{2y}{3} = 8")])],1)],1)],1),_c('span',{pre:true,attrs:{"class":"katex-html","aria-hidden":"true"}},[_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:2.00744em;vertical-align:-0.686em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mopen nulldelimiter"}}),_c('span',{pre:true,attrs:{"class":"mfrac"}},[_c('span',{pre:true,attrs:{"class":"vlist-t vlist-t2"}},[_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:1.32144em;"}},[_c('span',{pre:true,attrs:{"style":"top:-2.314em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord"}},[_v("3")])])]),_c('span',{pre:true,attrs:{"style":"top:-3.23em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"frac-line","style":"border-bottom-width:0.04em;"}})]),_c('span',{pre:true,attrs:{"style":"top:-3.677em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord"}},[_v("2")]),_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("x")])])])]),_c('span',{pre:true,attrs:{"class":"vlist-s"}},[_v("​")])]),_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:0.686em;"}},[_c('span')])])])]),_c('span',{pre:true,attrs:{"class":"mclose nulldelimiter"}})]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:2.00744em;vertical-align:-0.686em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mopen nulldelimiter"}}),_c('span',{pre:true,attrs:{"class":"mfrac"}},[_c('span',{pre:true,attrs:{"class":"vlist-t vlist-t2"}},[_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:1.32144em;"}},[_c('span',{pre:true,attrs:{"style":"top:-2.314em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord"}},[_v("3")])])]),_c('span',{pre:true,attrs:{"style":"top:-3.23em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"frac-line","style":"border-bottom-width:0.04em;"}})]),_c('span',{pre:true,attrs:{"style":"top:-3.677em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord"}},[_v("2")]),_c('span',{pre:true,attrs:{"class":"mord mathnormal","style":"margin-right:0.03588em;"}},[_v("y")])])])]),_c('span',{pre:true,attrs:{"class":"vlist-s"}},[_v("​")])]),_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:0.686em;"}},[_c('span')])])])]),_c('span',{pre:true,attrs:{"class":"mclose nulldelimiter"}})]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.64444em;vertical-align:0em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("8")])])])])])]),_c('span',[_v("(2)")])],1),_v(" "),_c('p',[_v("Euler's equation "),_c('eq',{pre:true},[_c('span',{pre:true,attrs:{"class":"katex"}},[_c('span',{pre:true,attrs:{"class":"katex-mathml"}},[_c('math',{pre:true,attrs:{"xmlns":"http://www.w3.org/1998/Math/MathML"}},[_c('semantics',{pre:true},[_c('mrow',{pre:true},[_c('msup',{pre:true},[_c('mi',{pre:true},[_v("e")]),_c('mrow',{pre:true},[_c('mi',{pre:true},[_v("i")]),_c('mi',{pre:true},[_v("π")])],1)],1),_c('mo',{pre:true},[_v("+")]),_c('mn',{pre:true},[_v("1")]),_c('mo',{pre:true},[_v("=")]),_c('mn',{pre:true},[_v("0")])],1),_c('annotation',{pre:true,attrs:{"encoding":"application/x-tex","v-pre":""}},[_v(" e^{i\\pi}+1=0 ")])],1)],1)],1),_c('span',{pre:true,attrs:{"class":"katex-html","aria-hidden":"true"}},[_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.907994em;vertical-align:-0.08333em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("e")]),_c('span',{pre:true,attrs:{"class":"msupsub"}},[_c('span',{pre:true,attrs:{"class":"vlist-t"}},[_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:0.824664em;"}},[_c('span',{pre:true,attrs:{"style":"top:-3.063em;margin-right:0.05em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:2.7em;"}}),_c('span',{pre:true,attrs:{"class":"sizing reset-size6 size3 mtight"}},[_c('span',{pre:true,attrs:{"class":"mord mtight"}},[_c('span',{pre:true,attrs:{"class":"mord mathnormal mtight"}},[_v("i")]),_c('span',{pre:true,attrs:{"class":"mord mathnormal mtight","style":"margin-right:0.03588em;"}},[_v("π")])])])])])])])])]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.64444em;vertical-align:0em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("1")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.64444em;vertical-align:0em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("0")])])])])]),_v(" is a beautiful equation.")],1)])],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"modals"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"modals"}},[_c('span',{staticClass:"anchor",attrs:{"id":"modals"}}),_c('strong',[_v("Modals")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#modals","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"modals-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"modals-2"}}),_v("Modals"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#modals-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Modals are to be used together with the "),_c('a',{attrs:{"href":"#trigger"}},[_v("Trigger")]),_v(" component for activation.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_v("More about "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:loremipsum\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(">")]),_v(".\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**Modal header** :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:loremipsum\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n")]),_c('span',[_v(" magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n")]),_c('span',[_v(" consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n")]),_c('span',[_v(" Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v("This is the same "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:loremipsum\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(">")]),_v(" as last one.\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:centered\"")]),_v(">")]),_v("This is a trigger for a centered modal"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(">")]),_v(".\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**Centered** :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:centered\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("center")]),_v(">")]),_v("\n")]),_c('span',[_v(" Centered\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:ok-text\"")]),_v(">")]),_v("This is a trigger for a modal with a custom OK button"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(">")]),_v(".\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"OK button visible!\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:ok-text\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ok-text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Custom OK\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n")]),_c('span',[_v(" magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n")]),_c('span',[_v(" consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n")]),_c('span',[_v(" Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("More about "),_c('trigger',{attrs:{"for":"modal:loremipsum"}},[_v("trigger")]),_v(".")],1),_v(" "),_c('b-modal',{ref:"modal:loremipsum",attrs:{"id":"modal:loremipsum","hide-footer":"","size":"","modal-class":"mb-zoom"},scopedSlots:_u([{key:"modal-title",fn:function(){return [_c('strong',[_v("Modal header")]),_v(" 🚀")]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n")]),_v(" "),_c('br'),_v("\nThis is the same "),_c('trigger',{attrs:{"for":"modal:loremipsum"}},[_v("trigger")]),_v(" as last one.\n"),_c('p',[_c('trigger',{attrs:{"for":"modal:centered"}},[_v("This is a trigger for a centered modal")]),_v(".")],1),_v(" "),_c('b-modal',{ref:"modal:centered",attrs:{"id":"modal:centered","centered":"","hide-footer":"","size":"","modal-class":"mb-zoom"},scopedSlots:_u([{key:"modal-title",fn:function(){return [_c('strong',[_v("Centered")]),_v(" 🚀")]},proxy:true}])},[_v("\n Centered\n")]),_v(" "),_c('p',[_c('trigger',{attrs:{"for":"modal:ok-text"}},[_v("This is a trigger for a modal with a custom OK button")]),_v(".")],1),_v(" "),_c('b-modal',{ref:"modal:ok-text",attrs:{"id":"modal:ok-text","ok-title":"Custom OK","ok-only":"","size":"","modal-class":"mb-zoom"},scopedSlots:_u([{key:"modal-title",fn:function(){return [_v("OK button visible!")]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n")])],1)],1)]),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("More about triggers")])]},proxy:true}])},[_v(" "),_c('div',[_c('p',[_c('strong',[_c('strong',[_v("Triggers")])])]),_v(" "),_c('p',[_v("Trigger provides more flexibility in triggering contextual overlay via Tooltip, Popover or Modal.")]),_v(" "),_c('p',[_v("You could embed a Trigger within the text, and define the Tooltip, Popover or Modal at a separate location, which allows for a cleaner authoring flow.")]),_v(" "),_c('p',[_v("Specify the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(" attribute on the Tooltip, Popover or Modal component, and use the same "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(" in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("for")]),_v(" attribute of the Trigger to allow the Trigger to invoke the specific overlay elements.\nAdditionally, multiple Triggers could share the same overlay by providing them with the same "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(".\n"),_c('br')]),_v(" "),_c('p',[_c('strong',[_v("Trigger's "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("trigger")]),_v(" attribute (which defaults to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")]),_v(") is independent of the target's.")])]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("trigger")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")])]),_v(" "),_c('td',[_v("How the overlay view is triggered."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("click")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("focus")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("for")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("The id for the overlay view to be shown.")])]),_v(" "),_c('tr',[_c('td',[_v("placement")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("auto")])]),_v(" "),_c('td',[_v("How to position the Popover or Tooltip."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("auto")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("top")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("left")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("right")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bottom")]),_v(".")])])])])])])]),_c('p'),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("header"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Header of the Modal component. Supports inline markdown text.")])]),_v(" "),_c('tr',[_c('td',[_v("footer "),_c('hr',{staticStyle:{"margin-top":"0.2rem","margin-bottom":"0"}}),_v(" "),_c('small',[_v("modal-footer "),_c('br'),_v(" (deprecated)")])]),_v(" "),_c('td',[_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_v("Slot")])],1),_v(" "),_c('td',[_v("empty")]),_v(" "),_c('td',[_v("Specifying this will override the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("ok-text")]),_v(" attribute, and the OK button will not render.")])]),_v(" "),_c('tr',[_c('td',[_v("ok-text")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Text for the OK button.")])]),_v(" "),_c('tr',[_c('td',[_v("effect")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("zoom")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("zoom")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fade")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("id")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("Used by "),_c('a',{attrs:{"href":"#trigger"}},[_v("Trigger")]),_v(" to activate the Modal by id.large")])]),_v(" "),_c('tr',[_c('td',[_v("small")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Creates a "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/4.0/components/modal/#optional-sizes"}},[_v("small Modal")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("large")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Creates a "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/4.0/components/modal/#optional-sizes"}},[_v("large Modal")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("center")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Vertically centers the modal (in addition to the horizontal centering by default).")])]),_v(" "),_c('tr',[_c('td',[_v("backdrop")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("true")])]),_v(" "),_c('td',[_v("Enables closing the Modal by clicking on the backdrop.")])])])])]),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("Click "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trigger")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"click\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:unused\"")]),_v(">")]),_v("here"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(">")]),_v(" to open a modal.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Modal header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:unused\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Modal content\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("Hover "),_c('trigger',{attrs:{"large":"","for":"modal:unused"}},[_v("here")]),_v(" to open a modal.")],1),_v(" "),_c('b-modal',{ref:"modal:unused",attrs:{"id":"modal:unused","ok-title":"OK","ok-only":"","size":"","modal-class":"mb-zoom"},scopedSlots:_u([{key:"modal-title",fn:function(){return [_v("Modal header")]},proxy:true}])},[_v("\n Modal content\n")])],1)],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"nav-bars"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"nav-bars"}},[_c('span',{staticClass:"anchor",attrs:{"id":"nav-bars"}}),_c('strong',[_v("Nav Bars")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#nav-bars","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"navbars"}},[_c('span',{staticClass:"anchor",attrs:{"id":"navbars"}}),_v("Navbars"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#navbars","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Navbar allows visitors of your website to navigate through pages easily.")])]),_v(" "),_c('p',[_c('strong',[_v("Navbars support link highlighting; link highlighting can be customised by specifying rules.")])]),_v(" "),_c('ul',[_c('li',[_v("Define "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default-highlight-on")]),_v(" in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<navbar>")]),_v(" to specify fallback highlight rules.")]),_v(" "),_c('li',[_v("Define "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("data-highlight")]),_v(" in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<a>")]),_v(" tags with the class "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("nav-link")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("dropdown-item")]),_v(" to specify individual highlight rules.")])]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('div',[_c('p',[_v("Note: "),_c('strong',[_v("Navbars")]),_v(" should be placed within a "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#headers"}},[_v("header file")]),_v(" to ensure that they are correctly positioned at the top of the page, above the "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#site-navigation-menus"}},[_v("site navigation")]),_v(" and "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#page-navigation-menus"}},[_v("page navigation")]),_v(" menus.")])])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Brand as slot -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- You can use dropdown component -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Option"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- For right positioning use slot -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Fork..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dark\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Brand as slot -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- You can use dropdown component -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Option"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- For right positioning use slot -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Fork..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"light\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Brand as slot -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- You can use dropdown component -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Option"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- For right positioning use slot -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Fork..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('navbar',{attrs:{"type":"primary"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1),_v(" "),_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1),_v(" "),_c('navbar',{attrs:{"type":"light"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("type")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("primary")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("primary")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("dark")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("light")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("none")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("default-highlight-on")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("sibling-or-child")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("sibling-or-child")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("sibling")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("child")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("exact")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("none")]),_v(". Specifies link highlight rules for navbars.")])])])])]),_c('box',{attrs:{"type":"tip"}},[_c('p',[_v("If you wish to further customize your navbar beyond the primary, dark, and light theme colors, specify the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"none\"")]),_v(" attribute and "),_c('a',{attrs:{"href":"#inserting-custom-classes-into-components"}},[_v("insert your own custom styles")]),_v(" or "),_c('trigger',{attrs:{"trigger":"click","for":"modal:built-in-bg"}},[_v("use built-in background styles")]),_v(" via the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("add-class")]),_v(" attribute.")],1)]),_v(" "),_c('b-modal',{ref:"modal:built-in-bg",attrs:{"id":"modal:built-in-bg","hide-footer":"","size":"","modal-class":"mb-zoom"},scopedSlots:_u([{key:"modal-title",fn:function(){return [_v("Built-in background styles")]},proxy:true}])},[_v(" "),_c('span',[_v("For instance, Bootstrap supports "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".bg-danger")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bg-info")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bg-primary")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bg-success")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bg-warning")]),_v(" as background colors.")]),_v(" "),_c('span',[_v("In "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{your-site}/_markbind/headers/header.md")]),_v(", you can change "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<navbar type=\"dark/primary/light\">")]),_v(" to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<navbar type=\"none\" add-class=\"bg-warning/danger/info/primary/success\">")]),_v(" to apply Bootstrap background styles.")])]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Navbar Link Highlighting")])])]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("head-bottom")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("link")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rel")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"stylesheet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/css/main.css\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("head-bottom")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("header")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fixed")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dark\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("img")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/images/logo-darkbackground.svg\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("height")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"20\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exact\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("HOME"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--ug\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"sibling-or-child\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("USER GUIDE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--dg\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"sibling-or-child\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/devGuide/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("DEVELOPER GUIDE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exact\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/showcase.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("SHOWCASE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exact\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/about.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("ABOUT"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("md")]),_v(">")]),_v(":fab-github:"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("md")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("header")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")])])]),_c('p',[_c('strong',[_c('strong',[_v("Highlight Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("child")])]),_v(" "),_c('td',[_v("Highlights link if URL in address bar is a child of the link. E.g "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("foo/bar")]),_v(" is a child of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("foo")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("sibling")])]),_v(" "),_c('td',[_v("Highlights link if URL in address bar is a sibling of the link. E.g "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("foo/bar")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("foo/bear")]),_v(" are siblings.")])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("sibling-or-child")])]),_v(" "),_c('td',[_v("Highlights link if URL in address bar is a sibling or child of the link.")])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("exact")])]),_v(" "),_c('td',[_v("Highlights link if URL in address bar exactly matches link.")])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("none")])]),_v(" "),_c('td',[_v("No highlighting.")])])])])]),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Brand as slot -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- You can use dropdown component -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Option"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- For right positioning use slot -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Fork..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('navbar',{attrs:{"type":"primary"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1),_v(" "),_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1),_v(" "),_c('navbar',{attrs:{"type":"light"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1)],1),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Mobile page and site navigation menus")])])]),_v(" "),_c('p',[_v("The navbar component also provides access to MarkBind's "),_c('a',{attrs:{"href":"/userGuide/components/navigation.html#site-navigation-menus"}},[_v("site navigation")]),_v(" and "),_c('a',{attrs:{"href":"/userGuide/components/navigation.html#page-navigation-menus"}},[_v("page navigation")]),_v(" menu "),_c('strong',[_v("components")]),_v(" if used in the page's "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#layouts"}},[_v("layout")]),_v(". No additional setup is required!")]),_v(" "),_c('p',[_v("If you are viewing the documentation on a larger device, resize the window to see what it looks like.")]),_v(" "),_c('p',[_v("Alternatively, if you want to display "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("e.g. adding an image to the site nav")]),_v("additional content")]),_v(" in these navigation menus, the navbar is also able to \"pull in\" any "),_c('strong',[_v("container element")]),_v(" with a html "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(" of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"site-nav\"")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"page-nav\"")]),_v(". You may refer to the "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#layouts"}},[_v("layouts")]),_v(" section for an example.")]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_c('p',[_v("The navbar component auto-detects if the MarkBind's navigation components or your element containers has any "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<a>")]),_v(" tags in particular")]),_v("links")]),_v("."),_c('br'),_v("\nIf absent, the navigation buttons to open the menus are "),_c('em',[_v("automatically hidden")]),_v(".")])]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Mobile navigation menu button placement")])])]),_v(" "),_c('p',[_v("If you wish to alter the button placement on the navbar, you may use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<site-nav-button />")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<page-nav-button />")]),_v(" components in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lower-navbar")]),_v(" slot.")]),_v(" "),_c('p',[_v("By default, if the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lower-navbar")]),_v(" slot is not specified, the site and page navigation buttons are simply placed as such.")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Any normal navbar items -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Use slot to wrap the buttons in the lower navbar -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"lower-navbar\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-menu-container\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("site-nav-button")]),_v(" />")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("page-nav-button")]),_v(" />")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(">")]),_v("\n")])])]),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Component")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("page-nav-button")])]),_v(" "),_c('td',[_v("Pulls any element with an identifier, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id=page-nav")]),_v(" into the menu. If no such element exists, it pulls any "),_c('a',{attrs:{"href":"/userGuide/components/navigation.html#page-navigation-menus"}},[_v("page navigation menu")]),_v(" used in the layout.")])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site-nav-button")])]),_v(" "),_c('td',[_v("Pulls any element with an identifier, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id=site-nav")]),_v(" into the menu. If no such element exists, it pulls all "),_c('a',{attrs:{"href":"/userGuide/components/navigation.html#site-navigation-menus"}},[_v("site navigation menu components")]),_v(" used in the layout.")])])])])]),_c('p',[_c('strong',[_c('strong',[_v("Styling the mobile page and site navigation menus")])])]),_v(" "),_c('p',[_v("You may also wish to style your navigation content differently on mobile view.\nBy default, MarkBind already provides some reasonable overrides for smaller screens, applied over any styles you might have for the mobile navigation content identified above.")]),_v(" "),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Css class attached to the root navigation element")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs css","heading":"Css class attached to the root navigation element"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-selector-class"}},[_v(".mb-mobile-nav")]),_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("display")]),_v(": block "),_c('span',{pre:true,attrs:{"class":"hljs-meta"}},[_v("!important")]),_v(";\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("margin")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("0")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-meta"}},[_v("!important")]),_v(";\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("border")]),_v(": none "),_c('span',{pre:true,attrs:{"class":"hljs-meta"}},[_v("!important")]),_v(";\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("padding")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("10px")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-meta"}},[_v("!important")]),_v(";\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("width")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("100%")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-meta"}},[_v("!important")]),_v(";\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("max-width")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("100%")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-meta"}},[_v("!important")]),_v(";\n")]),_c('span',[_v("}\n")])])])])]),_c('p',[_v("If you require greater customisation, you may simply compose the respective selectors with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".mb-mobile-nav")]),_v(" element.")]),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs css","heading":""}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-selector-id"}},[_v("#site-nav")]),_c('span',{pre:true,attrs:{"class":"hljs-selector-class"}},[_v(".mb-mobile-nav")]),_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("/* Be sure to add the !important css rule when overriding .mb-mobile-nav's properties! */")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("border")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("1px")]),_v(" solid black "),_c('span',{pre:true,attrs:{"class":"hljs-meta"}},[_v("!important")]),_v(";\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("/* For other properties, there is no need. */")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("color")]),_v(": red;\n")]),_c('span',[_v("}\n")])])]),_c('box',{attrs:{"type":"tip","seamless":""}},[_c('p',[_v("Refer to the "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("layouts")]),_v(" section to find out how to add custom css files to a page!")])])],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"page-navigation-menus"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"page-navigation-menus"}},[_c('span',{staticClass:"anchor",attrs:{"id":"page-navigation-menus"}}),_c('strong',[_v("Page Navigation Menus")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#page-navigation-menus","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"page-navigation-menus-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"page-navigation-menus-2"}}),_v("Page Navigation Menus"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#page-navigation-menus-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{attrs:{"id":"content"}},[_c('p',[_c('strong',[_v("A "),_c('em',[_v("Page Navigation Menu")]),_v(" ("),_c('mark',[_c('em',[_v("pageNav")]),_v(" for short")]),_v(") a list of the current page's headings.")]),_v(" Page navigation menus are only available for use in "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#layouts"}},[_v("layouts")]),_v(".")]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Adding a pageNav")])])]),_v(" "),_c('ol',[_c('li',[_c('p',[_c('strong',[_v("Specify the smallest heading level you want to be included")]),_v(" within the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<frontmatter>")]),_v(" of a page with "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("The value "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default")]),_v(" will use "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("headingIndexingLevel")]),_v(" within "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(".")]),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"default\"")])]),_v(" or a "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("HTML defines six levels of headings, numbered from "),_c('br'),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("1 to 6")]),_v(".")]),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("heading level")])]),_v(".")]),_v(" "),_c('box',{attrs:{"type":"info","seamless":""}},[_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default")]),_v(" level uses the "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#headingindexinglevel"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("headingIndexingLevel")]),_v(" property")]),_v(" of your site configuration file.")])])],1),_v(" "),_c('li',[_c('p',[_c('strong',[_v("(Optional) You may also specify a page navigation title")]),_v(" within "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<frontmatter>")]),_v(" that will be placed at the top of the page navigation menu.")])]),_v(" "),_c('li',[_c('p',[_c('strong',[_v("Position the page navigation menu")]),_v(" within your layout using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<page-nav />")]),_v(" component.")])]),_v(" "),_c('li',[_c('p',[_c('strong',[_v("(Optional) To make pageNav accessible on smaller screens, you can use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<page-nav-button />")]),_v(" component in the "),_c('a',{attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("navbar")]),_v(".")])])])]),_v(" "),_c('div',{staticClass:"indented",attrs:{"id":"short"}},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v("\nIn the page that you want to have page navigation, you may show only "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<h1>")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<h2>")]),_v(" headings in the pageNav, and set a custom pageNav title like so:")],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" pageNav: 2\n")]),_c('span',[_v(" pageNavTitle: \"Chapters of This Page\"\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")])])]),_c('p',[_v("Then, in your "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#layouts"}},[_v("layout file")]),_v(", use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<page-nav />")]),_v(" component to position the pageNav.")]),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('trigger',{attrs:{"for":"modal:page-nav-example"}},[_v("Example usage of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<page-nav />")]),_v(" component")])],1),_v(" "),_c('b-modal',{ref:"modal:page-nav-example",attrs:{"id":"modal:page-nav-example","hide-footer":"","size":"lg","modal-class":"mb-zoom"},scopedSlots:_u([{key:"modal-title",fn:function(){return [_v("Using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pageNav")]),_v(" variable in a layout")]},proxy:true}])},[_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("head-bottom")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Use head-top and head-bottom tags to insert content into the html <head> tag -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("link")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rel")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"stylesheet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/css/main.css\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("head-bottom")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Fix the header to the top while scrolling using the fixed attribute in a <header> tag -->")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("header")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fixed")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dark\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("img")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/images/logo-darkbackground.svg\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("height")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"20\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exact\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("HOME"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--ug\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"sibling-or-child\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/userGuide/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("USER GUIDE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--dg\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"sibling-or-child\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/devGuide/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("DEVELOPER GUIDE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("header")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"flex-body\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Push content downward when using a fixed header with the fixed-header-padding class -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("nav")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"site-nav\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fixed-header-padding\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"site-nav-top\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"font-weight-bold mb-2\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"font-size: 1.25rem;\"")]),_v(">")]),_v("User Guide"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-component slim-scroll\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("site-nav")]),_v(">")]),_v("\n")]),_c('span',[_v("* [**Getting Started**]({{baseUrl}}/userGuide/gettingStarted.html)\n")]),_c('span',[_v(" * **Authoring Contents** :expanded:\n")]),_c('span',[_v(" * [Overview]({{baseUrl}}/userGuide/authoringContents.html)\n")]),_c('span',[_v(" * [Adding Pages]({{baseUrl}}/userGuide/addingPages.html)\n")]),_c('span',[_v(" * [MarkBind Syntax Overview]({{baseUrl}}/userGuide/markBindSyntaxOverview.html)\n")]),_c('span',[_v(" * [Formatting Contents]({{baseUrl}}/userGuide/formattingContents.html)\n")]),_c('span',[_v(" * [Using Components]({{baseUrl}}/userGuide/usingComponents.html)\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("site-nav")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("nav")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"content-wrapper\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fixed-header-padding\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Insert the page's content into the layout using the {{ content }} variable -->")]),_v("\n")]),_c('span',[_v(" {{ content }}\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("nav")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"page-nav\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fixed-header-padding\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-component slim-scroll\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Insert a page navigation menu using the <page-nav /> component -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("page-nav")]),_v(" />")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("nav")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("footer")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text-center\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("[Generated by {{MarkBind}} on {{timestamp}}]"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("This site is powered by "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://www.netlify.com/\"")]),_v(">")]),_v("Netlify"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("footer")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Insert content after the html <body> tag using the <script-bottom> tag -->")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script-bottom")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"javascript"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" alert("),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'Hi!'")]),_v(")")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" ")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script-bottom")]),_v(">")]),_v("\n")])])])])])],1)]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("You can see an example of a Page Navigation Bar "),_c('mark',[_v("on the right side")]),_v(" of "),_c('a',{attrs:{"target":"_blank","href":"/userGuide/formattingContents.html"}},[_v("this page")]),_v(".\n")])]),_c('p')])]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"panels"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"panels"}},[_c('span',{staticClass:"anchor",attrs:{"id":"panels"}}),_c('strong',[_v("Panels")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#panels","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"panels-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"panels-2"}}),_v("Panels"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#panels-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Panel is a flexible container that supports collapsing and expanding its content. It is expandable by default.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This is your header for a Panel, click me to expand!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This is your header for a Panel, click me to expand!")])]},proxy:true}])},[_v("\n Lorem ipsum ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("With "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("minimized")]),_v(" attribute, panel is minimized into an inline block element. The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("alt")]),_v(" attribute is for you to specify the minimized block header.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"How to cultivate a tomato plant at home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tomatoes\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("How to cultivate a tomato plant at home")])]},proxy:true},{key:"_alt",fn:function(){return [_c('p',[_v("Tomatoes")])]},proxy:true}])},[_v("\n Lorem ipsum ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("With "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("expanded")]),_v(" attribute, you can set the panels to be expanded when loaded in.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Have your readers click less to see the Panel's contents\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("expanded")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Have your readers click less to see the Panel's contents")])]},proxy:true}])},[_v("\n Lorem ipsum ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("With the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("expand-headerless")]),_v(" attribute, you can hide the panel header when it is expanded.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This header will only show when the Panel is collapsed\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("expand-headerless")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"expand-headerless":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This header will only show when the Panel is collapsed")])]},proxy:true}])},[_v("\n Lorem ipsum ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("With the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("peek")]),_v(" attribute, you may showcase part of your content without expanding the panel.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Give your readers a peek of the content without expanding Panel\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("peek")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n")]),_c('span',[_v(" magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n")]),_c('span',[_v(" consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n")]),_c('span',[_v(" Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n")]),_c('span',[_v(" Curabitur ornare ipsum eu ex congue egestas. Maecenas pretium nibh sed enim ornare finibus. Mauris quis metus \n")]),_c('span',[_v(" facilisis, mattis tellus nec, pulvinar mi. Quisque at vehicula lectus. Ut ac lacus mi. Donec mattis nec velit \n")]),_c('span',[_v(" eget tincidunt. Maecenas vel mauris mattis nisl tempor sollicitudin. Orci varius natoque penatibus et magnis \n")]),_c('span',[_v(" dis parturient montes, nascetur ridiculus mus. Duis tincidunt diam eu dolor pellentesque, eget dignissim tortor \n")]),_c('span',[_v(" pellentesque. \n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"peek":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Give your readers a peek of the content without expanding Panel")])]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n Curabitur ornare ipsum eu ex congue egestas. Maecenas pretium nibh sed enim ornare finibus. Mauris quis metus \n facilisis, mattis tellus nec, pulvinar mi. Quisque at vehicula lectus. Ut ac lacus mi. Donec mattis nec velit \n eget tincidunt. Maecenas vel mauris mattis nisl tempor sollicitudin. Orci varius natoque penatibus et magnis \n dis parturient montes, nascetur ridiculus mus. Duis tincidunt diam eu dolor pellentesque, eget dignissim tortor \n pellentesque. \n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Panel provides many types that change its appearance.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**light type panel (DEFAULT)**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"light\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**dark type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dark\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**primary type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**secondary type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"secondary\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**info type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**danger type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"danger\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**warning type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**success type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**seamless type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"seamless\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**minimal type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"minimal\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"type":"light","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("light type panel (DEFAULT)")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"dark","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("dark type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"primary","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("primary type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"secondary","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("secondary type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"info","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("info type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"danger","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("danger type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"warning","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("warning type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"success","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("success type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"seamless","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("seamless type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"minimal","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("minimal type panel")])])]},proxy:true}])},[_v("\n ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Show/Hide buttons using "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-switch")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-close")]),_v(".")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This panel does not have a switch button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-switch")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This panel does not have a close button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-close")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This panel does not have either buttons\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-close")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-switch")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"no-switch":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This panel does not have a switch button")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"no-close":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This panel does not have a close button")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"no-close":"","no-switch":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This panel does not have either buttons")])]},proxy:true}])},[_v("\n ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Use markdown in the header (only inline level markdown are supported).")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**Bold text** :rocket: ![](https://markbind.org/images/logo-lightbackground.png =x20)\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"seamless\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("Bold text")]),_v(" 🚀 "),_c('a',{attrs:{"href":"https://markbind.org/images/logo-lightbackground.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","alt":""}})])])]},proxy:true}])},[_v("\n ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("If "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" attribute is provided, the panel will take content from the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" specified and add it to the Panel body.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Content loaded in from 'src'\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"extra/loadContent.html#fragment\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('panel',{attrs:{"src":"/userGuide/syntax/extra/loadContent._include_.html#fragment","minimized":"","fragment":"fragment"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Content loaded in from 'src'")])]},proxy:true}])})],1)])],1)]),_v(" "),_c('p',[_c('strong',[_v("If "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("popup-url")]),_v(" attribute is provided, a popup button will be shown. If clicked, it opens the specified url in a new window.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Try clicking on my pop-up button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("popup-url")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/syntax/extra/loadContent.html\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" This panel has a popup.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"popup-url":"/userGuide/syntax/extra/loadContent.html"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Try clicking on my pop-up button")])]},proxy:true}])},[_v("\n This panel has a popup.\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("If "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("preload")]),_v(" attribute is provided, the panel body will load the HTML when the page renders instead of after being expanded.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Right click and inspect my HTML before expanding me!\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"extra/loadContent.html#fragment\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("preload")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("You should be able to find this text before expanding the Panel."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"src":"/userGuide/syntax/extra/loadContent._include_.html#fragment","preload":"","fragment":"fragment"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Right click and inspect my HTML before expanding me!")])]},proxy:true}])},[_v(" "),_c('p',[_v("You should be able to find this text before expanding the Panel.")])])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("You can nest Panels or other components within a Panel.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Parent Panel\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Level 1 Nested Panel\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Level 2 Nested Panel\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tip-box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" I'm a nested tip-box\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tip-box")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Level 3 Nested Panel\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"minimal\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" minimal-type panel\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Level 1 Nested Panel\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Some Text\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Parent Panel")])]},proxy:true}])},[_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Level 1 Nested Panel")])]},proxy:true}])},[_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Level 2 Nested Panel")])]},proxy:true}])},[_v(" "),_c('tip-box',{attrs:{"type":"success"}},[_v("\n I'm a nested tip-box\n ")]),_v(" "),_c('panel',{attrs:{"type":"minimal"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Level 3 Nested Panel")])]},proxy:true}])},[_v("\n minimal-type panel\n ")])],1)],1),_v(" "),_c('panel',{attrs:{"type":"info"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Level 1 Nested Panel")])]},proxy:true}])},[_v("\n Some Text\n ")])],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("header"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("The clickable text on the Panel's header. Supports MarkDown text.")])]),_v(" "),_c('tr',[_c('td',[_v("alt")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_v("Panel header")]),_v(" "),_c('td',[_v("The clickable text on the minimised Panel. Supports MarkDown text.")])]),_v(" "),_c('tr',[_c('td',[_v("expandable")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("true")])]),_v(" "),_c('td',[_v("Whether Panel is expandable.")])]),_v(" "),_c('tr',[_c('td',[_v("expanded")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether Panel is expanded or collapsed when loaded in.")])]),_v(" "),_c('tr',[_c('td',[_v("minimized")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether Panel is minimized.")])]),_v(" "),_c('tr',[_c('td',[_v("expand-headerless")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether to hide the header text when the Panel is expanded.")])]),_v(" "),_c('tr',[_c('td',[_v("peek")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether to show part of the content when the Panel is collapsed.")])]),_v(" "),_c('tr',[_c('td',[_v("no-close")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether to show the close button.")])]),_v(" "),_c('tr',[_c('td',[_v("no-switch")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether to show the expand switch.")])]),_v(" "),_c('tr',[_c('td',[_v("bottom-switch")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("true")])]),_v(" "),_c('td',[_v("Whether to show an expand switch at the bottom of the panel. Independent of no-switch.")])]),_v(" "),_c('tr',[_c('td',[_v("popup-url")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The url that the popup window will navigate to. The url can be absolute or relative.")])]),_v(" "),_c('tr',[_c('td',[_v("preload")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether the content is loaded immediately from "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("src")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The url to the remote page to be loaded as the content of the panel.")])]),_v(" "),_c('tr',[_c('td',[_v("type")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("light")])]),_v(" "),_c('td',[_v("The type or color scheme of the panel (single)."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("light")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("dark")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("primary")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("secondary")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("info")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("success")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("warning")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("danger")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("seamless")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("minimal")]),_v(".")])])])])]),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary type panel\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(" >")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('panel',{attrs:{"type":"minimal"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("minimal type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("seamless type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"info","expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("info type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"danger"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("danger type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"warning"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("warning type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"success"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("success type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('p'),_v(" "),_c('panel',{attrs:{"type":"light","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("light type panel (DEFAULT)")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"dark","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("dark type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"primary","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("primary type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"secondary","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("secondary type panel")])]},proxy:true}])},[_v("\n ...\n")])],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"paragraphs"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"paragraphs"}},[_c('span',{staticClass:"anchor",attrs:{"id":"paragraphs"}}),_c('strong',[_v("Paragraphs")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#paragraphs","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"paragraphs-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"paragraphs-2"}}),_v("Paragraphs"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#paragraphs-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Use one or more empty lines to separate paragraphs.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("This is the first paragraph.\n")]),_c('span',[_v("\n")]),_c('span',[_v("This is another paragraph. This is the second sentence.\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("This is the first paragraph.")]),_v(" "),_c('p',[_v("This is another paragraph. This is the second sentence.")])])],1)]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("This is the first paragraph.\n")]),_c('span',[_v("\n")]),_c('span',[_v("This is another paragraph. This is the second sentence.\n")])])])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"pictures"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"pictures"}},[_c('span',{staticClass:"anchor",attrs:{"id":"pictures"}}),_c('strong',[_v("Pictures")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#pictures","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"pictures-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"pictures-2"}}),_v("Pictures"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#pictures-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("A "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pic")]),_v(" component allows you to add captions below the image.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://markbind.org/images/logo-lightbackground.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"300\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Logo\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" MarkBind Logo\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://markbind.org/images/logo-lightbackground.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"300\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Logo\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("eager")]),_v(">")]),_v("\n")]),_c('span',[_v(" MarkBind Logo\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pic',{attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","width":"300","alt":"Logo"}},[_v("\n MarkBind Logo\n")]),_v(" "),_c('pic',{attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","width":"300","alt":"Logo","eager":""}},[_v("\n MarkBind Logo\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("alt")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_c('strong',[_v("This must be specified.")]),_c('br'),_v("The alternative text of the image.")])]),_v(" "),_c('tr',[_c('td',[_v("height")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The height of the image in pixels.")])]),_v(" "),_c('tr',[_c('td',[_v("src")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_c('strong',[_v("This must be specified.")]),_c('br'),_v("The URL of the image."),_c('br'),_v("The URL can be specified as absolute or relative references. More info in: "),_c('em',[_c('a',{attrs:{"href":"/userGuide/formattingContents.html#intraSiteLinks"}},[_v("Intra-Site Links")])])])]),_v(" "),_c('tr',[_c('td',[_v("width")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The width of the image in pixels."),_c('br'),_v("If both width and height are specified, width takes priority over height. It is to maintain the image's aspect ratio.")])]),_v(" "),_c('tr',[_c('td',[_v("eager")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boolean")])]),_v(" "),_c('td',[_v("false")]),_v(" "),_c('td',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<pic>")]),_v(" component lazy loads its images by default."),_c('br'),_v("If you want to eagerly load the images, simply specify this attribute.")])])])])]),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://markbind.org/images/logo-lightbackground.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"300\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Logo\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" MarkBind Logo\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('pic',{attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","width":"300","alt":"Logo"}},[_v("\n MarkBind Logo\n")])],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"popovers"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"popovers"}},[_c('span',{staticClass:"anchor",attrs:{"id":"popovers"}}),_c('strong',[_v("Popovers")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#popovers","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"popovers-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"popovers-2"}}),_v("Popovers"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#popovers-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fade\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on top"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fade\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"left\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on left"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fade\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on right"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fade\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"bottom\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on bottom"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("hr")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Header"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fade\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on top"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fade\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"left\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on left"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fade\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on right"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fade\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"bottom\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on bottom"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("hr")]),_v(" />")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"scale\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trigger")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hover\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Mouseenter"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Markdown"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"scale\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**Emoji header** :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"!!emoji!! content :cat:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Hover"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Content using slot"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"scale\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**Emoji header** :rocket:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"content\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" This is a long content...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Hover"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(" />")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(" />")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Wrap Text"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"false\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nice!\"")]),_v(">")]),_v("What do you say"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"fade","placement":"top","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on top")])]),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.left.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"left":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"fade","placement":"left","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on left")])]),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.right.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"right":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"fade","placement":"right","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on right")])]),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.bottom.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"bottom":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"fade","placement":"bottom","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on bottom")])]),_v(" "),_c('hr'),_v(" "),_c('h4',{staticClass:"no-index",attrs:{"id":"header-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"header-2"}}),_v("Header"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#header-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"fade","placement":"top","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_v("Header")]),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on top")])]),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.left.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"left":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"fade","placement":"left","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_v("Header")]),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on left")])]),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.right.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"right":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"fade","placement":"right","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_v("Header")]),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on right")])]),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.bottom.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"bottom":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"fade","placement":"bottom","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_v("Header")]),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on bottom")])]),_v(" "),_c('hr'),_v(" "),_c('h4',{staticClass:"no-index",attrs:{"id":"trigger"}},[_c('span',{staticClass:"anchor",attrs:{"id":"trigger"}}),_v("Trigger"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#trigger","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"scale","placement":"top","trigger":"hover","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_v("Header")]),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Mouseenter")])])]),_v(" "),_c('h4',{staticClass:"no-index",attrs:{"id":"markdown"}},[_c('span',{staticClass:"anchor",attrs:{"id":"markdown"}}),_v("Markdown"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#markdown","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"scale","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_c('strong',[_v("Emoji header")]),_v(" 🚀")]),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_c('span',{staticClass:"underline"},[_v("emoji")]),_v(" content 🐱")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Hover")])])]),_v(" "),_c('h4',{staticClass:"no-index",attrs:{"id":"content-using-slot"}},[_c('span',{staticClass:"anchor",attrs:{"id":"content-using-slot"}}),_v("Content using slot"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#content-using-slot","onclick":"event.stopPropagation()"}})]),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"scale","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_c('strong',[_v("Emoji header")]),_v(" 🚀")]),_v(" "),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_c('div',[_v("\n This is a long content...\n ")])]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Hover")])]),_v(" "),_c('br'),_v(" "),_c('br'),_v(" "),_c('h4',{staticClass:"no-index",attrs:{"id":"wrap-text"}},[_c('span',{staticClass:"anchor",attrs:{"id":"wrap-text"}}),_v("Wrap Text"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#wrap-text","onclick":"event.stopPropagation()"}})]),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_v("false")]),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Nice!")]),_v("What do you say")])])],1)]),_v(" "),_c('p',[_c('strong',[_v("Using trigger for Popover:")]),_c('br')]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_v("More about "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pop:trigger_id\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(">")]),_v(".\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pop:trigger_id\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This popover is triggered by a trigger\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v("This is the same "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pop:trigger_id\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(">")]),_v(" as last one.\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("More about "),_c('trigger',{attrs:{"for":"pop:trigger_id"}},[_v("trigger")]),_v(".\n"),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"id":"pop:trigger_id","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("This popover is triggered by a trigger")])]),_v(" "),_c('br'),_v("\nThis is the same "),_c('trigger',{attrs:{"for":"pop:trigger_id"}},[_v("trigger")]),_v(" as last one.")],1)])],1)]),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("More about triggers")])]},proxy:true}])},[_v(" "),_c('div',[_c('p',[_c('strong',[_c('strong',[_v("Triggers")])])]),_v(" "),_c('p',[_v("Trigger provides more flexibility in triggering contextual overlay via Tooltip, Popover or Modal.")]),_v(" "),_c('p',[_v("You could embed a Trigger within the text, and define the Tooltip, Popover or Modal at a separate location, which allows for a cleaner authoring flow.")]),_v(" "),_c('p',[_v("Specify the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(" attribute on the Tooltip, Popover or Modal component, and use the same "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(" in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("for")]),_v(" attribute of the Trigger to allow the Trigger to invoke the specific overlay elements.\nAdditionally, multiple Triggers could share the same overlay by providing them with the same "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(".\n"),_c('br')]),_v(" "),_c('p',[_c('strong',[_v("Trigger's "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("trigger")]),_v(" attribute (which defaults to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")]),_v(") is independent of the target's.")])]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("trigger")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")])]),_v(" "),_c('td',[_v("How the overlay view is triggered."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("click")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("focus")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("for")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("The id for the overlay view to be shown.")])]),_v(" "),_c('tr',[_c('td',[_v("placement")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("auto")])]),_v(" "),_c('td',[_v("How to position the Popover or Tooltip."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("auto")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("top")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("left")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("right")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bottom")]),_v(".")])])])])])])]),_c('p'),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("trigger")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")])]),_v(" "),_c('td',[_v("How the Popover is triggered."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("click")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("focus")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("header")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Popover header, supports inline markdown text.")])]),_v(" "),_c('tr',[_c('td',[_v("content")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Popover content, supports inline markdown text.")])]),_v(" "),_c('tr',[_c('td',[_v("placement")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("top")])]),_v(" "),_c('td',[_v("How to position the Popover."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("top")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("left")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("right")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bottom")]),_v(".")])])])])]),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("Hover over the "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pop:context-target\"")]),_v(">")]),_v("keyword"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(">")]),_v(" to see the popover.\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pop:context-target\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Popover header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"content\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("description :+1:\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("Hover over the "),_c('trigger',{attrs:{"for":"pop:context-target"}},[_v("keyword")]),_v(" to see the popover.")],1),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"id":"pop:context-target","placement":"top","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_v("Popover header")]),_v(" "),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_c('div',[_c('p',[_v("description 👍")])])])])])],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"questions-and-quizzes"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"questions-and-quizzes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"questions-and-quizzes"}}),_c('strong',[_v("Questions and Quizzes")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#questions-and-quizzes","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"questions-and-quizzes-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"questions-and-quizzes-2"}}),_v("Questions and Quizzes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#questions-and-quizzes-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',{staticClass:"mt-3"},[_v("Question and quiz components provide an easy way to test readers on the relevant content topic in the page.")]),_v(" "),_c('h4',{attrs:{"id":"introduction"}},[_c('span',{staticClass:"anchor",attrs:{"id":"introduction"}}),_v("Introduction"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#introduction","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Question components ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<question>")]),_v(") can be one of the following types: "),_c('strong',[_v("MCQ")]),_v(", "),_c('strong',[_v("Checkbox")]),_v(" or "),_c('strong',[_v("Text")]),_v(".")]),_v(" "),_c('p',[_v("In all cases, content directly inserted in between "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<question>...</question>")]),_v(" will be inserted into the "),_c('strong',[_v("question body")]),_v(".")]),_v(" "),_c('p',[_v("You can also insert markdown into the "),_c('strong',[_v("header")]),_v(" or "),_c('strong',[_v("hint box")]),_v(", by using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("header")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hint")]),_v(" attributes respectively. Click the hint button below to see how the hint box turns out!")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Header and Hint syntax")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html","heading":"Header and Hint syntax"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Insert markdown into the header and hint using the respective attributes -->")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"checkbox\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which of the following is correct?\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hint")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Think out of the box! :fas-box:\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Anything you place directly under a question not in a slot is inserted into the question body! -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("Adapted from [Daily Mail](https://www.dailymail.co.uk/femail/article-4702868/Can-pass-intelligence-test.html)\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Several hidden checkbox q-option components explained later -->")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")])])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Think out of the box! "),_c('span',{staticClass:"fas fa-box",attrs:{"aria-hidden":"true"}})])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Which of the following is correct?")])]},proxy:true}])},[_v(" "),_c('pic',{staticClass:"d-block mx-auto",attrs:{"src":"/images/math-question.jpg","alt":"math question image","height":"200"}},[_c('p',[_c('small',[_v("Adapted from "),_c('a',{attrs:{"href":"https://www.dailymail.co.uk/femail/article-4702868/Can-pass-intelligence-test.html"}},[_v("Daily Mail")])])])]),_c('p'),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Multiply the numbers on the left together and add the leftmost number!")])]},proxy:true}])},[_v("\n 96\n ")]),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Under normal circumstances, this would be correct.")])]},proxy:true}])},[_v("\n 19\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Simply add the running sum of the results as well!")])]},proxy:true}])},[_v("\n 40\n ")]),_v(" "),_c('q-option',[_v("\n 811\n ")])],1)],1)],1)]),_v(" "),_c('p',[_v("If you require more expressive formatting for your header or hint markup, you can use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<div slot=\"header\">")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<div slot=\"hint\">")]),_v(" slots. Expand the panel below to see an example!")]),_v(" "),_c('panel',{attrs:{"type":"minimal"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Header and Hint example "),_c('strong',[_v("with slots")])])]},proxy:true}])},[_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Headers and Hints using slots")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html","heading":"Headers and Hints using slots"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"checkbox\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which of the following is true?\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hint")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Think out of the box! :fas-box:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Header slot -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"header\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("Which of the following is correct?"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("Challenge: Try to get all the answers on your first try! ⭐️ ⭐️"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/images/math-question.jpg\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"math question image\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("height")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"200\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"d-block mx-auto\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("Adapted from "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://www.dailymail.co.uk/femail/article-4702868/Can-pass-intelligence-test.html\"")]),_v(">")]),_v("Daily Mail"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Several hidden checkbox q-option components explained later -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Hint slot -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("Think out of the box! "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("aria-hidden")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"true\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fas fa-box\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("Need another hint? "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Two of the answers are correct!\"")]),_v(">")]),_v("Hover over me!"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(">")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("aria-hidden")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"true\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fas fa-mouse-pointer\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")])])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('p',[_v("Which of the following is correct?")]),_v(" "),_c('p',[_v("Challenge: Try to get all the answers on your first try! ⭐️ ⭐️")])])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_c('p',[_v("Think out of the box! "),_c('span',{staticClass:"fas fa-box",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('p',[_v("Need another hint? "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("Two of the answers are correct!")]),_v("Hover over me!")]),_v(" "),_c('span',{staticClass:"fas fa-mouse-pointer",attrs:{"aria-hidden":"true"}})])])]},proxy:true}])},[_v(" "),_c('pic',{staticClass:"d-block mx-auto",attrs:{"src":"/images/math-question.jpg","alt":"math question image","height":"200"}},[_c('p',[_c('small',[_v("Adapted from "),_c('a',{attrs:{"href":"https://www.dailymail.co.uk/femail/article-4702868/Can-pass-intelligence-test.html"}},[_v("Daily Mail")])])])]),_c('p'),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Multiply the numbers on the left together and add the leftmost number!")])]},proxy:true}])},[_v("\n 96\n ")]),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Under normal circumstances, this would be correct.")])]},proxy:true}])},[_v("\n 19\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Simply add the running sum of the results as well!")])]},proxy:true}])},[_v("\n 40\n ")]),_v(" "),_c('q-option',[_v("\n 811\n ")])],1)],1)],1)])]),_v(" "),_c('box',{staticClass:"mt-3",attrs:{"type":"tip","seamless":""}},[_c('p',[_v("Placing the question into the header is entirely optional. You may also wish to include the question directly in the question body, omitting the header entirely.")])]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options and Slots common to all question types")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("type")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("The type of question. Supports "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mcq")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("checkbox")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("text")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("header"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("The markup to insert into the question header. The header is omitted if this is not provided.")])]),_v(" "),_c('tr',[_c('td',[_v("hint"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("The content to display in the hint box.")])])])])]),_c('h4',{staticClass:"mt-4 mb-3",attrs:{"id":"mcq-and-checkbox-questions"}},[_c('span',{staticClass:"anchor",attrs:{"id":"mcq-and-checkbox-questions"}}),_v("MCQ and Checkbox Questions"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#mcq-and-checkbox-questions","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("MCQ and checkbox questions are indicated with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"mcq\"")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"checkbox\"")]),_v(" attribute.")]),_v(" "),_c('p',[_v("In both instances, you can include the possible answers using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<q-option>")]),_v(" component, placed anywhere inside the "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("if you wish, you could place it in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("header")]),_v(" mentioned above as well!")]),_v("question")]),_v(". To indicate the correct option(s), add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<q-option correct>")]),_v(" attribute.")]),_v(" "),_c('p',[_v("Optionally, you can provide the reason for the particular option using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<q-option reason=\"...\">")]),_v(" attribute, or the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<div slot=\"reason\">")]),_v(" slot for more expressive formatting, similar to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hint")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("header")]),_v(" options and slots.")]),_v(" "),_c('p',[_c('strong',[_v("MCQ Questions")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"mcq\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which of these **contradicts** the heuristics recommended when creating test cases with multiple inputs?\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Insert the reason for the option using the reason attribute -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This is **correct**. We need to figure out if a positive test case works!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" It is ok to combine valid values for different inputs.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" No more than one invalid test input should be in a given test case.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Use the 'correct' attribute to indicate an option as correct. -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("correct")]),_v(">")]),_v("\n")]),_c('span',[_v(" All invalid test inputs must be tested together.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Optionally, you may use a reason slot instead of a reason attribute. -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"reason\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n")]),_c('span',[_v(" correctly by the SUT.\n")]),_c('span',[_v(" This is because most SUTs return an error message upon encountering the first invalid input.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" How do you figure out which inputs are wrong? (or correct)\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"mcq"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Which of these "),_c('strong',[_v("contradicts")]),_v(" the heuristics recommended when creating test cases with multiple inputs?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_v("\n How do you figure out which inputs are wrong? (or correct)\n ")])]},proxy:true}])},[_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("This is "),_c('strong',[_v("correct")]),_v(". We need to figure out if a positive test case works!")])]},proxy:true}])},[_v("\n Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n ")]),_v(" "),_c('q-option',[_v("\n It is ok to combine valid values for different inputs.\n ")]),_v(" "),_c('q-option',[_v("\n No more than one invalid test input should be in a given test case.\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('div',[_v("\n If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n correctly by the SUT.\n This is because most SUTs return an error message upon encountering the first invalid input.\n ")])]},proxy:true}])},[_v("\n All invalid test inputs must be tested together.\n \n ")])],1)],1)],1)]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_v("MCQ questions can have multiple correct options!")]),_v(" "),_c('p',[_c('strong',[_v("Checkbox Questions")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"checkbox\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hint")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Use your calculator! :fas-calculator:\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" ##### Which of the following is true?\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" 1 + 1 = 11\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Division by zero is **undefined**!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" 1 / 0 = infinity\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("correct")]),_v(">")]),_v("\n")]),_c('span',[_v(" 11 / 11 = 1\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Use your calculator! "),_c('span',{staticClass:"fas fa-calculator",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v(" "),_c('h5',{attrs:{"id":"which-of-the-following-is-true"}},[_c('span',{staticClass:"anchor",attrs:{"id":"which-of-the-following-is-true"}}),_v("Which of the following is true?"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#which-of-the-following-is-true","onclick":"event.stopPropagation()"}})]),_v(" "),_c('br'),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum")])]},proxy:true}])},[_v("\n 1 + 1 = 11\n ")]),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Division by zero is "),_c('strong',[_v("undefined")]),_v("!")])]},proxy:true}])},[_v("\n 1 / 0 = infinity\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""}},[_v("\n 11 / 11 = 1\n ")])],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("q-option")]),_v(" Options and Slots")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("correct")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether this option (placed under either a MCQ or checkbox question) is correct. You may have multiple correct answers in either case.")])]),_v(" "),_c('tr',[_c('td',[_v("reason"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("The explanation markup to display for the option once the answer is checked.")])])])])]),_c('h4',{staticClass:"mt-4 mb-3",attrs:{"id":"text-questions"}},[_c('span',{staticClass:"anchor",attrs:{"id":"text-questions"}}),_v("Text Questions"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#text-questions","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Text questions are specified with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"text\"")]),_v(" attribute.")]),_v(" "),_c('p',[_v("Unlike MCQ and checkbox questions, answer checking is performed by providing keywords to check for in the user's answer through the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("keywords")]),_v(" attribute.\nIf no keywords are provided, the answer will always be marked as correct when placed in quizzes.")]),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_c('p',[_v("Keywords are validated by simply looking for the keyword as a pattern in the user's answer!\nThis works well for some\n"),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_v("When does validation work?")]),_v("cases\n"),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_c('span',[_v("\nWhen the keywords specified are rather long (eg. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("requirements")]),_v("), it reduces the chance that this keyword can be mistakenly validated.\n"),_c('br'),_c('br'),_v("\nIn contrast, something short and common like "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("take")]),_v(" which can easily be part of another word (eg. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mis-take-nly")]),_v(") would be mistakenly validated.\n")])])]),_v("\nand not others.")])]),_v(" "),_c('p',[_v("You can provide your answer in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("answer")]),_v(" attribute, or similarly, the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<div slot=\"answer\">")]),_v(" slot for more expressive formatting.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which country did the Hawaiian pizza originate from?\"")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hawaii\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("threshold")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"0.5\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("answer")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"It originated from Hawaii!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" Watch some pizza commercials! :tv:\n")]),_c('span',[_v("\n")]),_c('span',[_v(" :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza:\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"text","keywords":"hawaii","threshold":"0.5"},scopedSlots:_u([{key:"answer",fn:function(){return [_c('p',[_v("It originated from Hawaii!")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Which country did the Hawaiian pizza originate from?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_c('p',[_v("Watch some pizza commercials! 📺")]),_v(" "),_c('p',[_v("🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕")])])]},proxy:true}])})],1)],1)]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_c('p',[_v("Since the validation is imperfect, the minimum proportion of keywords that need to be matched can also be changed using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("threshold")]),_v(" attribute.")]),_v(" "),_c('p',[_v("If you don't want to validate the answer at all, you may also omit the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("keywords")]),_v(" attribute entirely. Doing so also always marks the question as correct inside "),_c('a',{attrs:{"href":"#quizzes"}},[_v("quizzes")]),_v(".")])]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Text Question specific Options and Slots")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("keywords")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Comma delimited string of keywords or phrases to match the user's answer against.")])]),_v(" "),_c('tr',[_c('td',[_v("threshold")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Number")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0.5")])]),_v(" "),_c('td',[_v("Minimum proportion of keywords that have to be matched in the user's answer for the answer to be marked as correct.")])]),_v(" "),_c('tr',[_c('td',[_v("answer"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("The answer or explanation to display when the user clicks the check button.")])])])])]),_c('box',{attrs:{"type":"important"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Deprecation notes")])]},proxy:true}])},[_v(" "),_c('ul',[_c('li',[_v("The old "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("has-input")]),_v(" attributes translate to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"text\"")]),_v(", but will be deprecated in a future version.")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<question>")]),_v("s without a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type")]),_v(" (or an unrecognised one) will always be marked correct when placed in quizzes.")])])]),_v(" "),_c('h4',{attrs:{"id":"quizzes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"quizzes"}}),_v("Quizzes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#quizzes","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can also build a series of questions out of multiple "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<question>")]),_v(" components.")]),_v(" "),_c('p',[_v("Simply place the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<question>")]),_v(" components you want to include into the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<quiz>")]),_v(" component! No extra configuration is needed.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("quiz")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"mcq\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"checkbox\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("quiz")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('quiz',[_c('question',{attrs:{"type":"mcq"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Which of these "),_c('strong',[_v("contradicts")]),_v(" the heuristics recommended when creating test cases with multiple inputs?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_v("\n How do you figure out which inputs are wrong? (or correct)\n ")])]},proxy:true}])},[_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("This is "),_c('strong',[_v("correct")]),_v(". We need to figure out if a positive test case works!")])]},proxy:true}])},[_v("\n Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n ")]),_v(" "),_c('q-option',[_v("\n It is ok to combine valid values for different inputs.\n ")]),_v(" "),_c('q-option',[_v("\n No more than one invalid test input should be in a given test case.\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('div',[_v("\n If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n correctly by the SUT.\n This is because most SUTs return an error message upon encountering the first invalid input.\n ")])]},proxy:true}])},[_v("\n All invalid test inputs must be tested together.\n \n ")])],1),_v(" "),_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Use your calculator! "),_c('span',{staticClass:"fas fa-calculator",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v(" "),_c('h5',{attrs:{"id":"which-of-the-following-is-true-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"which-of-the-following-is-true-2"}}),_v("Which of the following is true?"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#which-of-the-following-is-true-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('br'),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum")])]},proxy:true}])},[_v("\n 1 + 1 = 11\n ")]),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Division by zero is "),_c('strong',[_v("undefined")]),_v("!")])]},proxy:true}])},[_v("\n 1 / 0 = infinity\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""}},[_v("\n 11 / 11 = 1\n ")])],1),_v(" "),_c('question',{attrs:{"type":"text","keywords":"hawaii","threshold":"0.5"},scopedSlots:_u([{key:"answer",fn:function(){return [_c('p',[_v("It originated from Hawaii!")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Which country did the Hawaiian pizza originate from?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_c('p',[_v("Watch some pizza commercials! 📺")]),_v(" "),_c('p',[_v("🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕")])])]},proxy:true}])})],1)],1)],1)]),_v(" "),_c('br'),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Quiz Options and Slots")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("intro")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Quiz intro markup above the question count.")])]),_v(" "),_c('tr',[_c('td',[_v("intro")]),_v(" "),_c('td',[_v("Slot")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Click start to begin")])]),_v(" "),_c('td',[_v("Quiz intro markup. Overrides the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("intro")]),_v(" attribute if both are present.")])])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("MCQ and Checkbox questions")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"MCQ and Checkbox questions","class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- use type=\"checkbox\" for checkbox questions -->")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"mcq\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which of these **contradicts** the heuristics recommended when creating test cases with multiple inputs?\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Insert the reason for the option using the reason attribute -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This is **correct**. We need to figure out if a positive test case works!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" It is ok to combine valid values for different inputs.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" No more than one invalid test input should be in a given test case.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Use the 'correct' attribute to indicate an option as correct. -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("correct")]),_v(">")]),_v("\n")]),_c('span',[_v(" All invalid test inputs must be tested together.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Optionally, you may use a reason slot instead of a reason attribute. -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"reason\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n")]),_c('span',[_v(" correctly by the SUT.\n")]),_c('span',[_v(" This is because most SUTs return an error message upon encountering the first invalid input.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" How do you figure out which inputs are wrong? (or correct)\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")])])])])]),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Text questions")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Text questions","class":"hljs html"}},[_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which country did the Hawaiian pizza originate from?\"")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hawaii\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("threshold")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"0.5\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("answer")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"It originated from Hawaii!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" Watch some pizza commercials! :tv:\n")]),_c('span',[_v("\n")]),_c('span',[_v(" :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza:\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")])])])])]),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Quiz")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Quiz","class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("quiz")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"mcq\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"checkbox\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("quiz")]),_v(">")]),_v("\n")])])])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('div',[_c('quiz',[_c('question',{attrs:{"type":"mcq"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Which of these "),_c('strong',[_v("contradicts")]),_v(" the heuristics recommended when creating test cases with multiple inputs?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_v("\n How do you figure out which inputs are wrong? (or correct)\n ")])]},proxy:true}])},[_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("This is "),_c('strong',[_v("correct")]),_v(". We need to figure out if a positive test case works!")])]},proxy:true}])},[_v("\n Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n ")]),_v(" "),_c('q-option',[_v("\n It is ok to combine valid values for different inputs.\n ")]),_v(" "),_c('q-option',[_v("\n No more than one invalid test input should be in a given test case.\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('div',[_v("\n If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n correctly by the SUT.\n This is because most SUTs return an error message upon encountering the first invalid input.\n ")])]},proxy:true}])},[_v("\n All invalid test inputs must be tested together.\n \n ")])],1),_v(" "),_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Use your calculator! "),_c('span',{staticClass:"fas fa-calculator",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v("\n\n ##### Which of the following is true?\n\n "),_c('br'),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum")])]},proxy:true}])},[_v("\n 1 + 1 = 11\n ")]),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Division by zero is "),_c('strong',[_v("undefined")]),_v("!")])]},proxy:true}])},[_v("\n 1 / 0 = infinity\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""}},[_v("\n 11 / 11 = 1\n ")])],1),_v(" "),_c('question',{attrs:{"type":"text","keywords":"hawaii","threshold":"0.5"},scopedSlots:_u([{key:"answer",fn:function(){return [_c('p',[_v("It originated from Hawaii!")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Which country did the Hawaiian pizza originate from?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_v("\n\n Watch some pizza commercials! :tv:\n\n :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza:\n ")])]},proxy:true}])})],1)],1)])],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"search-bars"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"search-bars"}},[_c('span',{staticClass:"anchor",attrs:{"id":"search-bars"}}),_c('strong',[_v("Search Bars")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#search-bars","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"search-bars-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"search-bars-2"}}),_v("Search Bars"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#search-bars-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("searchbar")]),_v(" component allows users to search all headings within any page on the site.")]),_v(" "),_c('span',{attrs:{"id":"body"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search (Right-aligned dropdown)\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(">")]),_v("\n")])])]),_c('p',[_v("To use the searchbar within a navbar, add the following markup to your file. The searchbar can be positioned using the slot attribute for the list. The following markup adds a searchbar to the right side of the navbar with appropriate styling.")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Enter a search term (eg. 'search bar') to see the search result dropdown.")]),_v(" "),_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback}}),_v(" "),_c('br'),_v(" "),_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search (Right-aligned dropdown)","on-hit":searchCallback,"menu-align-right":""}})],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("algolia")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether the searchbar should be connected to "),_c('a',{attrs:{"href":"/userGuide/usingPlugins.html#algolia-enabling-algolia-docsearch"}},[_v("Algolia DocSearch")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("data")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Array")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The local data source for suggestions. Expected to be a primitive array. To use MarkBind's search functionality, set this value to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"searchData\"")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("menu-align-right")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether the search bar's dropdown list will be right-aligned.")])]),_v(" "),_c('tr',[_c('td',[_v("on-hit")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Function")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("A callback function when you click or hit return on an item. To use MarkBind's search functionality, set this value to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"searchCallback\"")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("placeholder")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("The placeholder text shown when no keywords are entered in the search bar.")])])])])]),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Note: If you are using MarkBind's search functionality, then "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("enableSearch")]),_v(" "),_c('strong',[_v("must be set to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("true")]),_v(" in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")])]),_v(".")]),_v(" "),_c('p',[_v("See: "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#enable-search"}},[_v("User Guide: Site Configuration → enableSearch")]),_v(".")])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" Related topic: "),_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("User Guide: Making the Site Searchable")]),_v(".")])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" Related topic: "),_c('a',{attrs:{"href":"/userGuide/usingPlugins.html#algolia-enabling-algolia-docsearch"}},[_v("User Guide: Using Plugins → Algolia: Enabling Algolia DocSearch")]),_v(".")])]),_v(" "),_c('p')],1),_v(" "),_c('p'),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(">")]),_v("\n")])])]),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback}})],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"site-navigation-menus"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"site-navigation-menus"}},[_c('span',{staticClass:"anchor",attrs:{"id":"site-navigation-menus"}}),_c('strong',[_v("Site Navigation Menus")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#site-navigation-menus","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"site-navigation-menus-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"site-navigation-menus-2"}}),_v("Site Navigation Menus"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#site-navigation-menus-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{attrs:{"id":"content"}},[_c('p',[_c('strong',[_v("A "),_c('em',[_v("Site Navigation Menu")]),_v(" ("),_c('mark',[_c('em',[_v("siteNav")]),_v(" for short")]),_v(") can be used to show a road map of the main pages of your site.")])]),_v(" "),_c('p',[_v("Steps to add a siteNav:")]),_v(" "),_c('ol',[_c('li',[_v("Format your siteNav as an unordered Markdown list")]),_v(" "),_c('li',[_v("Include it under a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<site-nav>")]),_v(" element.")]),_v(" "),_c('li',[_v("(Optional) To make siteNav accessible on smaller screens, you can use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<site-nav-button />")]),_v(" component in the "),_c('a',{attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("navbar")]),_v(".")])]),_v(" "),_c('div',{attrs:{"id":"short"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs"}},[_c('span',[_v("<site-nav>\n")]),_c('span',[_v("* [**Getting Started**](/userGuide/gettingStarted.html)\n")]),_c('span',[_v("* **Authoring Contents** :expanded:\n")]),_c('span',[_v(" * [Overview](/userGuide/authoringContents.html)\n")]),_c('span',[_v(" * [Adding Pages](/userGuide/addingPages.html)\n")]),_c('span',[_v(" * [MarkBind Syntax Overview](/userGuide/markBindSyntaxOverview.html)\n")]),_c('span',[_v(" * [Formatting Contents](/userGuide/formattingContents.html)\n")]),_c('span',[_v(" * [Using Components](/userGuide/usingComponents.html)\n")]),_c('span',[_v("</site-nav>\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")])])])])])])],1)],1)],1)])]),_v(" "),_c('p',[_v("MarkBind has styles nested lists with additional padding and smaller text sizes up to "),_c('strong',[_v("4")]),_v(" nesting levels.\nBeyond that, you'd have to include your own styles.")]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Expanding menu items by default")])])]),_v(" "),_c('p',[_v("You can "),_c('strong',[_v("append the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(":expanded:")]),_v(" to a "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("a menu item with sub menu-items")]),_v("parent menu item")]),_v(" to make it expand by default.")]),_v(" In the example above, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("* Docs :expanded:")]),_v(" will make the menu item "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Docs")]),_v(" expand by default.")]),_v(" "),_c('p',[_v("A parent menu item that is also linked will not be collapsible "),_c('span',{staticClass:"dimmed"},[_v("e.g., the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Search")]),_v(" menu item in the above example")]),_v(".")])]),_v(" "),_c('div',{attrs:{"id":"examples"}})])]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"tables"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"tables"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tables"}}),_c('strong',[_v("Tables")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tables","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"tables-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tables-2"}}),_v("Tables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tables-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("Animal | Trainable?| Price | Remarks\n")]),_c('span',[_v(":----- | :-------: | ----: | ----\n")]),_c('span',[_v("Ants | no | 5 |\n")]),_c('span',[_v("Bees | no | 20 |\n")]),_c('span',[_v("Cats|yes|100|\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',{staticStyle:{"text-align":"left"}},[_v("Animal")]),_v(" "),_c('th',{staticStyle:{"text-align":"center"}},[_v("Trainable?")]),_v(" "),_c('th',{staticStyle:{"text-align":"right"}},[_v("Price")]),_v(" "),_c('th',[_v("Remarks")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Ants")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("no")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("5")]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Bees")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("no")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("20")]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Cats")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("yes")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("100")]),_v(" "),_c('td')])])])])])],1)]),_v(" "),_c('ul',[_c('li',[_v("Colons ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(":")]),_v(") in the 2nd line are optional and they indicates whether to left/center/right-align the values in that column.")]),_v(" "),_c('li',[_v("There is no need to align pipe symbols to be on a vertical line; it's just for aesthetic purposes only.")])]),_v(" "),_c('p',[_c('small',[_v("More info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/extended-syntax#tables"}},[_v("https://www.markdownguide.org/extended-syntax#tables")])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("Animal | Trainable?| Price | Remarks\n")]),_c('span',[_v(":----- | :-------: | ----: | ----\n")]),_c('span',[_v("Ants | no | 5 |\n")]),_c('span',[_v("Bees | no | 20 |\n")]),_c('span',[_v("Cats|yes|100|\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',{staticStyle:{"text-align":"left"}},[_v("Animal")]),_v(" "),_c('th',{staticStyle:{"text-align":"center"}},[_v("Trainable?")]),_v(" "),_c('th',{staticStyle:{"text-align":"right"}},[_v("Price")]),_v(" "),_c('th',[_v("Remarks")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Ants")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("no")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("5")]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Bees")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("no")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("20")]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Cats")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("yes")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("100")]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}})])])])])]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}}),_v(" "),_c('td',{staticStyle:{"text-align":"right"}}),_v(" "),_c('td')])]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"tabs"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"tabs"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tabs"}}),_c('strong',[_v("Tabs")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tabs","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"tabs-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tabs-2"}}),_v("Tabs"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tabs-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tabs")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"First tab\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Disabled second tab :x:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("disabled")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tab not printed\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"d-print-none\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" This tab will not be printed.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Third tab group :milky_way:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Stars :star:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Some stuff about stars ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Disabled Moon :new_moon:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("disabled")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Disabled fourth tab group\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("disabled")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hidden tab\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tabs")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('tabs',[_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("First tab")]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n ")]),_v(" "),_c('tab',{attrs:{"disabled":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Disabled second tab ❌")]},proxy:true}])}),_v(" "),_c('tab',{staticClass:"d-print-none",scopedSlots:_u([{key:"header",fn:function(){return [_v("Tab not printed")]},proxy:true}])},[_v("\n This tab will not be printed.\n ")]),_v(" "),_c('tab-group',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Third tab group 🌌")]},proxy:true}])},[_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Stars ⭐️")]},proxy:true}])},[_v("\n Some stuff about stars ...\n ")]),_v(" "),_c('tab',{attrs:{"disabled":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Disabled Moon 🌑")]},proxy:true}])})],1),_v(" "),_c('tab-group',{attrs:{"disabled":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Disabled fourth tab group")]},proxy:true}])},[_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Hidden tab")]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n ")])],1)],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tabs")]),_v(":")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("active")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Number")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0")])]),_v(" "),_c('td',[_v("Active Tab index (0-based)")])])])])]),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tab")]),_v(":")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("header")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Tab title.")])]),_v(" "),_c('tr',[_c('td',[_v("disabled")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether Tab is clickable and can be activated.")])])])])]),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tab-group")]),_v(":")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("header")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Tab Group title.")])]),_v(" "),_c('tr',[_c('td',[_v("disabled")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether Tab Group is clickable and can be activated.")])])])])]),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("Tabs, tab group and individual tab can be omitted during printing by adding bootstrap's display property "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("class=\"d-print-none\"")]),_v(" to the respective components.")])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tabs")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"First tab\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Content of the first tab\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Second tab\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Contents of the second tab\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Third tab group :tv:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Stars :star:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Some stuff about stars ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Moon\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Some stuff about the moon ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tabs")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('tabs',[_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("First tab")]},proxy:true}])},[_v("\n Content of the first tab\n ")]),_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Second tab")]},proxy:true}])},[_v("\n Contents of the second tab\n ")]),_v(" "),_c('tab-group',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Third tab group 📺")]},proxy:true}])},[_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Stars ⭐️")]},proxy:true}])},[_v("\n Some stuff about stars ...\n ")]),_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Moon")]},proxy:true}])},[_v("\n Some stuff about the moon ...\n ")])],1)],1)],1)],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"tags"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"tags"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tags"}}),_c('strong',[_v("Tags")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tags","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('div',[_c('h3',{attrs:{"id":"plugin-tags"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugin-tags"}}),_v("Plugin: Tags"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-tags","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("With this plugin you can use tags to selectively filter content when building a site.")]),_v(" "),_c('h4',{attrs:{"id":"toggling-alternative-contents"}},[_c('span',{staticClass:"anchor",attrs:{"id":"toggling-alternative-contents"}}),_v("Toggling alternative contents"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#toggling-alternative-contents","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Tags are specified by the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tags")]),_v(" attribute, "),_c('strong',[_v("and can be attached to any HTML element")]),_v(". During rendering, only elements that match tags specified in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" files will be rendered.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Attaching tags to elements:")],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("# Print 'Hello world'\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v(">")]),_v("System.out.println(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C#\"")]),_v(">")]),_v("Console.WriteLine(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--python\"")]),_v(">")]),_v("print(\"Hello world\")"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")])])]),_c('p',[_v("You need to specify the tags to include in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pluginsContext")]),_v(", under "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tags")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"plugins\"")]),_v(" : [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"filterTags\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pluginsContext\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"filterTags\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"tags\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v("]\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])]),_c('p',[_v("All other tagged elements will be filtered out. In this case, only the element with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--java")]),_v(" tag will be rendered. This is helpful when creating multiple versions of a page without having to maintain separate copies.")])]),_v(" "),_c('p',[_v("If the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("filterTags")]),_v(" plugin is not enabled in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(", all tagged elements will be rendered.")]),_v(" "),_c('p',[_c('strong',[_v("You can also use multiple tags in a single HTML element. Specify each tag in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tags")]),_v(" attribute")]),_v(" separated by a space. An element will be rendered if "),_c('strong',[_v("any of the tags")]),_v(" matches the one in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(".")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Attaching multiple tags to an element:")],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("# For loops\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java language--C#\"")]),_v(">")]),_v("for (int i = 0; i < 5; i++) { ... }"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")])])]),_c('p',[_v("As long as the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--java")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--C#")]),_v(" tag is specified, the code snippet will be rendered.")])]),_v(" "),_c('p',[_v("Alternatively, you can specify tags to render for a page in the front matter.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Specifying tags in front matter:")],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: \"Hello World\"\n")]),_c('span',[_v(" tags: [\"language--java\"]\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java advanced\"")]),_v(">")]),_v("System.out.println(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C# basic\"")]),_v(">")]),_v("Console.WriteLine(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")])])]),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: \"Hello World\"\n")]),_c('span',[_v(" tags: [\"language--java\"]\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_v("Tags in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" will be merged with the ones in the front matter, and are processed after front matter tags. See "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#hiding-tags"}},[_v("Hiding Tags")]),_v(" for more information.")]),_v(" "),_c('h4',{attrs:{"id":"advanced-tagging-tips"}},[_c('span',{staticClass:"anchor",attrs:{"id":"advanced-tagging-tips"}}),_v("Advanced Tagging Tips"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#advanced-tagging-tips","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can use a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("*")]),_v(" in a tag name to match elements more generally. A "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("*")]),_v(" in a tag will match any number of characters at its position.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Using general tags:")],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: \"Hello World\"\n")]),_c('span',[_v(" tags: [\"language--*\"]\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v(">")]),_v("System.out.println(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C#\"")]),_v(">")]),_v("Console.WriteLine(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--python\"")]),_v(">")]),_v("print(\"Hello world\")"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")])])]),_c('p',[_v("All 3 "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<p>")]),_v("s will be shown.")])]),_v(" "),_c('h4',{attrs:{"id":"hiding-tags"}},[_c('span',{staticClass:"anchor",attrs:{"id":"hiding-tags"}}),_v("Hiding Tags"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#hiding-tags","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Using "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v(" at the start of a tag hides all tags matching the expression. This is helpful for disabling a group of tags and enabling a particular tag.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Using general tags:")],1),_v(" "),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading inline-markdown-heading"},[_c('span',[_c('a',{attrs:{"href":"http://index.md"}},[_v("index.md")])])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"index.md","class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: \"Hello World\"\n")]),_c('span',[_v(" tags: [\"language--java\"]\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v(">")]),_v("System.out.println(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C#\"")]),_v(">")]),_v("Console.WriteLine(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--python\"")]),_v(">")]),_v("print(\"Hello world\")"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")])])])])]),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"plugins\"")]),_v(" : [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"filterTags\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pluginsContext\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"filterTags\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"tags\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"-language--*\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C#\"")]),_v("]\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])])])]),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--java")]),_v(" is overridden by "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-language--*")]),_v(", so only "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--C#")]),_v(" is shown.")])]),_v(" "),_c('p',[_v("This only works because tags are processed left to right, so all "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--*")]),_v(" tags are hidden before "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--C#")]),_v(". Tags in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" are processed after tags in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<frontmatter>")]),_v(".")]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("# Print 'Hello world'\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v(">")]),_v("System.out.println(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C#\"")]),_v(">")]),_v("Console.WriteLine(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--python\"")]),_v(">")]),_v("print(\"Hello world\")"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")])])]),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"plugins\"")]),_v(" : [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"filterTags\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pluginsContext\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"filterTags\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"tags\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v("]\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java advanced\"")]),_v(">")]),_v("System.out.println(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C# basic\"")]),_v(">")]),_v("Console.WriteLine(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")])])]),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: \"Hello World\"\n")]),_c('span',[_v(" tags: [\"language--java\"]\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")])])])])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"text-styles"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"text-styles"}},[_c('span',{staticClass:"anchor",attrs:{"id":"text-styles"}}),_c('strong',[_v("Text Styles")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#text-styles","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"text-styles-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"text-styles-2"}}),_v("Text Styles"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#text-styles-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Markdown text styles:")]),_v(" "),_c('span',{attrs:{"id":"main-example-markdown"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**Bold**")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_Italic_")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__"),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_Bold and Italic"),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__"),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_, `Inline Code`")])])])]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('strong',[_v("Bold")]),_v(", "),_c('em',[_v("Italic")]),_v(", "),_c('em',[_c('strong',[_v("Bold and Italic")])]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Inline Code")])])])],1)])]),_v(" "),_c('p',[_v("Additional syntax from GFMD:")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("~~Strike through~~\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('s',[_v("Strike through")])])])],1)]),_v(" "),_c('p',[_v("Syntax added by MarkBind:")]),_v(" "),_c('span',{attrs:{"id":"main-example-markbind"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("****")]),_v("Super Bold"),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("****")]),_v(", !!Underline!!, ==Highlight==, %%Dim%%, ++Large++, --Small--, Super^script^, Sub~script~\n")]),_c('span',[_v("->Center-align<-\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('strong',[_c('strong',[_v("Super Bold")])]),_v(", "),_c('span',{staticClass:"underline"},[_v("Underline")]),_v(", "),_c('mark',[_v("Highlight")]),_v(", "),_c('span',{staticClass:"dimmed"},[_v("Dim")]),_v(", "),_c('span',{staticClass:"large"},[_v("Large")]),_v(", "),_c('span',{staticClass:"small"},[_v("Small")]),_v(", Super"),_c('sup',[_v("script")]),_v(", Sub"),_c('sub',[_v("script")])]),_c('div',{staticClass:"text-center"},[_v("Center-align")]),_c('p')])],1)])]),_v(" "),_c('p',[_c('small',[_v("Alternative syntax: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/basic-syntax#emphasis"}},[_v("https://www.markdownguide.org/basic-syntax#emphasis")])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**Bold**")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_Italic_")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__"),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_Bold and Italic"),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__"),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_, `Inline Code`")])])])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("~~Strike through~~, "),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("****")]),_v("Super Bold"),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("****")]),_v(", !!Underline!!, ==Highlight==, %%Dim%%, ++Large++, --Small--, Super^script^, Sub~script~")])])])]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_c('strong',[_v("Bold")]),_v(", "),_c('em',[_v("Italic")]),_v(", "),_c('em',[_c('strong',[_v("Bold and Italic")])]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Inline Code")]),_v(" "),_c('s',[_v("Strike through")]),_v(", "),_c('strong',[_c('strong',[_v("Super Bold")])]),_v(", "),_c('span',{staticClass:"underline"},[_v("Underline")]),_v(", "),_c('mark',[_v("Highlight")]),_v(", "),_c('span',{staticClass:"dimmed"},[_v("Dim")]),_v(", "),_c('span',{staticClass:"large"},[_v("Large")]),_v(", "),_c('span',{staticClass:"small"},[_v("Small")]),_v(", Super"),_c('sup',[_v("script")]),_v(", Sub"),_c('sub',[_v("script")])])]),_c('p')])]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"thumbnails"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"thumbnails"}},[_c('span',{staticClass:"anchor",attrs:{"id":"thumbnails"}}),_c('strong',[_v("Thumbnails")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#thumbnails","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"thumbnails-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"thumbnails-2"}}),_v("Thumbnails"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#thumbnails-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("A "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("thumbnail")]),_v(" component allows you to insert thumbnails using text, images, or icons.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("circle")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../../images/deer.jpg\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("circle")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":book:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("background")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dff5ff\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("circle")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"___CS___\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("background")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#333\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("font-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"white\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("circle")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-book:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("font-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"darkgreen\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("border")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"3px solid darkgreen\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../../images/deer.jpg\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":book:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("background")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dff5ff\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"___CS___\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("background")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#333\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("font-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"white\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-book:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("font-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"darkgreen\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("border")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"3px solid darkgreen\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('thumbnail',{attrs:{"circle":"","src":"/images/deer.jpg","size":"100"}}),_v(" "),_c('thumbnail',{attrs:{"circle":"","background":"#dff5ff","size":"100"}},[_v("📖")]),_v(" "),_c('thumbnail',{attrs:{"circle":"","background":"#333","font-color":"white","size":"100"}},[_c('em',[_c('strong',[_v("CS")])])]),_v(" "),_c('thumbnail',{attrs:{"circle":"","font-color":"darkgreen","border":"3px solid darkgreen","size":"100"}},[_c('span',{staticClass:"fas fa-book",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('thumbnail',{attrs:{"src":"/images/deer.jpg","size":"100"}}),_v(" "),_c('thumbnail',{attrs:{"background":"#dff5ff","size":"100"}},[_v("📖")]),_v(" "),_c('thumbnail',{attrs:{"background":"#333","font-color":"white","size":"100"}},[_c('em',[_c('strong',[_v("CS")])])]),_v(" "),_c('thumbnail',{attrs:{"font-color":"darkgreen","border":"3px solid darkgreen","size":"100"}},[_c('span',{staticClass:"fas fa-book",attrs:{"aria-hidden":"true"}})])],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("alt")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_c('strong',[_v("This must be specified if "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" is specified")]),_c('br'),_v("The alternative text of the image.")])]),_v(" "),_c('tr',[_c('td',[_v("background")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("Specifies the background color."),_c('br'),_v(" Accepts any valid CSS background property")])]),_v(" "),_c('tr',[_c('td',[_v("border")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("Specifies the border thickness, type, and color."),_c('br'),_v(" Accepts any valid CSS border property")])]),_v(" "),_c('tr',[_c('td',[_v("circle")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boolean")])]),_v(" "),_c('td',[_v("false")]),_v(" "),_c('td',[_v("If this option is enabled, the thumbnail will be circle shaped instead of square")])]),_v(" "),_c('tr',[_c('td',[_v("font-color")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The color of the text, affects normal text and icons (but not emojis)")])]),_v(" "),_c('tr',[_c('td',[_v("font-size")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("Text size, defaults to half of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("size")]),_v(", affects text, icons and emojis")])]),_v(" "),_c('tr',[_c('td',[_v("size")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("100")]),_v(" "),_c('td',[_v("The size of the thumbnail in pixels")])]),_v(" "),_c('tr',[_c('td',[_v("src")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The URL of the image."),_c('br'),_v("The URL can be specified as absolute or relative references. More info in: "),_c('em',[_c('a',{attrs:{"href":"/userGuide/formattingContents.html#intraSiteLinks"}},[_v("Intra-Site Links")])])])]),_v(" "),_c('tr',[_c('td',[_v("text")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The text to use in the thumbnail, "),_c('a',{attrs:{"href":"/userGuide/formattingContents.html#icons"}},[_v("icons")]),_v(", "),_c('a',{attrs:{"href":"/userGuide/formattingContents.html#emoji"}},[_v("emojis")]),_v(" and markdown are supported here")])])])])]),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("If both "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("text")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" are specified, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" will take higher priority.")])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumb")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("circle")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://markbind.org/images/logo-lightbackground.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('thumb',{pre:true,attrs:{"circle":"","src":"https://markbind.org/images/logo-lightbackground.png","size":"100"}})],1)],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"tooltips"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"tooltips"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tooltips"}}),_c('strong',[_v("Tooltips")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tooltips","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"tooltips-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tooltips-2"}}),_v("Tooltips"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tooltips-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on top"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"left\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on left"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on right"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"bottom\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on bottom"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("hr")]),_v(" />")]),_v("\n")]),_c('span',[_v("Trigger\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trigger")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"click\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Click"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(" />")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(" />")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trigger")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"focus\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("input")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Focus\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("input")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("**Markdown**:\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*Hello* **World**\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"\"")]),_v(">")]),_v("Hover me"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(" />")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("**Free Text**:\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"coupling is the degree of interdependence between software modules; a measure of how closely connected two routines or modules are; the strength of the relationships between modules.\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("i")]),_v(">")]),_v("coupling"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("i")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"placement":"top","data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on top")])]),_v(" "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.left.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"left":true,"html":true}}],staticClass:"trigger",attrs:{"placement":"left","data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on left")])]),_v(" "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.right.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"right":true,"html":true}}],staticClass:"trigger",attrs:{"placement":"right","data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on right")])]),_v(" "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.bottom.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"bottom":true,"html":true}}],staticClass:"trigger",attrs:{"placement":"bottom","data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on bottom")])]),_v(" "),_c('hr'),_v("\nTrigger\n"),_c('p',[_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.click.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"click":true,"top":true,"html":true}}],staticClass:"trigger-click",attrs:{"placement":"top","trigger":"click","data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Click")])]),_v(" "),_c('br'),_v(" "),_c('br'),_v(" "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.focus.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"focus":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"placement":"top","trigger":"focus","data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('input',{attrs:{"placeholder":"Focus"}})])]),_v(" "),_c('p',[_c('strong',[_v("Markdown")]),_v(":\n"),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_c('em',[_v("Hello")]),_v(" "),_c('strong',[_v("World")])]),_v(" "),_c('a',{attrs:{"href":""}},[_v("Hover me")])]),_v(" "),_c('br')]),_v(" "),_c('p',[_c('strong',[_v("Free Text")]),_v(":\n"),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("coupling is the degree of interdependence between software modules; a measure of how closely connected two routines or modules are; the strength of the relationships between modules.")]),_c('i',[_v("coupling")])])])])],1)]),_v(" "),_c('p',[_c('strong',[_v("Using trigger for Tooltip:")]),_c('br')]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_v("More about "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tt:trigger_id\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(">")]),_v(".\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tt:trigger_id\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This tooltip triggered by a trigger\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v("This is the same "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tt:trigger_id\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(">")]),_v(" as last one.\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("More about "),_c('trigger',{attrs:{"for":"tt:trigger_id"}},[_v("trigger")]),_v(".\n"),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"id":"tt:trigger_id","data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("This tooltip triggered by a trigger")])]),_v(" "),_c('br'),_v("\nThis is the same "),_c('trigger',{attrs:{"for":"tt:trigger_id"}},[_v("trigger")]),_v(" as last one.")],1)])],1)]),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("More about triggers")])]},proxy:true}])},[_v(" "),_c('div',[_c('p',[_c('strong',[_c('strong',[_v("Triggers")])])]),_v(" "),_c('p',[_v("Trigger provides more flexibility in triggering contextual overlay via Tooltip, Popover or Modal.")]),_v(" "),_c('p',[_v("You could embed a Trigger within the text, and define the Tooltip, Popover or Modal at a separate location, which allows for a cleaner authoring flow.")]),_v(" "),_c('p',[_v("Specify the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(" attribute on the Tooltip, Popover or Modal component, and use the same "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(" in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("for")]),_v(" attribute of the Trigger to allow the Trigger to invoke the specific overlay elements.\nAdditionally, multiple Triggers could share the same overlay by providing them with the same "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(".\n"),_c('br')]),_v(" "),_c('p',[_c('strong',[_v("Trigger's "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("trigger")]),_v(" attribute (which defaults to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")]),_v(") is independent of the target's.")])]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("trigger")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")])]),_v(" "),_c('td',[_v("How the overlay view is triggered."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("click")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("focus")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("for")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("The id for the overlay view to be shown.")])]),_v(" "),_c('tr',[_c('td',[_v("placement")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("auto")])]),_v(" "),_c('td',[_v("How to position the Popover or Tooltip."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("auto")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("top")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("left")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("right")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bottom")]),_v(".")])])])])])])]),_c('p'),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("trigger")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")])]),_v(" "),_c('td',[_v("How the tooltip is triggered."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("click")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("focus")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("content")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Text content of the tooltip.")])]),_v(" "),_c('tr',[_c('td',[_v("placement")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("top")])]),_v(" "),_c('td',[_v("How to position the tooltip."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("top")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("left")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("right")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bottom")]),_v(".")])])])])]),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("Hover "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"An explanation, **supports simple Markdown**\"")]),_v(">")]),_v("here"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(">")]),_v(" to see a tooltip.\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("Hover "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("An explanation, "),_c('strong',[_v("supports simple Markdown")])]),_v("here")]),_v(" to see a tooltip.\n")])]),_c('p')],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"variables"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"variables"}},[_c('span',{staticClass:"anchor",attrs:{"id":"variables"}}),_c('strong',[_v("Variables")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#variables","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/reusingContents.html#variables"}},[_c('em',[_v("User Guide → Reusing Contents → Variables")])])])]),_v(" "),_c('h2',{attrs:{"id":"variables-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"variables-2"}}),_v("Variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#variables-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('span',{attrs:{"id":"overview"}},[_c('p',[_c('strong',[_v("Nunjucks "),_c('a',{attrs:{"href":"https://mozilla.github.io/nunjucks/templating.html#set"}},[_v("variables")]),_v(" are ideal for reusing small bits of code")]),_v(" in multiple places; you can define a variable to represent the code bit in question and reuse it anywhere in the site by referring to the variable instead of duplicating the code bit.\n")])]),_c('p'),_v(" "),_c('p',[_v("MarkBind does not aim to alter the already robust variable features of nunjucks, but provides several extensions to it.")]),_v(" "),_c('h3',{attrs:{"id":"global-variables"}},[_c('span',{staticClass:"anchor",attrs:{"id":"global-variables"}}),_v("Global Variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#global-variables","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Global variables are to be defined in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/variables.md")]),_v(" file.")]),_v(" Each variable must have an "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("name")]),_v(" and the value can be any MarkBind-compliant code fragment. The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("name")]),_v(" should not contain "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".")]),_v(". For example, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("search-option")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("search.options")]),_v(" are not allowed.")]),_v(" "),_c('p',[_v("The variables declared here are available from anywhere in the code base.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Here's how you can define two variables "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("year")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("options")]),_v(":")],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("variable")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"year\"")]),_v(">")]),_v("2018"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("variable")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("variable")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"options\"")]),_v(">")]),_v("\n")]),_c('span',[_v("* yes\n")]),_c('span',[_v("* no\n")]),_c('span',[_v("* maybe\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("variable")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_v("To include a variable value in your code, give the variable id enclosed in Nunjucks' double curly braces syntax.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("The year was {{ year }}.")]),_v(" "),_c('span',{staticClass:"fas fa-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" The year was 2018.")],1)]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Global variables ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/variables.md")]),_v(") will take precedence over any variables set via Nunjucks' tags (e.g. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{% set %}")]),_v(").")])]),_v(" "),_c('h4',{attrs:{"id":"built-in-global-variables"}},[_c('span',{staticClass:"anchor",attrs:{"id":"built-in-global-variables"}}),_v("Built-in Global Variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#built-in-global-variables","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("MarkBind also provides a number of built-in variables.")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Variable")]),_v(" "),_c('th',[_v("Notes")]),_v(" "),_c('th',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])],1),_v(" "),_c('th',[_v("Output")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")])]),_v(" "),_c('td',[_v("Represents the root directory of the site on the server, as configured in your "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#baseurl"}},[_v("site configuration")]),_v(" file. "),_c('br'),_v(" Used for specifying "),_c('a',{attrs:{"href":"/userGuide/formattingContents.html#intra-site-links"}},[_v("intra-site links")]),_v(".")]),_v(" "),_c('td',[_v("If "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")]),_v(" is specified as "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("userGuide/")]),_v(":"),_c('br'),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<img src=\"{{baseUrl}}/images/logo.png\" />")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<img src=\"userGuide/images/logo.png\" />")])])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("timestamp")])]),_v(" "),_c('td',[_v("The time stamp that indicates when the page was generated. "),_c('br'),_c('br'),_v(" The "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#timezone"}},[_v("default")]),_v(" values of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"timeZone\"")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"locale\"")]),_v(" are "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"UTC\"")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"en-GB\"")]),_v(" respectively.")]),_v(" "),_c('td',[_v("The following example showcases the use of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"Asia/Singapore\"")]),_v(" time zone."),_c('br'),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Page generated at: {{timestamp}}")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Page generated at: Sat, 22 Jan 2022, 16:49:34 UTC")])])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("MarkBind")])]),_v(" "),_c('td',[_v("The MarkBind version in use, linked to the MarkBind website.")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Page generated by: {{MarkBind}}")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Page generated by:")]),_v(" "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 3.1.1")])])])])])]),_c('h3',{attrs:{"id":"importing-variables-from-other-external-file-formats"}},[_c('span',{staticClass:"anchor",attrs:{"id":"importing-variables-from-other-external-file-formats"}}),_v("Importing variables from other external file formats"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#importing-variables-from-other-external-file-formats","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can also source variables from external files using MarkBind's "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{% ext varName = \"filepathToFile\" %}")]),_v(" Nunjucks extension.\nThis is useful if you have external datasets you want to display in your site!")]),_v(" "),_c('p',[_v("To do so, assign a root variable name ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("varName")]),_v(") to the file path from the "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("similar to how you assign filepaths for other Nunjucks tags")]),_v("root directory of the site")]),_v(". You may then access the file's variables using dot "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("varName.xx")]),_v(" or array "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("varName[i]")]),_v(" syntax, depending on the file's contents.")]),_v(" "),_c('tabs',[_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Importing from JSON files")]},proxy:true}])},[_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])],1),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Displaying a student scoreboard stored as JSON")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Displaying a student scoreboard stored as JSON","class":"hljs html"}},[_c('span',[_v("{% ext studentScoreboard = \"userGuide/syntax/extra/scoreboard.json\" %}\n")]),_c('span',[_v("\n")]),_c('span',[_v("Student Number | Score | Rank\n")]),_c('span',[_v(":----- | :-------: | ----\n")]),_c('span',[_v("{% for student in studentScoreboard.students -%}\n")]),_c('span',[_v("{{ student.number }} | {{ student.score }} | {{ student.rank }}\n")]),_c('span',[_v("{% endfor %}\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("Last updated at {{ studentScoreboard.lastUpdated }}"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("\n")])])])])]),_c('panel',{attrs:{"type":"minimal"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Json file used in example")])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Json File")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Json File","class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"lastUpdated\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"21 November, 2020\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"students\"")]),_v(": [\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"number\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"A1234567X\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"score\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("87")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"rank\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("1")]),_v("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"number\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"A1234123U\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"score\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("60")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"rank\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("3")]),_v("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"number\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"A9876543L\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"score\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("76")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"rank\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("2")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" ]\n")]),_c('span',[_v("}\n")])])])])])]),_v(" "),_c('br')],1),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',{staticStyle:{"text-align":"left"}},[_v("Student Number")]),_v(" "),_c('th',{staticStyle:{"text-align":"center"}},[_v("Score")]),_v(" "),_c('th',[_v("Rank")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("A1234567X")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("87 / 100")]),_v(" "),_c('td',[_v("1")])]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("A1234123U")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("60 / 100")]),_v(" "),_c('td',[_v("3")])]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("A9876543L")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("76 / 100")]),_v(" "),_c('td',[_v("2")])])])])]),_c('p',[_c('small',[_v("Last updated at 21 November, 2020")])])])],1)]),_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Importing from CSV files")]},proxy:true}])},[_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])],1),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Displaying a student scoreboard stored as CSV")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Displaying a student scoreboard stored as CSV","class":"hljs html"}},[_c('span',[_v("{% ext studentScoreboard = \"userGuide/syntax/extra/scoreboard.csv\" %}\n")]),_c('span',[_v("\n")]),_c('span',[_v("Student Number | Score | Rank\n")]),_c('span',[_v(":----- | :-------: | ----\n")]),_c('span',[_v("{% for student in studentScoreboard -%}\n")]),_c('span',[_v("{{ student.number }} | {{ student.score }} | {{ student.rank }}\n")]),_c('span',[_v("{% endfor %}\n")])])])])]),_c('panel',{attrs:{"type":"minimal"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("CSV file used in example")])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("CSV File")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"CSV File","class":"hljs"}},[_c('span',[_v("number,score,rank\n")]),_c('span',[_v("A1234567X,87,1\n")]),_c('span',[_v("A1234123U,60,3\n")]),_c('span',[_v("A9876543L,76,2\n")])])])])])]),_v(" "),_c('br'),_v(" "),_c('box',{attrs:{"border-left-color":"#00B0F0"}},[_c('p',[_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-lightbulb",attrs:{"aria-hidden":"true"}})]),_v(" If you do not want to have a header row, you can specify it by appending a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("noHeader")]),_v(" option at the end of the variable declaration. In this example, it should be "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{% ext studentScoreboard = \"userGuide/syntax/extra/scoreboard.csv\", noHeader %}")]),_v(" . Elements have to be accessed using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("[]")]),_v(" operator (i.e. using "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("student[0]")]),_v(" to access student number instead of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("student.number")]),_v(").")])])],1),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',{staticStyle:{"text-align":"left"}},[_v("Student Number")]),_v(" "),_c('th',{staticStyle:{"text-align":"center"}},[_v("Score")]),_v(" "),_c('th',[_v("Rank")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("A1234567X")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("87 / 100")]),_v(" "),_c('td',[_v("1")])]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("A1234123U")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("60 / 100")]),_v(" "),_c('td',[_v("3")])]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("A9876543L")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("76 / 100")]),_v(" "),_c('td',[_v("2")])])])])])])],1)])],1),_v(" "),_c('box',{attrs:{"type":"info","seamless":""}},[_c('p',[_v("Only "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".json")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".csv")]),_v(" files are supported for now.")])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('p',[_v("Global variables:")]),_v(" "),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/variables.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("variable")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"year\"")]),_v(">")]),_v("2018"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(">")]),_v("\n")])])]),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("The year was {{ year }}.")])])])],1)]),_c('hr',{staticClass:"footnotes-sep"}),_v(" "),_c('section',{staticClass:"footnotes"},[_c('ol',{staticClass:"footnotes-list"},[_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"id":"pop:footnotefn-45-1","data-mb-component-type":"popover"}},[_m(1)]),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"id":"pop:footnotefn-45-2","data-mb-component-type":"popover"}},[_m(2)]),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"id":"pop:footnotefn-45-3","data-mb-component-type":"popover"}},[_m(3)]),_v(" "),_m(4),_v(" "),_m(5),_v(" "),_m(6)])]),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})],1),_v(" "),_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"})])],1),_v(" "),_m(7)])} +}; + var pageVueStaticRenderFns = [function anonymous( +) { +with(this){return _c('h1',{attrs:{"id":"full-syntax-reference"}},[_c('span',{staticClass:"anchor",attrs:{"id":"full-syntax-reference"}}),_v("Full Syntax Reference"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#full-syntax-reference","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('span',{attrs:{"data-mb-slot-name":"content"}},[_c('div',[_c('p',[_v("Here is the footnote. Footnotes will appear at the bottom of the page.")])])])} +},function anonymous( +) { +with(this){return _c('span',{attrs:{"data-mb-slot-name":"content"}},[_c('div',[_c('p',[_v("Here's one with multiple blocks.")]),_v(" "),_c('p',[_v("Subsequent paragraphs are indented to show that they\nbelong to the previous footnote.")])])])} +},function anonymous( +) { +with(this){return _c('span',{attrs:{"data-mb-slot-name":"content"}},[_c('div',[_c('p',[_v("Inlines notes are easier to write, since\nyou don't have to pick an identifier and move down to type the\nnote.")])])])} +},function anonymous( +) { +with(this){return _c('li',{staticClass:"footnote-item",attrs:{"id":"fn-45-1"}},[_c('p',[_v("Here is the footnote. Footnotes will appear at the bottom of the page.")])])} +},function anonymous( +) { +with(this){return _c('li',{staticClass:"footnote-item",attrs:{"id":"fn-45-2"}},[_c('p',[_v("Here's one with multiple blocks.")]),_v(" "),_c('p',[_v("Subsequent paragraphs are indented to show that they\nbelong to the previous footnote.")])])} +},function anonymous( +) { +with(this){return _c('li',{staticClass:"footnote-item",attrs:{"id":"fn-45-3"}},[_c('p',[_v("Inlines notes are easier to write, since\nyou don't have to pick an identifier and move down to type the\nnote.")])])} +},function anonymous( +) { +with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 3.1.1")]),_v(" on Sat, 22 Jan 2022, 16:49:34 UTC]")]),_c('br'),_v(" "),_c('small',[_v("This site is powered by "),_c('a',{attrs:{"href":"https://www.netlify.com/"}},[_v("Netlify")]),_v(".")])])])])} +}]; + \ No newline at end of file diff --git a/userGuide/gettingStarted.html b/userGuide/gettingStarted.html index 6d183dc..ed70fb2 100644 --- a/userGuide/gettingStarted.html +++ b/userGuide/gettingStarted.html @@ -3,7 +3,7 @@ <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="generator" content="MarkBind 3.1.0"> + <meta name="generator" content="MarkBind 3.1.1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>MarkBind - User Guide - Getting Started @@ -12,8 +12,8 @@ - - + + @@ -24,7 +24,7 @@ const baseUrl = '' -

          Getting Started

          Getting Started

          Prerequisites

          a basic knowledge of Markdown and HTML syntax
          a basic knowledge of running CLI commands
          a recent version of npm installed
          Node.js MarkBind aims to support up to the last maintenance lts release as outlined herev12 or higher installed

          1. Install MarkBind

          Run the following command to install MarkBind.

          $ npm install -g markbind-cli
+
           
           
          Getting Started
           
          Getting Started
           
          Prerequisites
           
           a basic knowledge of Markdown and HTML syntax
            a basic knowledge of running CLI commands
            a recent version of npm installed
            Node.js MarkBind aims to support up to the last maintenance lts release as outlined herev12 or higher installed
           
          1. Install MarkBind
           
          Run the following command to install MarkBind.
           
          $ npm install -g markbind-cli
 
          Next, run the command markbind. If MarkBind has been installed correctly, you should see the MarkBind ascii logo followed by a summary of MarkBind commands as the output.
           
          $ markbind
   __  __                  _      ____    _               _
  |  \/  |   __ _   _ __  | | __ | __ )  (_)  _ __     __| |
@@ -39,7 +39,7 @@
 You can add the --help flag to any command to show the help screen. 
          
 e.g., markbind init --help

          The init command populates the project with the default project template. Refer to templates section to learn how to use a different template.

          Starting with an existing project

          Navigate to the project The directory that contains all the project files. It is also the directory in which the site.json configuration file is located.root directory.

          3. Preview the site

          Run the following command in the same directory. It will generate a website from your source files, start a web server, and open a live preview of your site in your default Browser.

          $ markbind serve
-

          Do some changes to the index.md and save the file. The live preview in the Browser should update automatically to reflect your changes.

          To stop the web server, go to the console running the serve command and press CTRL + C (or the equivalent in your OS).

          4. Next steps

          1. Update the content of your site. More info can be found in the User Guide: Authoring Contents section
          2. Deploy your site. More info can be found in the User Guide: Deploying the Site section.

          Authoring Contents


          +

          Do some changes to the index.md and save the file. The live preview in the Browser should update automatically to reflect your changes.

          To stop the web server, go to the console running the serve command and press CTRL + C (or the equivalent in your OS).

          4. Next steps

          1. Update the content of your site. More info can be found in the User Guide: Authoring Contents section
          2. Deploy your site. More info can be found in the User Guide: Deploying the Site section.

          Authoring Contents


          + + + + + + + + + +

          Live Preview

          Live preview is:

          • Regeneration of affected content upon any change to .md, .mbd, .mbdf, .njk files ... anything your content depends on!source files, then reloading the updated site in the Browser.

          • Regeneration will also occur upon any modification to attributes in site.json with the exception of baseUrl.

          • Copying files that don't affect page generation (eg. images), but are used in the siteassets to the site output folder.

          Use the serve command to launch a live preview.

          .mbd extension

          .mbd extension indicates a MarkBind source file.

          MarkBind is able to take Markdown files (.md) and HTML files (.html) as source files too. +

          + + + diff --git a/userGuide/glossary.page-vue-render.js b/userGuide/glossary.page-vue-render.js new file mode 100644 index 0000000..cd69504 --- /dev/null +++ b/userGuide/glossary.page-vue-render.js @@ -0,0 +1,31 @@ + + var pageVueRenderFn = function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',[_c('header',{attrs:{"fixed":""}},[_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/index.html","title":"Home"}},[_c('img',{attrs:{"src":"/images/logo-darkbackground.svg","height":"20"}})])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('form',{staticClass:"navbar-form"},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback,"menu-align-right":""}})],1)])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/index.html"}},[_v("HOME")])]),_v(" "),_c('div',{attrs:{"tags":"environment--ug"}},[_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"sibling-or-child","href":"/userGuide/index.html"}},[_v("USER GUIDE")])])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/showcase.html"}},[_v("SHOWCASE")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/about.html"}},[_v("ABOUT")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_c('span',[_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}})])])])])],1)]),_v(" "),_c('div',{attrs:{"id":"flex-body"}},[_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"site-nav","tag-name":"nav","to":"site-nav"}},[_c('div',{staticClass:"site-nav-top"},[_c('div',{staticClass:"font-weight-bold mb-2",staticStyle:{"font-size":"1.25rem"}},[_v("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tipsAndTricks.html"}},[_v("Tips & Tricks")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/glossary.html"}},[_v("Glossary")])])])])])])],1)],1)]),_v(" "),_c('div',{staticClass:"fixed-header-padding",attrs:{"id":"content-wrapper"}},[_m(0),_v(" "),_c('span',{attrs:{"id":"live-preview"}},[_m(1),_v(" "),_c('ul',[_c('li',[_c('p',[_v("Regeneration of affected content upon any change to "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_m(2),_v("source files")]),_v(", then reloading the updated site in the Browser.")])]),_v(" "),_m(3),_v(" "),_c('li',[_c('p',[_v("Copying "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("files that don't affect page generation (eg. images), but are used in the site")]),_v("assets")]),_v(" to the site output folder.")])])]),_v(" "),_m(4)]),_v(" "),_c('br'),_v(" "),_m(5),_v(" "),_m(6),_c('p'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})]),_v(" "),_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"})])],1),_v(" "),_m(7)])} +}; + var pageVueStaticRenderFns = [function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"live-preview"}},[_c('span',{staticClass:"anchor",attrs:{"id":"live-preview"}}),_v("Live Preview "),_c('span',{staticStyle:{"font-size":"0.8em"}},[_c('span',{staticClass:"fas fa-sync",attrs:{"aria-hidden":"true"}})]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#live-preview","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_c('em',[_v("Live preview")])]),_v(" is:")])} +},function anonymous( +) { +with(this){return _c('span',{attrs:{"data-mb-slot-name":"_content"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".md")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".mbd")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".mbdf")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".njk")]),_v(" files ... anything your content depends on!")])} +},function anonymous( +) { +with(this){return _c('li',[_c('p',[_v("Regeneration will also occur upon any modification to attributes in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" with the exception of "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#baseurl"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")])]),_v(".")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("Use "),_c('a',{attrs:{"href":"/userGuide/cliCommands.html#serve-command"}},[_v("the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("serve")]),_v(" command")]),_v(" to launch a live preview.")])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"mbd-extension"}},[_c('span',{staticClass:"anchor",attrs:{"id":"mbd-extension"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".mbd")]),_v(" extension"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#mbd-extension","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('span',{attrs:{"id":"mbd-extension"}},[_c('span',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".mbd")]),_v(" extension indicates a MarkBind source file")]),_v(".")]),_v(" "),_c('p',[_v("MarkBind is able to take Markdown files ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".md")]),_v(") and HTML files ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".html")]),_v(") as source files too.\n")])])} +},function anonymous( +) { +with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 3.1.1")]),_v(" on Sat, 22 Jan 2022, 16:49:34 UTC]")]),_c('br'),_v(" "),_c('small',[_v("This site is powered by "),_c('a',{attrs:{"href":"https://www.netlify.com/"}},[_v("Netlify")]),_v(".")])])])])} +}]; + \ No newline at end of file diff --git a/userGuide/index.html b/userGuide/index.html index bab1095..a8d7f54 100644 --- a/userGuide/index.html +++ b/userGuide/index.html @@ -3,7 +3,7 @@ - + MarkBind @@ -12,8 +12,8 @@ - - + + @@ -24,7 +24,7 @@ const baseUrl = '' -
          +
          diff --git a/userGuide/index.page-vue-render.js b/userGuide/index.page-vue-render.js index 5bcd5e7..1ed637a 100644 --- a/userGuide/index.page-vue-render.js +++ b/userGuide/index.page-vue-render.js @@ -1,13 +1,13 @@ var pageVueRenderFn = function anonymous( ) { -with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',[_c('header',{attrs:{"fixed":""}},[_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/index.html","title":"Home"}},[_c('img',{attrs:{"src":"/images/logo-darkbackground.svg","height":"20"}})])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('form',{staticClass:"navbar-form"},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback,"menu-align-right":""}})],1)])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/index.html"}},[_v("HOME")])]),_v(" "),_c('div',{attrs:{"tags":"environment--ug"}},[_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"sibling-or-child","href":"/userGuide/index.html"}},[_v("USER GUIDE")])])]),_v(" "),_c('div',{attrs:{"tags":"environment--dg"}},[_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"sibling-or-child","href":"/devGuide/index.html"}},[_v("DEVELOPER GUIDE")])])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/showcase.html"}},[_v("SHOWCASE")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/about.html"}},[_v("ABOUT")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_c('span',[_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}})])])])])],1)]),_v(" "),_m(0),_v(" "),_m(1)])} +with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',[_c('header',{attrs:{"fixed":""}},[_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/index.html","title":"Home"}},[_c('img',{attrs:{"src":"/images/logo-darkbackground.svg","height":"20"}})])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('form',{staticClass:"navbar-form"},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback,"menu-align-right":""}})],1)])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/index.html"}},[_v("HOME")])]),_v(" "),_c('div',{attrs:{"tags":"environment--ug"}},[_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"sibling-or-child","href":"/userGuide/index.html"}},[_v("USER GUIDE")])])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/showcase.html"}},[_v("SHOWCASE")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/about.html"}},[_v("ABOUT")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_c('span',[_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}})])])])])],1)]),_v(" "),_m(0),_v(" "),_m(1)])} }; var pageVueStaticRenderFns = [function anonymous( ) { with(this){return _c('div',{attrs:{"id":"flex-body"}},[_c('div',{staticClass:"fixed-header-padding",attrs:{"id":"content-wrapper"}},[_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})])])} },function anonymous( ) { -with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 3.1.0")]),_v(" on Sat, 22 Jan 2022, 1:15:28 GMT+8]")]),_c('br'),_v(" "),_c('small',[_v("This site is powered by "),_c('a',{attrs:{"href":"https://www.netlify.com/"}},[_v("Netlify")]),_v(".")])])])])} +with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 3.1.1")]),_v(" on Sat, 22 Jan 2022, 16:49:34 UTC]")]),_c('br'),_v(" "),_c('small',[_v("This site is powered by "),_c('a',{attrs:{"href":"https://www.netlify.com/"}},[_v("Netlify")]),_v(".")])])])])} }]; \ No newline at end of file diff --git a/userGuide/makingTheSiteSearchable.html b/userGuide/makingTheSiteSearchable.html new file mode 100644 index 0000000..c384180 --- /dev/null +++ b/userGuide/makingTheSiteSearchable.html @@ -0,0 +1,49 @@ + + + + + + + + MarkBind - User Guide: Making the Site Searchable + + + + + + + + + + + + + + + + +

          Making the Site Searchable

          User Guide → Making the Site Searchable

          Making the Site Searchable

          MarkBind comes with with an in-built site search facility with the option to use third-party search services as well. +

          All markdown and html headings of levels 1-3 are captured in the search index by default. You can change this setting using the headingIndexLevel property of the site.json.

          If you do not wish to use MarkBind's searchbar (e.g. you have an external service provider), it may be helpful to include the option enableSearch: false in your site.json. This stops MarkBind from indexing search headings and speeds up building.

          Search Bars

          You can add a search bar component to your website to allow users to search the site.

          Keywords

          regress regression testing

          You can also specify additional keywords to be indexed under a heading by tagging the words with the keyword class. Those keywords will be linked to the heading immediately above it. If you want to index a keyword without rendering it in the page, add d-none as a class.

          Example

          #### Developer Testing
+<span class="keyword d-none">regress</span>
+<span class="keyword d-none">regression testing</span>
+
+This is good for catching <span class="keyword">regressions</span>.
+

          Developer Testing

          This is good for catching regressions.

          You can also set additional keywords to be indexed for an entire page using the keywords attribute inside the <frontmatter> of that page.

          Example

          <frontmatter>
+  keywords: regress, regression testing, regressions
+</frontmatter>
+...
+
          <span class="keyword d-none">regress</span>
+

          Including or Excluding Headings

          You can specify headings which are to be included or excluded from the index built by MarkBind's built-in search feature using the .always-index or .no-index classes.

          If you wish to index a specific heading outside the specified headingIndexLevel, you may add the .always-index attribute to the heading. Similarly, if you wish for a specific heading inside the specified headingIndexLevel not to be indexed, you may add the .no-index attribute to the heading.

          Example

          ###### Heading outside heading index level that will be indexed {.always-index}
+
+# Heading inside heading index level that will not be indexed {.no-index}
+

          Equivalently,

          <h6 class="always-index"> Heading outside heading index level that will be indexed </h6>
+
+<h1 class="no-index"> Heading inside heading index level that will not be indexed </h1>
+

          Using External Search Services

          MarkBind sites can use Algolia Doc Search services easily via the Algolia plugin. Unlike the built-in search, Algolia provides full-text search. See the panel below for more info.

          Using Plugins

          Themes


          + + + diff --git a/userGuide/makingTheSiteSearchable.page-vue-render.js b/userGuide/makingTheSiteSearchable.page-vue-render.js new file mode 100644 index 0000000..11dd772 --- /dev/null +++ b/userGuide/makingTheSiteSearchable.page-vue-render.js @@ -0,0 +1,73 @@ + + var pageVueRenderFn = function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',[_c('header',{attrs:{"fixed":""}},[_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/index.html","title":"Home"}},[_c('img',{attrs:{"src":"/images/logo-darkbackground.svg","height":"20"}})])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('form',{staticClass:"navbar-form"},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback,"menu-align-right":""}})],1)])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/index.html"}},[_v("HOME")])]),_v(" "),_c('div',{attrs:{"tags":"environment--ug"}},[_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"sibling-or-child","href":"/userGuide/index.html"}},[_v("USER GUIDE")])])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/showcase.html"}},[_v("SHOWCASE")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/about.html"}},[_v("ABOUT")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_c('span',[_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}})])])])])],1)]),_v(" "),_c('div',{attrs:{"id":"flex-body"}},[_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"site-nav","tag-name":"nav","to":"site-nav"}},[_c('div',{staticClass:"site-nav-top"},[_c('div',{staticClass:"font-weight-bold mb-2",staticStyle:{"font-size":"1.25rem"}},[_v("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tipsAndTricks.html"}},[_v("Tips & Tricks")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/glossary.html"}},[_v("Glossary")])])])])])])],1)],1)]),_v(" "),_c('div',{staticClass:"fixed-header-padding",attrs:{"id":"content-wrapper"}},[_m(0),_v(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_c('p'),_v(" "),_m(4),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("If you do not wish to use MarkBind's searchbar (e.g. you have an external service provider), it may be helpful to include the option "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("enableSearch: false")]),_v(" in your "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(". This stops MarkBind from indexing search headings and speeds up building.")])]),_v(" "),_m(5),_v(" "),_c('p',[_v("You can add a search bar component to your website to allow users to search the site.")]),_v(" "),_c('panel',{attrs:{"type":"seamless","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',[_c('span',{staticClass:"glyphicon glyphicon-log-in",attrs:{"aria-hidden":"true"}})]),_v(" Using components → "),_c('strong',[_v("Search bars")])])]},proxy:true}])},[_v(" "),_c('div',[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search (Right-aligned dropdown)\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])]),_c('p',[_v("To use the searchbar within a navbar, add the following markup to your file. The searchbar can be positioned using the slot attribute for the list. The following markup adds a searchbar to the right side of the navbar with appropriate styling.")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Enter a search term (eg. 'search bar') to see the search result dropdown.")]),_v(" "),_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback}}),_v(" "),_c('br'),_v(" "),_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search (Right-aligned dropdown)","on-hit":searchCallback,"menu-align-right":""}})],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("algolia")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether the searchbar should be connected to "),_c('a',{attrs:{"href":"/userGuide/usingPlugins.html#algolia-enabling-algolia-docsearch"}},[_v("Algolia DocSearch")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("data")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Array")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The local data source for suggestions. Expected to be a primitive array. To use MarkBind's search functionality, set this value to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"searchData\"")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("menu-align-right")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether the search bar's dropdown list will be right-aligned.")])]),_v(" "),_c('tr',[_c('td',[_v("on-hit")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Function")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("A callback function when you click or hit return on an item. To use MarkBind's search functionality, set this value to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"searchCallback\"")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("placeholder")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("The placeholder text shown when no keywords are entered in the search bar.")])])])])]),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Note: If you are using MarkBind's search functionality, then "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("enableSearch")]),_v(" "),_c('strong',[_v("must be set to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("true")]),_v(" in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")])]),_v(".")]),_v(" "),_c('p',[_v("See: "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#enable-search"}},[_v("User Guide: Site Configuration → enableSearch")]),_v(".")])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" Related topic: "),_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("User Guide: Making the Site Searchable")]),_v(".")])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" Related topic: "),_c('a',{attrs:{"href":"/userGuide/usingPlugins.html#algolia-enabling-algolia-docsearch"}},[_v("User Guide: Using Plugins → Algolia: Enabling Algolia DocSearch")]),_v(".")])]),_v(" "),_c('p')],1)]),_v(" "),_c('p'),_v(" "),_c('div',[_m(6),_v(" "),_m(7),_v(" "),_m(8),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])],1),_v(" "),_m(9),_m(10),_v(" "),_c('box',[_c('p',[_c('big',[_c('strong',[_v("Developer Testing")])]),_c('br')],1),_v(" "),_c('p',[_v("This is good for catching "),_c('span',{staticClass:"keyword"},[_v("regressions")]),_v(".")])])],1),_v(" "),_m(11),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])],1),_v(" "),_m(12)]),_v(" "),_m(13)]),_v(" "),_c('div',[_m(14),_v(" "),_m(15),_v(" "),_m(16),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])],1),_v(" "),_m(17),_c('p',[_v("Equivalently,")]),_v(" "),_m(18)])]),_v(" "),_m(19),_v(" "),_c('p',[_v("MarkBind sites can use Algolia Doc Search services easily via the Algolia plugin. Unlike the built-in search, Algolia provides full-text search. See the panel below for more info.")]),_v(" "),_c('panel',{attrs:{"type":"seamless","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',[_c('span',{staticClass:"glyphicon glyphicon-log-in",attrs:{"aria-hidden":"true"}})]),_v(" Using plugins → "),_c('strong',[_v("Algolia")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h3',{attrs:{"id":"plugin-algolia"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugin-algolia"}}),_v("Plugin: Algolia"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-algolia","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("This plugin allows you to use "),_c('a',{attrs:{"href":"https://community.algolia.com/docsearch/"}},[_v("Algolia DocSearch")]),_v(" for your site.")]),_v(" "),_c('p',[_v("To enable it, add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("algolia")]),_v(" to your site's plugins, and supply the required options via the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pluginsContext")]),_v(".")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("apiKey")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The API key for your site's Algolia DocSearch setup")])]),_v(" "),_c('tr',[_c('td',[_v("appId")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The application id for your site's Algolia DocSearch setup")])]),_v(" "),_c('tr',[_c('td',[_v("indexName")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The index name for your site's Algolia DocSearch setup")])]),_v(" "),_c('tr',[_c('td',[_v("algoliaOptions")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Object")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{}")])]),_v(" "),_c('td',[_v("A JSON object specifying "),_c('a',{attrs:{"href":"https://community.algolia.com/docsearch/behavior.html#algoliaoptions"}},[_v("additional options for DocSearch")])])]),_v(" "),_c('tr',[_c('td',[_v("debug")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether to turn on debug mode to allow inspection of CSS styles for the dropdown")])])])])]),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugins\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"algolia\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pluginsContext\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"algolia\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"apiKey\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25626fae796133dc1e734c6bcaaeac3c\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// replace with your site's api key")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"appId\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"R2IYF7ETH7\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// replace with your site's application id")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"indexName\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"docsearch\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// replace with your site's index name")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"algoliaOptions\"")]),_v(": { "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hitsPerPage\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("10")]),_v(" }, "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// optional")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"debug\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-literal"}},[_v("false")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// optional")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])])])]),_c('p',[_v("To connect the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("searchbar")]),_v(" component to Algolia DocSearch, add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("algolia")]),_v(" key.")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("algolia")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])]),_c('p',[_v("Alternatively, if you are using a custom search bar, you can assign the input field the id "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("algolia-search-input")]),_v(" to connect it to Algolia DocSearch.")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("input")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"algolia-search-input\"")]),_v(">")]),_v("\n")])])]),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("By default, Algolia DocSearch indexes all content on the page, including content in components that are hidden to the user during the initial render (e.g. Panels). To exclude these content from being indexed, you can add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".algolia-no-index")]),_v(" to the "),_c('a',{attrs:{"href":"https://community.algolia.com/docsearch/config-file.html#selectors_exclude-optional"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("selectors_exclude")])]),_v(" attribute in your DocSearch configuration.")]),_v(" "),_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("algolia-no-index")]),_v(" class is automatically added to content hidden by MarkBind's Vue components. You may also add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("algolia-no-index")]),_v(" class to content that you do not want to be indexed by Algolia DocSearch.")])])],1)]),_v(" "),_m(20),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})],1),_v(" "),_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"},[_c('overlay-source',{staticClass:"nav nav-pills flex-column my-0 small no-flex-wrap",attrs:{"id":"mb-page-nav","tag-name":"nav","to":"mb-page-nav"}},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#making-the-site-searchable"}},[_v("Making the Site Searchable‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#search-bars"}},[_v("Search Bars‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#keywords"}},[_v("Keywords‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#including-or-excluding-headings"}},[_v("Including or Excluding Headings‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#using-external-search-services"}},[_v("Using External Search Services‎")])])])],1)])],1),_v(" "),_m(21)])} +}; + var pageVueStaticRenderFns = [function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}},[_v("Making the Site Searchable")])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_c('em',[_v("User Guide → Making the Site Searchable")])])])])} +},function anonymous( +) { +with(this){return _c('h1',{attrs:{"id":"making-the-site-searchable"}},[_c('span',{staticClass:"anchor",attrs:{"id":"making-the-site-searchable"}}),_v("Making the Site Searchable"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#making-the-site-searchable","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p',[_c('strong',[_v("MarkBind comes with with an in-built "),_c('em',[_v("site search")]),_v(" facility")]),_v(" with the option to use third-party search services as well.\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("All markdown and html headings of levels 1-3 are captured in the search index")]),_v(" by default. You can change this setting using the "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#headingindexinglevel"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("headingIndexLevel")]),_v(" property of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")])]),_v(".")])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"search-bars"}},[_c('span',{staticClass:"anchor",attrs:{"id":"search-bars"}}),_v("Search Bars"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#search-bars","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"keywords"}},[_c('span',{staticClass:"anchor",attrs:{"id":"keywords"}}),_v("Keywords"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#keywords","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"keyword d-none"},[_v("regress")]),_v(" "),_c('span',{staticClass:"keyword d-none"},[_v("regression testing")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("You can also specify additional keywords to be indexed under a heading")]),_v(" by tagging the words with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("keyword")]),_v(" class. Those keywords will be linked to the heading immediately above it. If you want to index a keyword without rendering it in the page, add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("d-none")]),_v(" as a class.")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("#### Developer Testing\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"keyword d-none\"")]),_v(">")]),_v("regress"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"keyword d-none\"")]),_v(">")]),_v("regression testing"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("This is good for catching "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"keyword\"")]),_v(">")]),_v("regressions"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(".\n")])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"fas fa-arrow-down",attrs:{"aria-hidden":"true"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("You can also set additional keywords to be indexed for an entire page")]),_v(" using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("keywords")]),_v(" attribute inside the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" of that page.")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" keywords: regress, regression testing, regressions\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("...\n")])])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"keyword d-none\"")]),_v(">")]),_v("regress"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"including-or-excluding-headings"}},[_c('span',{staticClass:"anchor",attrs:{"id":"including-or-excluding-headings"}}),_v("Including or Excluding Headings"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#including-or-excluding-headings","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("You can specify headings which are to be included or excluded from the index built by MarkBind's built-in search feature")]),_v(" using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".always-index")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".no-index")]),_v(" classes.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("If you wish to index a specific heading outside the specified "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("headingIndexLevel")]),_v(", you may add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".always-index")]),_v(" attribute to the heading. Similarly, if you wish for a specific heading inside the specified "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("headingIndexLevel")]),_v(" not to be indexed, you may add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".no-index")]),_v(" attribute to the heading.")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs md"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("###### Heading outside heading index level that will be indexed {.always-index}")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("# Heading inside heading index level that will not be indexed {.no-index}")]),_v("\n")])])])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h6")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"always-index\"")]),_v(">")]),_v(" Heading outside heading index level that will be indexed "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h1")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v(" Heading inside heading index level that will not be indexed "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"using-external-search-services"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-external-search-services"}}),_v("Using External Search Services"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-external-search-services","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-left"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/usingPlugins.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Using Plugins")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-right"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/themes.html"}},[_c('span',[_c('span',[_v("Themes")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} +},function anonymous( +) { +with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 3.1.1")]),_v(" on Sat, 22 Jan 2022, 16:49:34 UTC]")]),_c('br'),_v(" "),_c('small',[_v("This site is powered by "),_c('a',{attrs:{"href":"https://www.netlify.com/"}},[_v("Netlify")]),_v(".")])])])])} +}]; + \ No newline at end of file diff --git a/userGuide/markBindInTheProjectWorkflow.html b/userGuide/markBindInTheProjectWorkflow.html new file mode 100644 index 0000000..93a5606 --- /dev/null +++ b/userGuide/markBindInTheProjectWorkflow.html @@ -0,0 +1,37 @@ + + + + + + + + MarkBind - User Guide: MarkBind in the Project Workflow + + + + + + + + + + + + + + + + +

          MarkBind in the Project Workflow

          User Guide → MarkBind in the Project Workflow

          MarkBind in the Project Workflow

          As MarkBind is especially optimized as a project documentation tool, it integrates well with the workflow of software project. +

          Authoring Workflow

          While most IDEs provide previews for Markdown files, unless your MarkBind files are using basic Markdown syntax only, you are recommended to launch a live preview and check the rendering of the page as you modify the source file.

          GitHub Project Workflow

          If you use GitHub for your project, you can deploy your site to GitHub pages easily. You can even set up Travis to automatically deploy your site to GitHub pages whenever a branch in your repo is updated.

          If you are using GitHub Pull Requests as part of your workflow, you can set up Netlify to show a preview of the site generated from the MarkBind code in the PR.

          Using MarkBind for Project Documentation

          Here is a example workflow for using MarkBind for both developer documentation and user documentation in a GitHub project:

          Suppose the main development of the project is done in the master branch while product releases are done using the release branch.

          You can keep the user docs in a separate directory (say user-docs) and set up a MarkBind project in that folder. When there is a new release, you can deploy the user-docs site to GitHub Pages for users to read.

          Similarly, you can keep the dev docs in a separate directory (say dev-docs) and set up Netlify to deploy the site when there is an update to the master branch; that way, developers can see the latest version of dev-docs via the Netlify site.

          Converting existing project documentation/wiki

          MarkBind supports the automatic conversion of an existing GitHub wiki or docs folder containing Markdown files.

          A MarkBind conversion involves the following:

          • Adding a Home page: If your project already has a README.md or Home.md, the content will be copied over to index.md. Otherwise, a default home page will be added.
          • Adding an About Us page: If your project already has about.md, this will be used as the About page. Otherwise, a default About page will be added.
          • Adding a top navigation bar.
          • Adding a site navigation menu: If your project has a valid _Sidebar.md file, it will be used as the site navigation menu. Otherwise, the menu will be built from your project's directory structure and contain links to all addressable pages.
          • Adding a custom footer: If your project has a valid _Footer.md file, it will be used as the website footer. Otherwise, a default footer will be added.
          + Conversion might not work if your project files have existing Nunjucks syntax. +

          To convert your existing project, follow these steps:

          1. Navigate into the project directory.
          2. Run markbind init --convert to convert the project.
          3. You can now preview the website using markbind serve to view your newly converted MarkBind website.
          + You only need to run the conversion once. Once you have converted your project, you can proceed to edit it as a normal MarkBind project. +

          Deploying the Site


          + + + diff --git a/userGuide/markBindInTheProjectWorkflow.page-vue-render.js b/userGuide/markBindInTheProjectWorkflow.page-vue-render.js new file mode 100644 index 0000000..1d576ad --- /dev/null +++ b/userGuide/markBindInTheProjectWorkflow.page-vue-render.js @@ -0,0 +1,58 @@ + + var pageVueRenderFn = function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',[_c('header',{attrs:{"fixed":""}},[_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/index.html","title":"Home"}},[_c('img',{attrs:{"src":"/images/logo-darkbackground.svg","height":"20"}})])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('form',{staticClass:"navbar-form"},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback,"menu-align-right":""}})],1)])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/index.html"}},[_v("HOME")])]),_v(" "),_c('div',{attrs:{"tags":"environment--ug"}},[_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"sibling-or-child","href":"/userGuide/index.html"}},[_v("USER GUIDE")])])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/showcase.html"}},[_v("SHOWCASE")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/about.html"}},[_v("ABOUT")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_c('span',[_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}})])])])])],1)]),_v(" "),_c('div',{attrs:{"id":"flex-body"}},[_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"site-nav","tag-name":"nav","to":"site-nav"}},[_c('div',{staticClass:"site-nav-top"},[_c('div',{staticClass:"font-weight-bold mb-2",staticStyle:{"font-size":"1.25rem"}},[_v("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tipsAndTricks.html"}},[_v("Tips & Tricks")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/glossary.html"}},[_v("Glossary")])])])])])])],1)],1)]),_v(" "),_c('div',{staticClass:"fixed-header-padding",attrs:{"id":"content-wrapper"}},[_m(0),_v(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_c('p'),_v(" "),_m(4),_v(" "),_m(5),_v(" "),_m(6),_v(" "),_m(7),_v(" "),_m(8),_v(" "),_m(9),_v(" "),_c('p',[_v("Here is a example workflow for using MarkBind for both developer documentation and user documentation in a GitHub project:")]),_v(" "),_m(10),_v(" "),_m(11),_v(" "),_m(12),_v(" "),_c('p',[_v("A MarkBind conversion involves the following:")]),_v(" "),_m(13),_v(" "),_c('box',{attrs:{"type":"warning"}},[_v("\n Conversion might not work if your project files have existing Nunjucks syntax. \n")]),_v(" "),_c('p',[_v("To convert your existing project, follow these steps:")]),_v(" "),_m(14),_v(" "),_c('box',{attrs:{"type":"info"}},[_v("\n You only need to run the conversion once. Once you have converted your project, you can proceed to edit it as a normal MarkBind project.\n")]),_v(" "),_m(15),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})],1),_v(" "),_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"})])],1),_v(" "),_m(16)])} +}; + var pageVueStaticRenderFns = [function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}},[_v("MarkBind in the Project Workflow")])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_c('em',[_v("User Guide → MarkBind in the Project Workflow")])])])])} +},function anonymous( +) { +with(this){return _c('h1',{attrs:{"id":"markbind-in-the-project-workflow"}},[_c('span',{staticClass:"anchor",attrs:{"id":"markbind-in-the-project-workflow"}}),_v("MarkBind in the Project Workflow"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#markbind-in-the-project-workflow","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p',[_v("As "),_c('strong',[_v("MarkBind is especially optimized as a project documentation tool")]),_v(", it integrates well with the workflow of software project.\n")])])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"authoring-workflow"}},[_c('span',{staticClass:"anchor",attrs:{"id":"authoring-workflow"}}),_v("Authoring Workflow"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#authoring-workflow","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("While most IDEs provide previews for Markdown files, unless your MarkBind files are using basic Markdown syntax only, you are recommended to launch a "),_c('a',{attrs:{"href":"/userGuide/glossary.html#live-preview"}},[_v("live preview")]),_v(" and check the rendering of the page as you modify the source file.")])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"github-project-workflow"}},[_c('span',{staticClass:"anchor",attrs:{"id":"github-project-workflow"}}),_v("GitHub Project Workflow"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#github-project-workflow","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("If you use GitHub for your project, you can "),_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html#deploying-to-github-pages"}},[_v("deploy your site to GitHub pages")]),_v(" easily. You can even set up Travis to automatically deploy your site to GitHub pages whenever a branch in your repo is updated.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("If you are using GitHub Pull Requests as part of your workflow, you can "),_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html#deploying-to-netlify"}},[_v("set up Netlify to show a preview of the site generated from the MarkBind code in the PR")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"using-markbind-for-project-documentation"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-markbind-for-project-documentation"}}),_v("Using MarkBind for Project Documentation"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-markbind-for-project-documentation","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('p',[_v("Suppose the main development of the project is done in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("master")]),_v(" branch while product releases are done using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("release")]),_v(" branch.")]),_v(" "),_c('p',[_v("You can keep the user docs in a separate directory (say "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("user-docs")]),_v(") and set up a MarkBind project in that folder. When there is a new release, you can deploy the user-docs site to GitHub Pages for users to read.")]),_v(" "),_c('p',[_v("Similarly, you can keep the dev docs in a separate directory (say "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("dev-docs")]),_v(") and set up Netlify to deploy the site when there is an update to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("master")]),_v(" branch; that way, developers can see the latest version of dev-docs via the Netlify site.")])])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"converting-existing-project-documentation-wiki"}},[_c('span',{staticClass:"anchor",attrs:{"id":"converting-existing-project-documentation-wiki"}}),_v("Converting existing project documentation/wiki"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#converting-existing-project-documentation-wiki","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("MarkBind supports the automatic conversion of an existing GitHub wiki or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("docs")]),_v(" folder containing Markdown files.")])} +},function anonymous( +) { +with(this){return _c('ul',[_c('li',[_v("Adding a Home page: If your project already has a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("README.md")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Home.md")]),_v(", the content will be copied over to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("index.md")]),_v(". Otherwise, a default home page will be added.")]),_v(" "),_c('li',[_v("Adding an About Us page: If your project already has "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("about.md")]),_v(", this will be used as the About page. Otherwise, a default About page will be added.")]),_v(" "),_c('li',[_v("Adding a top navigation bar.")]),_v(" "),_c('li',[_v("Adding a site navigation menu: If your project has a valid "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_Sidebar.md")]),_v(" file, it will be used as the "),_c('a',{attrs:{"href":"https://markbind.org/userGuide/tweakingThePageStructure.html#site-navigation-menus"}},[_v("site navigation menu")]),_v(". Otherwise, the menu will be built from your project's directory structure and contain links to all addressable pages.")]),_v(" "),_c('li',[_v("Adding a custom footer: If your project has a valid "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_Footer.md")]),_v(" file, it will be used as the website footer. Otherwise, a default footer will be added.")])])} +},function anonymous( +) { +with(this){return _c('ol',[_c('li',[_v("Navigate into the project directory.")]),_v(" "),_c('li',[_v("Run "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind init --convert")]),_v(" to convert the project.")]),_v(" "),_c('li',[_v("You can now preview the website using "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind serve")]),_v(" to view your newly converted MarkBind website.")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-left"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/deployingTheSite.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Deploying the Site")])])])])])])} +},function anonymous( +) { +with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 3.1.1")]),_v(" on Sat, 22 Jan 2022, 16:49:34 UTC]")]),_c('br'),_v(" "),_c('small',[_v("This site is powered by "),_c('a',{attrs:{"href":"https://www.netlify.com/"}},[_v("Netlify")]),_v(".")])])])])} +}]; + \ No newline at end of file diff --git a/userGuide/markBindSyntaxOverview.html b/userGuide/markBindSyntaxOverview.html new file mode 100644 index 0000000..0ca0502 --- /dev/null +++ b/userGuide/markBindSyntaxOverview.html @@ -0,0 +1,54 @@ + + + + + + + + MarkBind - User Guide: MarkBind Syntax Overview + + + + + + + + + + + + + + + + +

          MarkBind Syntax Overview

          +[_User Guide → MarkBind Syntax Overview_](markBindSyntaxOverview.html) +

          MarkBind Syntax 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. +

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

          Exact usage of various MarkBind syntax is described in separate sections such as User Guide → Formatting Contents

          Support for Markdown

          MarkBind supports all basic Markdown syntax.

          Some examples ...

          Support for GFMD

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

          Some examples ...

          MarkBind Extensions to Markdown

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

          Some examples ...

          MarkBind Custom Syntax

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

          Nunjucks variables are ideal for reusing small bits of code in multiple places; you can define a variable to represent the code bit in question and reuse it anywhere in the site by referring to the variable instead of duplicating the code bit. +
          +More info: User Guide → Reusing Contents → Variables

          MarkBind has a powerful <include> mechanism which allows you to create documents by combining other content fragments. +
          +More info: User Guide → Reusing Contents → Includes

          MarkBind provides a number of components (e.g., expandable panels, tabbed displays, navigation bars, etc.) that you can use to enhance the appearance/behavior of your pages. +
          +More info: User Guide → Using Components

          Support for HTML, JavaScript, CSS

          A MarkBind source file can contain a mixture of HTML, JavaScript, and CSS as a normal web page would. +
          +More info: User Guide → Using HTML, JavaScript, CSS

          MarkBind Vue components and BootStrap

          MarkBind has several core Vue.js components built on the popular BootStrap framework. Much of Bootstrap's features are supported in and out of these components as well.

          Support for Nunjucks

          Nunjucks is a JavaScript based templating tool. Here is a simple example:

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

          • Item 1
          • Item 2
          • Item 3
          • Item 4

          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.

          Adding Pages

          Formatting Contents


            Here is the footnote. Footnotes will appear at the bottom of the page.

            Here's one with multiple blocks.

            Subsequent paragraphs are indented to show that they +belong to the previous footnote.

            Inlines notes are easier to write, since +you don't have to pick an identifier and move down to type the +note.

          1. Here is the footnote. Footnotes will appear at the bottom of the page.

          2. Here's one with multiple blocks.

            Subsequent paragraphs are indented to show that they +belong to the previous footnote.

          3. Inlines notes are easier to write, since +you don't have to pick an identifier and move down to type the +note.

          + + + diff --git a/userGuide/markBindSyntaxOverview.page-vue-render.js b/userGuide/markBindSyntaxOverview.page-vue-render.js new file mode 100644 index 0000000..2290e89 --- /dev/null +++ b/userGuide/markBindSyntaxOverview.page-vue-render.js @@ -0,0 +1,100 @@ + + var pageVueRenderFn = function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',[_c('header',{attrs:{"fixed":""}},[_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/index.html","title":"Home"}},[_c('img',{attrs:{"src":"/images/logo-darkbackground.svg","height":"20"}})])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('form',{staticClass:"navbar-form"},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback,"menu-align-right":""}})],1)])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/index.html"}},[_v("HOME")])]),_v(" "),_c('div',{attrs:{"tags":"environment--ug"}},[_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"sibling-or-child","href":"/userGuide/index.html"}},[_v("USER GUIDE")])])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/showcase.html"}},[_v("SHOWCASE")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/about.html"}},[_v("ABOUT")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_c('span',[_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}})])])])])],1)]),_v(" "),_c('div',{attrs:{"id":"flex-body"}},[_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"site-nav","tag-name":"nav","to":"site-nav"}},[_c('div',{staticClass:"site-nav-top"},[_c('div',{staticClass:"font-weight-bold mb-2",staticStyle:{"font-size":"1.25rem"}},[_v("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tipsAndTricks.html"}},[_v("Tips & Tricks")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/glossary.html"}},[_v("Glossary")])])])])])])],1)],1)]),_v(" "),_c('div',{staticClass:"fixed-header-padding",attrs:{"id":"content-wrapper"}},[_m(0),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_v("\n[_User Guide → MarkBind Syntax Overview_](markBindSyntaxOverview.html)\n")]),_v(" "),_m(1),_v(" "),_m(2),_c('p'),_v(" "),_c('p',[_v("Given below is an overview of the syntax schemes supported by MarkBind.")]),_v(" "),_c('box',[_c('p',[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" Exact usage of various MarkBind syntax is described in separate sections such as "),_c('span',[_c('span',[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_c('em',[_v("User Guide → Formatting Contents")])])])])])]),_v(" "),_m(3),_v(" "),_c('p',[_v("MarkBind supports all basic Markdown syntax.")]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Some examples ...")])]},proxy:true}])},[_v(" "),_c('div',[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("### Heading level 3")]),_v("\n")]),_c('span',[_v("...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("###### Heading level 6")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('h3',{attrs:{"id":"heading-level-3"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-3"}}),_v("Heading level 3"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-3","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("...")]),_v(" "),_c('h6',{attrs:{"id":"heading-level-6"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-6"}}),_v("Heading level 6"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-6","onclick":"event.stopPropagation()"}})])])],1)])]),_v(" "),_c('div',[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**Bold**")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_Italic_")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__"),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_Bold and Italic"),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__"),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_, `Inline Code`")])])])]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('strong',[_v("Bold")]),_v(", "),_c('em',[_v("Italic")]),_v(", "),_c('em',[_c('strong',[_v("Bold and Italic")])]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Inline Code")])])])],1)])]),_v(" "),_c('div',[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("MarkBind home is at ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("here")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org")]),_v(").\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("MarkBind home is at "),_c('a',{attrs:{"href":"https://markbind.org"}},[_v("here")]),_v(".")])])],1)])])]),_v(" "),_m(4),_v(" "),_c('p',[_v("MarkBind supports additional Markdown features provided by Github-Flavored Markdown (GFMD).")]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Some examples ...")])]},proxy:true}])},[_v(" "),_c('div',[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```xml")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" goo")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])],1)])]),_v(" "),_c('div',[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" [ ] Item 1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" -")]),_v(" [ ] Sub item 1.1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" -")]),_v(" [x] Sub item 1.2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" [x] Item 2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" [ ] Item 3\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ul',{staticClass:"contains-task-list"},[_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"type":"checkbox"}}),_v(" Item 1\n"),_c('ul',{staticClass:"contains-task-list"},[_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"type":"checkbox"}}),_v(" Sub item 1.1")]),_v(" "),_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"checked":"","type":"checkbox"}}),_v(" Sub item 1.2")])])]),_v(" "),_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"checked":"","type":"checkbox"}}),_v(" Item 2")]),_v(" "),_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"type":"checkbox"}}),_v(" Item 3")])])])],1)])]),_v(" "),_c('div',[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v(":+1: :exclamation: :x: :construction:\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("👍 ❗️ ❌ 🚧")])])],1)])])]),_v(" "),_m(5),_v(" "),_c('p',[_v("MarkBind adds several Markdown-like features on top of GFMD.")]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Some examples ...")])]},proxy:true}])},[_v(" "),_c('div',[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("****")]),_v("Super Bold"),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("****")]),_v(", !!Underline!!, ==Highlight==, %%Dim%%, ++Large++, --Small--, Super^script^, Sub~script~\n")]),_c('span',[_v("->Center-align<-\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('strong',[_c('strong',[_v("Super Bold")])]),_v(", "),_c('span',{staticClass:"underline"},[_v("Underline")]),_v(", "),_c('mark',[_v("Highlight")]),_v(", "),_c('span',{staticClass:"dimmed"},[_v("Dim")]),_v(", "),_c('span',{staticClass:"large"},[_v("Large")]),_v(", "),_c('span',{staticClass:"small"},[_v("Small")]),_v(", Super"),_c('sup',[_v("script")]),_v(", Sub"),_c('sub',[_v("script")])]),_c('div',{staticClass:"text-center"},[_v("Center-align")]),_c('p')])],1)])]),_v(" "),_c('div',[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" ( ) Item 1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" ( ) Item 2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" (x) Item 3\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ul',{staticClass:"radio-list",attrs:{"radio-group":"e5b87"}},[_c('li',{staticClass:"radio-list-item"},[_c('label',[_c('input',{staticClass:"radio-list-input",attrs:{"name":"e5b87","type":"radio"}}),_v(" Item 1")])]),_v(" "),_c('li',{staticClass:"radio-list-item"},[_c('label',[_c('input',{staticClass:"radio-list-input",attrs:{"name":"e5b87","type":"radio"}}),_v(" Item 2")])]),_v(" "),_c('li',{staticClass:"radio-list-item"},[_c('label',[_c('input',{staticClass:"radio-list-input",attrs:{"checked":"","name":"e5b87","type":"radio"}}),_v(" Item 3")])])])])],1)])]),_v(" "),_c('div',[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**Normal footnotes:**")]),_v("\n")]),_c('span',[_v("Here is a footnote reference,[^1] and another.[^longnote]\n")]),_c('span',[_v("\n")]),_c('span',[_v("["),_c('span',{pre:true,attrs:{"class":"hljs-symbol"}},[_v("^1")]),_v("]: "),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("Here is the footnote. Footnotes will appear at the bottom of the page.")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("["),_c('span',{pre:true,attrs:{"class":"hljs-symbol"}},[_v("^longnote")]),_v("]: "),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("Here's one with multiple blocks.")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" Subsequent paragraphs are indented to show that they")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("belong to the previous footnote.")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**Inline footnotes:**")]),_v("\n")]),_c('span',[_v("Here is an inline note.^[Inlines notes are easier to write, since\n")]),_c('span',[_v("you don't have to pick an identifier and move down to type the\n")]),_c('span',[_v("note.]\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('strong',[_v("Normal footnotes:")]),_v("\nHere is a footnote reference,"),_c('trigger',{attrs:{"for":"pop:footnotefn-19-1"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-19-1"}},[_v("[1]")])])]),_v(" and another."),_c('trigger',{attrs:{"for":"pop:footnotefn-19-2"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-19-2"}},[_v("[2]")])])])],1),_v(" "),_c('p',[_c('strong',[_v("Inline footnotes:")]),_v("\nHere is an inline note."),_c('trigger',{attrs:{"for":"pop:footnotefn-19-3"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-19-3"}},[_v("[3]")])])])],1)])],1)])])]),_v(" "),_m(6),_v(" "),_c('p',[_v("Given below are some examples of custom syntax added by MarkBind.")]),_v(" "),_m(7),_v(" "),_m(8),_v(" "),_c('br'),_v(" "),_m(9),_v(" "),_m(10),_v(" "),_c('br'),_v(" "),_m(11),_v(" "),_m(12),_v(" "),_c('br'),_v(" "),_m(13),_v(" "),_m(14),_v(" "),_m(15),_v(" "),_c('br'),_v(" "),_m(16),_v(" "),_m(17),_v(" "),_m(18),_v(" "),_m(19),_v(" "),_m(20),_m(21),_v(" "),_c('box',[_c('ul',[_c('li',[_v("Item 1")]),_v(" "),_c('li',[_v("Item 2")]),_v(" "),_c('li',[_v("Item 3")]),_v(" "),_c('li',[_v("Item 4")])])]),_v(" "),_m(22),_v(" "),_m(23),_v(" "),_c('br'),_c('hr',{staticClass:"footnotes-sep"}),_v(" "),_c('section',{staticClass:"footnotes"},[_c('ol',{staticClass:"footnotes-list"},[_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"id":"pop:footnotefn-19-1","data-mb-component-type":"popover"}},[_m(24)]),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"id":"pop:footnotefn-19-2","data-mb-component-type":"popover"}},[_m(25)]),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"id":"pop:footnotefn-19-3","data-mb-component-type":"popover"}},[_m(26)]),_v(" "),_m(27),_v(" "),_m(28),_v(" "),_m(29)])]),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})],1),_v(" "),_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"})])],1),_v(" "),_m(30)])} +}; + var pageVueStaticRenderFns = [function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}},[_v("MarkBind Syntax Overview")])])} +},function anonymous( +) { +with(this){return _c('h1',{attrs:{"id":"markbind-syntax-overview"}},[_c('span',{staticClass:"anchor",attrs:{"id":"markbind-syntax-overview"}}),_v("MarkBind Syntax Overview"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#markbind-syntax-overview","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p',[_c('strong',[_v("A MarkBind source file may contain a mix of several popular syntax schemes")]),_v(" 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.\n")])])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"support-for-markdown"}},[_c('span',{staticClass:"anchor",attrs:{"id":"support-for-markdown"}}),_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-check-circle",attrs:{"aria-hidden":"true"}})]),_v(" Support for Markdown"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#support-for-markdown","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"support-for-gfmd"}},[_c('span',{staticClass:"anchor",attrs:{"id":"support-for-gfmd"}}),_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-check-circle",attrs:{"aria-hidden":"true"}})]),_v(" Support for GFMD"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#support-for-gfmd","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"markbind-extensions-to-markdown"}},[_c('span',{staticClass:"anchor",attrs:{"id":"markbind-extensions-to-markdown"}}),_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-check-circle",attrs:{"aria-hidden":"true"}})]),_v(" MarkBind Extensions to Markdown"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#markbind-extensions-to-markdown","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"markbind-custom-syntax"}},[_c('span',{staticClass:"anchor",attrs:{"id":"markbind-custom-syntax"}}),_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-check-circle",attrs:{"aria-hidden":"true"}})]),_v(" MarkBind Custom Syntax"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#markbind-custom-syntax","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('blockquote',[_c('span',[_c('strong',[_v("Nunjucks "),_c('a',{attrs:{"href":"https://mozilla.github.io/nunjucks/templating.html#set"}},[_v("variables")]),_v(" are ideal for reusing small bits of code")]),_v(" in multiple places; you can define a variable to represent the code bit in question and reuse it anywhere in the site by referring to the variable instead of duplicating the code bit.\n")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_v("\nMore info: "),_c('span',[_c('span',[_c('a',{attrs:{"href":"/userGuide/reusingContents.html#variables"}},[_c('em',[_v("User Guide → Reusing Contents → Variables")])])])])])} +},function anonymous( +) { +with(this){return _c('blockquote',[_c('span',[_c('strong',[_v("MarkBind has a powerful "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" mechanism")]),_v(" which allows you to create documents by combining other content fragments.\n")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_v("\nMore info: "),_c('span',[_c('span',[_c('a',{attrs:{"href":"/userGuide/reusingContents.html#includes"}},[_c('em',[_v("User Guide → Reusing Contents → Includes")])])])])])} +},function anonymous( +) { +with(this){return _c('blockquote',[_c('span',[_c('strong',[_v("MarkBind provides a number of components")]),_v(" (e.g., expandable panels, tabbed displays, navigation bars, etc.) that you can use to enhance the appearance/behavior of your pages.\n")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_v("\nMore info: "),_c('span',[_c('span',[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_c('em',[_v("User Guide → Using Components")])])])])])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"support-for-html-javascript-css"}},[_c('span',{staticClass:"anchor",attrs:{"id":"support-for-html-javascript-css"}}),_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-check-circle",attrs:{"aria-hidden":"true"}})]),_v(" Support for HTML, JavaScript, CSS"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#support-for-html-javascript-css","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('blockquote',[_c('span',[_c('strong',[_v("A MarkBind source file can contain a mixture of HTML, JavaScript, and CSS")]),_v(" as a normal web page would.\n")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_v("\nMore info: "),_c('span',[_c('span',[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_c('em',[_v("User Guide → Using HTML, JavaScript, CSS")])])])])])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"markbind-vue-components-and-bootstrap"}},[_c('span',{staticClass:"anchor",attrs:{"id":"markbind-vue-components-and-bootstrap"}}),_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-check-circle",attrs:{"aria-hidden":"true"}})]),_v(" MarkBind Vue components and BootStrap"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#markbind-vue-components-and-bootstrap","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("MarkBind has several core Vue.js components built on the popular "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/4.2/getting-started/introduction/"}},[_v("BootStrap")]),_v(" framework. Much of Bootstrap's features are supported in and out of these components as well.")])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"support-for-nunjucks"}},[_c('span',{staticClass:"anchor",attrs:{"id":"support-for-nunjucks"}}),_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-check-circle",attrs:{"aria-hidden":"true"}})]),_v(" Support for Nunjucks"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#support-for-nunjucks","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('a',{attrs:{"href":"https://mozilla.github.io/nunjucks/"}},[_v("Nunjucks")]),_v(" is a JavaScript based templating tool. Here is a simple example:")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("ul")]),_v(">")]),_v("\n")]),_c('span',[_v("{% for item in [1, 2, 3, 4] %}\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("Item {{ item }}"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("{% endfor %}\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"fas fa-arrow-down",attrs:{"aria-hidden":"true"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("As MarkBind uses Nunjucks behind the scene, "),_c('strong',[_v("MarkBind is generally compatible with Nunjucks")]),_v(", which means you can use Nunjucks templating in your source files. Note that "),_c('mark',[_v("the code is processed for Nunjucks syntax before the rest of the MarkBind syntax are processed")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-left"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/addingPages.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Adding Pages")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-right"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/formattingContents.html"}},[_c('span',[_c('span',[_v("Formatting Contents")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} +},function anonymous( +) { +with(this){return _c('span',{attrs:{"data-mb-slot-name":"content"}},[_c('div',[_c('p',[_v("Here is the footnote. Footnotes will appear at the bottom of the page.")])])])} +},function anonymous( +) { +with(this){return _c('span',{attrs:{"data-mb-slot-name":"content"}},[_c('div',[_c('p',[_v("Here's one with multiple blocks.")]),_v(" "),_c('p',[_v("Subsequent paragraphs are indented to show that they\nbelong to the previous footnote.")])])])} +},function anonymous( +) { +with(this){return _c('span',{attrs:{"data-mb-slot-name":"content"}},[_c('div',[_c('p',[_v("Inlines notes are easier to write, since\nyou don't have to pick an identifier and move down to type the\nnote.")])])])} +},function anonymous( +) { +with(this){return _c('li',{staticClass:"footnote-item",attrs:{"id":"fn-19-1"}},[_c('p',[_v("Here is the footnote. Footnotes will appear at the bottom of the page.")])])} +},function anonymous( +) { +with(this){return _c('li',{staticClass:"footnote-item",attrs:{"id":"fn-19-2"}},[_c('p',[_v("Here's one with multiple blocks.")]),_v(" "),_c('p',[_v("Subsequent paragraphs are indented to show that they\nbelong to the previous footnote.")])])} +},function anonymous( +) { +with(this){return _c('li',{staticClass:"footnote-item",attrs:{"id":"fn-19-3"}},[_c('p',[_v("Inlines notes are easier to write, since\nyou don't have to pick an identifier and move down to type the\nnote.")])])} +},function anonymous( +) { +with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 3.1.1")]),_v(" on Sat, 22 Jan 2022, 16:49:34 UTC]")]),_c('br'),_v(" "),_c('small',[_v("This site is powered by "),_c('a',{attrs:{"href":"https://www.netlify.com/"}},[_v("Netlify")]),_v(".")])])])])} +}]; + \ No newline at end of file diff --git a/userGuide/readerFacingFeatures.html b/userGuide/readerFacingFeatures.html new file mode 100644 index 0000000..426821f --- /dev/null +++ b/userGuide/readerFacingFeatures.html @@ -0,0 +1,93 @@ + + + + + + + + MarkBind - User Guide: Reader-Facing Features + + + + + + + + + + + + + + + + +

          Reader-Facing Features

          Headings

          Heading level 3

          ...

          Heading level 6

          details...

          Text Styles

          Bold, Italic, Bold and Italic, Inline Code Strike through, Super Bold, Underline, Highlight, Dim, Large, Small, Superscript, Subscript

          details...

          Blockquotes

          Blockquote, first paragraph

          Second paragraph

          Nested blockquote +

          details...

          Lists
          1. Item 1 +
            1. Sub item 1.1
            2. Sub item 1.2
          • Item 2 +
            • item 2.1
          • Item 3
          • Item 4

          details...

          Code
          <foo>
+  <bar type="name">goo</bar>
+</foo>
+

          Syntax coloring for inline code: <bar type="name">goo</bar> too!

          details...

          Horizontal Rules

          details...

          MarkBind home is at here. +

          details...

          Footnotes
          +1 + 1 = 2 ^[Math] +

          details...

          Images

          details...

          Classes, Attributes & Identifiers
          +* Apply to the list item itself like so {.text-success #list-item-id} + * Curly groups after newlines apply to the closest nested list {.text-danger} +{.bg-light} +* Curly groups two lines after the last line apply to the top most list + +{.alert-info} +

          details...

          Tables
          Animal Trainable? Price Remarks
          Ants no 5
          Bees no 20
          Cats yes 100

          details...

          Emoji

          👍 ❗️ ❌ 🚧 +

          details...

          Icons

          details...

          Embeds

          Embedded YouTube video:

          Embedded slide deck:

          details...

          Dates

          details...

          Math Formulae

          Solve the following simultaneous equations:

          3x+y=11 3x + y = 11 (1)
          2x3+2y3=8\frac{2x}{3} + \frac{2y}{3} = 8(2)

          Euler's equation eiπ+1=0 e^{i\pi}+1=0 is a beautiful equation.

          details...

          Badges

          Primary Success

          Feature Y stable

          details...

          Boxes
          + default +
          + info +
          + warning +
          + success +
          + important +
          + wrong +
          + tip +
          + definition +

          details...

          Panels

          minimal type panel

          seamless type panel

          info type panel

          + ... +

          danger type panel

          warning type panel

          success type panel

          details...

          Tabs
            First tab
            + Content of the first tab +
            Second tab
            + Contents of the second tab +
            Third tab group 📺
            Stars ⭐️
            + Some stuff about stars ... +
            Moon
            + Some stuff about the moon ... +

            details...

            Pictures
            Logo + MarkBind Logo +

            details...

            Thumbnails

            details...

            Diagrams

            Sequence Diagram:

            Use Case Diagram:

            Class Diagram:

            Activity Diagram:

            Component Diagram:

            State Diagram:

            Object Diagram:

            Gantt Diagram:

            Entity Relation Diagram:

            Ditaa Diagram:

            Archimate Diagram:

            details...

            Tooltips

            Hover An explanation, supports simple Markdownhere to see a tooltip. +

            details...

            Popovers

            Hover over the keyword to see the popover.

            Popover header

            description 👍

            details...

            Modals

            Hover here to open a modal.

            details...

            details...

            Search Bars

              details...

              details...

              details...

              Page Navigation Menus

              You can see an example of a Page Navigation Bar on the right side of this page. +

              details...

              Questions and Quizzes

              + Click start to begin +

              0 questions

              details...

                Here is the footnote. Footnotes will appear at the bottom of the page.

                Here's one with multiple blocks.

                Subsequent paragraphs are indented to show that they +belong to the previous footnote.

                Inlines notes are easier to write, since +you don't have to pick an identifier and move down to type the +note.

              1. Here is the footnote. Footnotes will appear at the bottom of the page.

              2. Here's one with multiple blocks.

                Subsequent paragraphs are indented to show that they +belong to the previous footnote.

              3. Inlines notes are easier to write, since +you don't have to pick an identifier and move down to type the +note.

              + + + diff --git a/userGuide/readerFacingFeatures.page-vue-render.js b/userGuide/readerFacingFeatures.page-vue-render.js new file mode 100644 index 0000000..1a9c69b --- /dev/null +++ b/userGuide/readerFacingFeatures.page-vue-render.js @@ -0,0 +1,127 @@ + + var pageVueRenderFn = function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',[_c('header',{attrs:{"fixed":""}},[_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/index.html","title":"Home"}},[_c('img',{attrs:{"src":"/images/logo-darkbackground.svg","height":"20"}})])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('form',{staticClass:"navbar-form"},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback,"menu-align-right":""}})],1)])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/index.html"}},[_v("HOME")])]),_v(" "),_c('div',{attrs:{"tags":"environment--ug"}},[_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"sibling-or-child","href":"/userGuide/index.html"}},[_v("USER GUIDE")])])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/showcase.html"}},[_v("SHOWCASE")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/about.html"}},[_v("ABOUT")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_c('span',[_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}})])])])])],1)]),_v(" "),_c('div',{attrs:{"id":"flex-body"}},[_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"site-nav","tag-name":"nav","to":"site-nav"}},[_c('div',{staticClass:"site-nav-top"},[_c('div',{staticClass:"font-weight-bold mb-2",staticStyle:{"font-size":"1.25rem"}},[_v("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tipsAndTricks.html"}},[_v("Tips & Tricks")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/glossary.html"}},[_v("Glossary")])])])])])])],1)],1)]),_v(" "),_c('div',{staticClass:"fixed-header-padding",attrs:{"id":"content-wrapper"}},[_m(0),_v(" "),_c('div'),_v(" "),_m(1),_v(" "),_c('box',[_c('div',[_c('h3',{attrs:{"id":"heading-level-3"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-3"}}),_v("Heading level 3"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-3","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("...")]),_v(" "),_c('h6',{attrs:{"id":"heading-level-6"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-6"}}),_v("Heading level 6"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-6","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"headings-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"headings-2"}}),_v("Headings"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#headings-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can prepend the heading text with 1-6 "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("#")]),_v(" characters to indicate headings of levels 1-6.")]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("### Heading level 3")]),_v("\n")]),_c('span',[_v("...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("###### Heading level 6")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('h3',{attrs:{"id":"heading-level-3-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-3-2"}}),_v("Heading level 3"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-3-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("...")]),_v(" "),_c('h6',{attrs:{"id":"heading-level-6-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-6-2"}}),_v("Heading level 6"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-6-2","onclick":"event.stopPropagation()"}})])])],1)])]),_v(" "),_c('p',[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" "),_c('strong',[_v("MarkBind auto-generates anchors for all headings.")]),_c('br'),_v("\nIf the heading text is "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Foo Bar (Goo)")]),_v(", the ID of the generated anchor will be "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("foo-bar-goo")]),_v(" (all lower case, special characters omitted, joined by "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v(").")]),_v(" "),_c('p',[_c('small',[_v("Alternative syntax, more info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/basic-syntax#headings"}},[_v("https://www.markdownguide.org/basic-syntax#headings")])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("### Heading level 3")]),_v("\n")]),_c('span',[_v("...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("###### Heading level 6")]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('h3',{attrs:{"id":"heading-level-3-3"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-3-3"}}),_v("Heading level 3"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-3-3","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("...")]),_v(" "),_c('h6',{attrs:{"id":"heading-level-6-3"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-6-3"}}),_v("Heading level 6"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-6-3","onclick":"event.stopPropagation()"}})])])])])],1),_v(" "),_m(2),_v(" "),_c('box',[_c('div',[_c('p',[_c('strong',[_v("Bold")]),_v(", "),_c('em',[_v("Italic")]),_v(", "),_c('em',[_c('strong',[_v("Bold and Italic")])]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Inline Code")]),_v(" "),_c('s',[_v("Strike through")]),_v(", "),_c('strong',[_c('strong',[_v("Super Bold")])]),_v(", "),_c('span',{staticClass:"underline"},[_v("Underline")]),_v(", "),_c('mark',[_v("Highlight")]),_v(", "),_c('span',{staticClass:"dimmed"},[_v("Dim")]),_v(", "),_c('span',{staticClass:"large"},[_v("Large")]),_v(", "),_c('span',{staticClass:"small"},[_v("Small")]),_v(", Super"),_c('sup',[_v("script")]),_v(", Sub"),_c('sub',[_v("script")])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"text-styles-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"text-styles-2"}}),_v("Text Styles"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#text-styles-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Markdown text styles:")]),_v(" "),_c('span',{attrs:{"id":"main-example-markdown"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**Bold**")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_Italic_")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__"),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_Bold and Italic"),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__"),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_, `Inline Code`")])])])]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('strong',[_v("Bold")]),_v(", "),_c('em',[_v("Italic")]),_v(", "),_c('em',[_c('strong',[_v("Bold and Italic")])]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Inline Code")])])])],1)])]),_v(" "),_c('p',[_v("Additional syntax from GFMD:")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("~~Strike through~~\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('s',[_v("Strike through")])])])],1)]),_v(" "),_c('p',[_v("Syntax added by MarkBind:")]),_v(" "),_c('span',{attrs:{"id":"main-example-markbind"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("****")]),_v("Super Bold"),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("****")]),_v(", !!Underline!!, ==Highlight==, %%Dim%%, ++Large++, --Small--, Super^script^, Sub~script~\n")]),_c('span',[_v("->Center-align<-\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('strong',[_c('strong',[_v("Super Bold")])]),_v(", "),_c('span',{staticClass:"underline"},[_v("Underline")]),_v(", "),_c('mark',[_v("Highlight")]),_v(", "),_c('span',{staticClass:"dimmed"},[_v("Dim")]),_v(", "),_c('span',{staticClass:"large"},[_v("Large")]),_v(", "),_c('span',{staticClass:"small"},[_v("Small")]),_v(", Super"),_c('sup',[_v("script")]),_v(", Sub"),_c('sub',[_v("script")])]),_c('div',{staticClass:"text-center"},[_v("Center-align")]),_c('p')])],1)])]),_v(" "),_c('p',[_c('small',[_v("Alternative syntax: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/basic-syntax#emphasis"}},[_v("https://www.markdownguide.org/basic-syntax#emphasis")])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**Bold**")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_Italic_")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__"),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_Bold and Italic"),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__"),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_, `Inline Code`")])])])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("~~Strike through~~, "),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("****")]),_v("Super Bold"),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("****")]),_v(", !!Underline!!, ==Highlight==, %%Dim%%, ++Large++, --Small--, Super^script^, Sub~script~")])])])]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_c('strong',[_v("Bold")]),_v(", "),_c('em',[_v("Italic")]),_v(", "),_c('em',[_c('strong',[_v("Bold and Italic")])]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Inline Code")]),_v(" "),_c('s',[_v("Strike through")]),_v(", "),_c('strong',[_c('strong',[_v("Super Bold")])]),_v(", "),_c('span',{staticClass:"underline"},[_v("Underline")]),_v(", "),_c('mark',[_v("Highlight")]),_v(", "),_c('span',{staticClass:"dimmed"},[_v("Dim")]),_v(", "),_c('span',{staticClass:"large"},[_v("Large")]),_v(", "),_c('span',{staticClass:"small"},[_v("Small")]),_v(", Super"),_c('sup',[_v("script")]),_v(", Sub"),_c('sub',[_v("script")])])]),_c('p')])])],1),_v(" "),_m(3),_v(" "),_c('box',[_c('div',[_c('blockquote',[_c('p',[_v("Blockquote, first paragraph")]),_v(" "),_c('p',[_v("Second paragraph")]),_v(" "),_c('blockquote',[_c('p',[_v("Nested blockquote\n")])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"blockquotes-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"blockquotes-2"}}),_v("Blockquotes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#blockquotes-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs"}},[_c('span',[_v("Normal text\n")]),_c('span',[_v("> Blockquote, first paragraph\n")]),_c('span',[_v(">\n")]),_c('span',[_v("> Second paragraph\n")]),_c('span',[_v(">> Nested quoteblock\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Normal text")]),_v(" "),_c('blockquote',[_c('p',[_v("Blockquote, first paragraph")]),_v(" "),_c('p',[_v("Second paragraph")]),_v(" "),_c('blockquote',[_c('p',[_v("Nested quoteblock")])])])])],1)]),_v(" "),_c('p',[_v("Alternatively, you can use "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("
              ")]),_v(" tags:")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("Normal text\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("blockquote")]),_v(">")])]),_v("\n")]),_c('span',[_v("Blockquote, first paragraph\n")]),_c('span',[_v("\n")]),_c('span',[_v("Second paragraph\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("blockquote")]),_v(">")])]),_v("\n")]),_c('span',[_v("Nested blockquote\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Normal text")]),_v(" "),_c('blockquote',[_v("\nBlockquote, first paragraph\n"),_c('p',[_v("Second paragraph")]),_v(" "),_c('blockquote',[_v("\nNested blockquote\n")])])])],1)]),_v(" "),_c('p',[_c('small',[_v("More info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/basic-syntax#blockquotes-1"}},[_v("https://www.markdownguide.org/basic-syntax#blockquotes-1")])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("> Blockquote, first paragraph\n")]),_c('span',[_v(">\n")]),_c('span',[_v("> Second paragraph\n")]),_c('span',[_v(">> Nested blockquote\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('blockquote',[_c('p',[_v("Blockquote, first paragraph")]),_v(" "),_c('p',[_v("Second paragraph")]),_v(" "),_c('blockquote',[_c('p',[_v("Nested blockquote\n")])])])]),_c('p')])])],1),_v(" "),_m(4),_v(" "),_c('box',[_c('div',[_c('ol',[_c('li',[_v("Item 1\n"),_c('ol',[_c('li',[_v("Sub item 1.1")]),_v(" "),_c('li',[_v("Sub item 1.2")])])])]),_v(" "),_c('ul',[_c('li',[_v("Item 2\n"),_c('ul',[_c('li',[_v("item 2.1")])])])]),_v(" "),_c('ul',{staticClass:"contains-task-list",attrs:{"radio-group":"890e1"}},[_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"type":"checkbox"}}),_v(" Item 3")]),_v(" "),_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"checked":"","type":"checkbox"}}),_v(" Item 4")]),_v(" "),_c('li',{staticClass:"radio-list-item"},[_c('label',[_c('input',{staticClass:"radio-list-input",attrs:{"name":"890e1","type":"radio"}}),_v(" Item 5\n")])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"lists-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"lists-2"}}),_v("Lists"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#lists-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Unordered lists:")])])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Sub item 1.1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Sub item 1.2"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" Second line")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" * Sub item 1.2.1")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("* Item 2")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("* Item 3")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ul',[_c('li',[_v("Item 1\n"),_c('ul',[_c('li',[_v("Sub item 1.1")]),_v(" "),_c('li',[_v("Sub item 1.2"),_c('br'),_v("\nSecond line\n"),_c('ul',[_c('li',[_v("Sub item 1.2.1")])])])])]),_v(" "),_c('li',[_v("Item 2")]),_v(" "),_c('li',[_v("Item 3")])])])],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Ordered lists:")])])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" 1.")]),_v(" Sub item 1.1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" 1.")]),_v(" Sub item 1.2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 3\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ol',[_c('li',[_v("Item 1\n"),_c('ol',[_c('li',[_v("Sub item 1.1")]),_v(" "),_c('li',[_v("Sub item 1.2")])])]),_v(" "),_c('li',[_v("Item 2")]),_v(" "),_c('li',[_v("Item 3")])])])],1)]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_v("\nYou can also start an ordered list at a particular number by changing the\n"),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"popover"}},[_v("\nfirst number\n"),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_c('div',{staticStyle:{"text-align":"center","margin-bottom":"5px"}},[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])],1),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("10.")]),_v(" Item 1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" 1.")]),_v(" Sub item 1.1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" 1.")]),_v(" Sub item 1.2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 2\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ol',{staticClass:"pl-0 ml-0",attrs:{"start":"10"}},[_c('li',[_v("Item 1")]),_v(" "),_c('li',[_v("Sub item 1.1")]),_v(" "),_c('li',[_v("Sub item 1.2")]),_v(" "),_c('li',[_v("Item 2")])])])],1)])])]),_v("!\n")]),_v(" "),_c('p',[_c('small',[_v("More info on above list types: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/basic-syntax#lists"}},[_v("https://www.markdownguide.org/basic-syntax#lists")])])]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Task lists")])]),_v(" (from GFMD):")]),_v(" "),_c('span',{attrs:{"id":"main-example-gfmd"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" [ ] Item 1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" -")]),_v(" [ ] Sub item 1.1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" -")]),_v(" [x] Sub item 1.2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" [x] Item 2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" [ ] Item 3\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ul',{staticClass:"contains-task-list"},[_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"type":"checkbox"}}),_v(" Item 1\n"),_c('ul',{staticClass:"contains-task-list"},[_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"type":"checkbox"}}),_v(" Sub item 1.1")]),_v(" "),_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"checked":"","type":"checkbox"}}),_v(" Sub item 1.2")])])]),_v(" "),_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"checked":"","type":"checkbox"}}),_v(" Item 2")]),_v(" "),_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"type":"checkbox"}}),_v(" Item 3")])])])],1)])]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Radio-button lists:")])])]),_v(" "),_c('div',{attrs:{"id":"main-example-markbind"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" ( ) Item 1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" ( ) Item 2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" (x) Item 3\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ul',{staticClass:"radio-list",attrs:{"radio-group":"e5b87"}},[_c('li',{staticClass:"radio-list-item"},[_c('label',[_c('input',{staticClass:"radio-list-input",attrs:{"name":"e5b87","type":"radio"}}),_v(" Item 1")])]),_v(" "),_c('li',{staticClass:"radio-list-item"},[_c('label',[_c('input',{staticClass:"radio-list-input",attrs:{"name":"e5b87","type":"radio"}}),_v(" Item 2")])]),_v(" "),_c('li',{staticClass:"radio-list-item"},[_c('label',[_c('input',{staticClass:"radio-list-input",attrs:{"checked":"","name":"e5b87","type":"radio"}}),_v(" Item 3")])])])])],1)])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" 1.")]),_v(" Sub item 1.1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" 1.")]),_v(" Sub item 1.2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" item 2.1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" [ ] Item 3\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" [x] Item 4\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" ( ) Item 5\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('ol',[_c('li',[_v("Item 1\n"),_c('ol',[_c('li',[_v("Sub item 1.1")]),_v(" "),_c('li',[_v("Sub item 1.2")])])])]),_v(" "),_c('ul',[_c('li',[_v("Item 2\n"),_c('ul',[_c('li',[_v("item 2.1")])])])]),_v(" "),_c('ul',{staticClass:"contains-task-list",attrs:{"radio-group":"890e1"}},[_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"type":"checkbox"}}),_v(" Item 3")]),_v(" "),_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"checked":"","type":"checkbox"}}),_v(" Item 4")]),_v(" "),_c('li',{staticClass:"radio-list-item"},[_c('label',[_c('input',{staticClass:"radio-list-input",attrs:{"name":"890e1","type":"radio"}}),_v(" Item 5\n")])])])])],1)])],1),_v(" "),_m(5),_v(" "),_c('box',[_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])]),_c('p',[_v("Syntax coloring for inline code: "),_c('code',{pre:true,attrs:{"class":"hljs inline xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v(" too!")])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"code-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"code-2"}}),_v("Code"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#code-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('h4',{attrs:{"id":"themes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"themes"}}),_v("Themes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#themes","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("MarkBind can present formatted code blocks, be it fenced or inline, with either "),_c('strong',[_v("light")]),_v(" or "),_c('strong',[_v("dark")]),_v(" themes. The default is dark.")]),_v(" "),_c('p',[_v("Refer "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#style"}},[_v("here")]),_v(" for configuring MarkBind to use a specific theme for the code blocks.")]),_v(" "),_c('h4',{attrs:{"id":"fenced-code"}},[_c('span',{staticClass:"anchor",attrs:{"id":"fenced-code"}}),_v("Fenced Code"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#fenced-code","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("MarkBind provides several features, some of which are added on top of the existing functionality of Markdown's "),_c('em',[_v("fenced code blocks")]),_v(".")]),_v(" "),_c('p',[_c('small',[_v("More info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/extended-syntax#fenced-code-blocks"}},[_v("https://www.markdownguide.org/extended-syntax#fenced-code-blocks")])])]),_v(" "),_c('p',[_v("Features:")]),_v(" "),_c('ul',[_c('li',[_v("Syntax coloring")]),_v(" "),_c('li',[_v("Line numbering")]),_v(" "),_c('li',[_v("Line highlighting")]),_v(" "),_c('li',[_v("Code block headers")])]),_v(" "),_c('h5',{attrs:{"id":"syntax-coloring"}},[_c('span',{staticClass:"anchor",attrs:{"id":"syntax-coloring"}}),_v("Syntax coloring"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#syntax-coloring","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("To enable syntax coloring, specify a language next to the backticks before the fenced code block.")]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```xml")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" goo")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])],1)])]),_v(" "),_c('h5',{attrs:{"id":"line-numbering"}},[_c('span',{staticClass:"anchor",attrs:{"id":"line-numbering"}}),_v("Line numbering"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#line-numbering","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Line numbers are provided by default. To hide line numbers, add the class "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-line-numbers")]),_v(" to the code block as below")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```xml {.no-line-numbers}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" goo")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])],1)]),_v(" "),_c('p',[_v("You can have your line numbers start with a value other than "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("1")]),_v(" with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start-from")]),_v(" attribute.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```js {start-from=6}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("function add(a, b) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return a + b;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pre',[_c('code',{pre:true,attrs:{"style":"counter-reset: line 5;","class":"hljs js"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("function")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("add")]),_v("("),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("a, b")]),_v(") ")]),_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" a + b;\n")]),_c('span',[_v("}\n")])])])])],1)]),_v(" "),_c('h5',{attrs:{"id":"line-highlighting"}},[_c('span',{staticClass:"anchor",attrs:{"id":"line-highlighting"}}),_v("Line highlighting"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#line-highlighting","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("highlight-lines")]),_v(" attribute to add highlighting to your code block. Refer to the example code block\nbelow for a visual demonstration of all the possible ways of highlighting a code block.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```java {highlight-lines=\"1[:],3['Inventory'],4['It\\'s designed'],5,6[8:18],8[0::2],12[:]-14,16-18,20[12:]-22,24[1::]-26\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("import java.util.List;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("// Inventory is a class that stores inventory items in a list.")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("// It's designed as a thin wrapper on the List interface.")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("public class Inventory {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" private List items;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public int getItemCount(){")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.size();")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public bool isEmpty() {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.isEmpty();")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public Item getItem(idx: int) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.get(idx);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public void addItem(item: Item) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.add(item);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public void removeItem(item: Item) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.remove(item);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs java"}},[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("import")]),_v(" java.util.List;\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_c('span',[_v("// "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("Inventory")]),_v(" is a class that stores inventory items in a list.")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_c('span',[_v("// "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("It's designed")]),_v(" as a thin wrapper on the List interface.")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-class"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("class")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("Inventory")]),_v(" ")]),_v("{")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("private")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("List")]),_v(" items;\n")])]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword highlighted"}},[_v("public")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")]),_c('span',{pre:true,attrs:{"class":"hljs-keyword highlighted"}},[_v("int")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("getItemCount")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("()")])]),_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.size();\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" bool "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("isEmpty")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("()")]),_v(" ")]),_v("{\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.isEmpty();\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" }\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" Item "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("getItem")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("(idx: "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("int")]),_v(")")]),_v(" ")]),_v("{")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.get(idx);")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("}")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("void")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title highlighted"}},[_v("addItem")]),_c('span',{pre:true,attrs:{"class":"hljs-params highlighted"}},[_v("(item: Item)")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")])]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("{")]),_v("\n")])]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.add(item);")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("}")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword highlighted"}},[_v("void")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")]),_c('span',{pre:true,attrs:{"class":"hljs-title highlighted"}},[_v("removeItem")]),_c('span',{pre:true,attrs:{"class":"hljs-params highlighted"}},[_v("(item: Item)")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")])]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("{")]),_v("\n")])]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.remove(item);")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("}")]),_v("\n")]),_c('span',[_v("}\n")])])])])],1)]),_v(" "),_c('p',[_v("The value of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("highlight-lines")]),_v(" is composed of "),_c('em',[_v("highlight rules")]),_v(", separated by commas.\nThese rules dictate where and how MarkBind should highlight your code block.")]),_v(" "),_c('p',[_v("You can specify the highlight rules in many different ways, each is detailed as follows:")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Format")]),_v(" "),_c('th',[_v("Example")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_c('strong',[_v("Full text highlight")]),_c('br'),_v("Highlights the entirety of the text portion of the line")]),_v(" "),_c('td',[_v("The line numbers as-is (subject to the starting line number set in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start-from")]),_v(").")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("3")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("5")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Substring highlight")]),_c('br'),_v("Highlights "),_c('em',[_v("all")]),_v(" occurrences of a substring in the line")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineNumber[part]")]),_c('br'),_c('br'),_c('em',[_v("Limitations")]),_v(": "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("part")]),_v(" must be wrapped in quotes. If "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("part")]),_v(" contains a quote, escape it with a backslash ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\\")]),_v(").")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("3['Inventory']")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("4['It\\'s designed']")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Character-bounded highlight")]),_c('br'),_v("Highlights a specific range of characters in the line")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineNumber[start:end]")]),_v(", highlights from character position "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start")]),_v(" up to (but not including) "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("end")]),_v("."),_c('br'),_c('br'),_v("Character positions start from "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0")]),_v(" as the first non-whitespace character, upwards."),_c('br'),_c('br'),_v("Omit either "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start")]),_v("/"),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("end")]),_v(" to highlight from the start / up to the end, respectively.")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("19[1:5]")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("30[10:]")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("35[:20]")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Word-bounded highlight")]),_c('br'),_v("Highlights a specific range of words in the line")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineNumber[start::end]")]),_v(", highlights from word position "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start")]),_v(" up to (but not including) "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("end")]),_v("."),_c('br'),_c('br'),_v("Word positions start from "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0")]),_v(" as the first word (sequence of non-whitespace characters), upwards."),_c('br'),_c('br'),_v("Omit either "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start")]),_v("/"),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("end")]),_v(" to highlight from the start / up to the end, respectively.")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("5[2::4]")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("9[1::]")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("11[::5]")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Full line highlight")]),_c('br'),_v("Highlights the entirety of the line")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineNumber[:]")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("7[:]")])])])])])]),_c('p',[_v("Not only a single line, MarkBind is also capable of highlighting ranges of lines in various ways. In general, the syntax\nfor range highlighting consists of two single line highlight rules as listed above joined by a dash ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v(").")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Format")]),_v(" "),_c('th',[_v("Example")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_c('strong',[_v("Ranged full text highlight")]),_c('br'),_v("Highlights from the first non-whitespace character to the last non-whitespace character")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart-lineEnd")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("2-4")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Ranged full line highlight")]),_c('br'),_v("Like ranged full text highlight, but highlights the entirety of the lines")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart[:]-lineEnd")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart-lineEnd[:]")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("1[:]-5")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("10-12[:]")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Ranged character-bounded highlight")]),_c('br'),_v("Highlights the text portion of the lines within the range, but starts/ends at an arbitrary character")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart[start:]-lineEnd")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart-lineEnd[:end]")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("3[2:]-7")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("4-9[:17]")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Ranged word-bounded highlight")]),_c('br'),_v("Like ranged character-bounded highlight, but starts/ends at an arbitrary word")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart[start::]-lineEnd")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart-lineEnd[::end]")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("16[1::]-20")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("22-24[::3]")])])])])])]),_c('h5',{attrs:{"id":"heading"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading"}}),_v("Heading"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("To add a heading, add the attribute "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("heading")]),_v(" with the heading text as the value, as shown below.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```xml {heading=\"Heading title\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" goo")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Heading title")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Heading title","class":"hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])])])],1)]),_v(" "),_c('p',[_v("Headings support inline Markdown, except for "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Inline Code")]),_v(" and "),_c('span',{staticClass:"dimmed"},[_v("Dim")]),_v(" text styles.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```{heading=\"**Bold**, _Italic_, ___Bold and Italic___, ~~Strike through~~, ****Super Bold****, !!Underline!!, ==Highlight==, :+1: :exclamation: :x: :construction:
              We support page breaks\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading inline-markdown-heading"},[_c('span',[_c('strong',[_v("Bold")]),_v(", "),_c('em',[_v("Italic")]),_v(", "),_c('em',[_c('strong',[_v("Bold and Italic")])]),_v(", "),_c('s',[_v("Strike through")]),_v(", "),_c('strong',[_c('strong',[_v("Super Bold")])]),_v(", "),_c('span',{staticClass:"underline"},[_v("Underline")]),_v(", "),_c('mark',[_v("Highlight")]),_v(", 👍 ❗️ ❌ 🚧"),_c('br'),_v("We support page breaks")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"**Bold**, _Italic_, ___Bold and Italic___, ~~Strike through~~, ****Super Bold****, !!Underline!!, ==Highlight==, :+1: :exclamation: :x: :construction:
              We support page breaks","class":"hljs"}},[_c('span',[_v("\n")])])])])])])],1)]),_v(" "),_c('h5',{attrs:{"id":"using-multiple-features"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-multiple-features"}}),_v("Using multiple features"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-multiple-features","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can also use multiple features together, as shown below.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```xml {highlight-lines=\"2\" heading=\"Heading title\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" goo")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Heading title")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Heading title","class":"hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])])])],1)]),_v(" "),_c('h5',{attrs:{"id":"copy-button"}},[_c('span',{staticClass:"anchor",attrs:{"id":"copy-button"}}),_v("Copy button"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#copy-button","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("A "),_c('em',[_v("copy")]),_v(" button can be added to code blocks using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockCopyButtons")]),_v(" plugin:")]),_v(" "),_c('panel',{attrs:{"type":"seamless","popup-url":"usingPlugins.html#plugin-codeblockcopybuttons"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("User Guide: Using Plugins → Plugin: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockCopyButtons")])])])]},proxy:true}])},[_v(" "),_c('div',[_c('h3',{attrs:{"id":"plugin-codeblockcopybuttons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugin-codeblockcopybuttons"}}),_v("Plugin: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockCopyButtons")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-codeblockcopybuttons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("This plugin adds a "),_c('em',[_v("copy")]),_v(" button to fenced code blocks so that readers can copy the code easily.")]),_v(" "),_c('p',[_v("To enable it, simply add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockCopyButtons")]),_v(" to your site's plugins.")]),_v(" "),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugins\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"codeBlockCopyButtons\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v("}\n")])])])])]),_c('p',[_v("This is what it'll look like once added:")]),_v(" "),_c('pic',{attrs:{"src":"/images/copyCode.png","width":"750","alt":"copyCode"}})],1)]),_v(" "),_c('br'),_v(" "),_c('h5',{attrs:{"id":"wrap-text-button"}},[_c('span',{staticClass:"anchor",attrs:{"id":"wrap-text-button"}}),_v("Wrap text button"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#wrap-text-button","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("A "),_c('em',[_v("wrap text")]),_v(" button can be added to code blocks using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockWrapButtons")]),_v(" plugin:")]),_v(" "),_c('panel',{attrs:{"type":"seamless","popup-url":"usingPlugins.html#plugin-codeblockwrapbuttons"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("User Guide: Using Plugins → Plugin: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockWrapButtons")])])])]},proxy:true}])},[_v(" "),_c('div',[_c('h3',{attrs:{"id":"plugin-codeblockwrapbuttons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugin-codeblockwrapbuttons"}}),_v("Plugin: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockWrapButtons")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-codeblockwrapbuttons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("This plugin adds a "),_c('em',[_v("wrap text")]),_v(" button to fenced code blocks so that readers can read long lines of code without scrolling sideways.")]),_v(" "),_c('p',[_v("To enable it, simply add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockWrapButtons")]),_v(" to your site's plugins.")]),_v(" "),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugins\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"codeBlockWrapButtons\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v("}\n")])])])])]),_c('p',[_v("This is what it'll look like once added:")]),_v(" "),_c('pic',{attrs:{"src":"/images/wrapCodeOff.png","width":"750","alt":"wrapCodeOff"}}),_v(" "),_c('p',[_v("Clicking the "),_c('em',[_v("wrap text")]),_v(" button will result in the following:")]),_v(" "),_c('pic',{attrs:{"src":"/images/wrapCodeOn.png","width":"750","alt":"wrapCodeOn"}}),_v(" "),_c('p',[_v("In case a single long word is encountered, it will be split across multiple lines similar to the following:")]),_v(" "),_c('pic',{attrs:{"src":"/images/wrapCodeOnWordBreak.png","width":"750","alt":"wrapCodeOnWordBreak"}})],1)]),_v(" "),_c('br'),_v(" "),_c('h4',{attrs:{"id":"inline-code"}},[_c('span',{staticClass:"anchor",attrs:{"id":"inline-code"}}),_v("Inline Code"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#inline-code","onclick":"event.stopPropagation()"}})]),_v(" "),_c('h5',{attrs:{"id":"syntax-coloring-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"syntax-coloring-2"}}),_v("Syntax coloring"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#syntax-coloring-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("MarkBind can apply syntax-coloring on inline code too.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs"}},[_c('span',[_v("Consider the xml code `goo`{.xml},
              \n")]),_c('span',[_v("or the java code `public static void main(String[] args)`{.java}.\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Consider the xml code "),_c('code',{pre:true,attrs:{"class":"hljs inline xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v(","),_c('br'),_v("\nor the java code "),_c('code',{pre:true,attrs:{"class":"hljs inline java"}},[_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("static")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("void")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("main")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("(String[] args)")])])]),_v(".")])])],1)]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("```xml\n")]),_c('span',[_v("\n")]),_c('span',[_v(" goo\n")]),_c('span',[_v("\n")]),_c('span',[_v("```\n")])])]),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("`goo`{.xml}\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])]),_c('p',[_v("Syntax coloring for inline code: "),_c('code',{pre:true,attrs:{"class":"hljs inline xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v(" too!")])])],1)])],1),_v(" "),_m(6),_v(" "),_c('box',[_c('div',[_c('hr')]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"horizontal-rules-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"horizontal-rules-2"}}),_v("Horizontal Rules"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#horizontal-rules-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Use three or more asterisks ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("***")]),_v("), dashes ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("---")]),_v("), or underscores ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("___")]),_v(") to indicate a horizontal line.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("****")]),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("*")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("-----")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__")])])]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('hr'),_v(" "),_c('hr'),_v(" "),_c('hr')])],1)]),_v(" "),_c('h3',{attrs:{"id":"different-types-of-horizontal-rules"}},[_c('span',{staticClass:"anchor",attrs:{"id":"different-types-of-horizontal-rules"}}),_v("Different Types Of Horizontal Rules"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#different-types-of-horizontal-rules","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Add additional classes to modify the style, thickness, and color of a horizontal line.")]),_v(" "),_c('p',[_v("Available style classes:")]),_v(" "),_c('ul',[_c('li',[_v("dotted")]),_v(" "),_c('li',[_v("dashed")]),_v(" "),_c('li',[_v("double")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("--- {.dotted}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.dashed}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.double}\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('hr',{staticClass:"dotted"}),_v(" "),_c('hr',{staticClass:"dashed"}),_v(" "),_c('hr',{staticClass:"double"})])],1)]),_v(" "),_c('p',[_v("Available size classes:")]),_v(" "),_c('ul',[_c('li',[_v("thick")]),_v(" "),_c('li',[_v("thick-1")]),_v(" "),_c('li',[_v("thick-2")]),_v(" "),_c('li',[_v("thick-3")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("--- {.thick}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.thick-1}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.thick-2}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.thick-3}\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('hr',{staticClass:"thick"}),_v(" "),_c('hr',{staticClass:"thick-1"}),_v(" "),_c('hr',{staticClass:"thick-2"}),_v(" "),_c('hr',{staticClass:"thick-3"})])],1)]),_v(" "),_c('p',[_v("Available color classes (use any of the available BootStrap border color classes):")]),_v(" "),_c('ul',[_c('li',[_v("border-info")]),_v(" "),_c('li',[_v("border-primary")]),_v(" "),_c('li',[_v("etc")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("--- {.border-primary}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.border-secondary}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.border-danger}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.border-info}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.border-success}\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('hr',{staticClass:"border-primary"}),_v(" "),_c('hr',{staticClass:"border-secondary"}),_v(" "),_c('hr',{staticClass:"border-danger"}),_v(" "),_c('hr',{staticClass:"border-info"}),_v(" "),_c('hr',{staticClass:"border-success"})])],1)]),_v(" "),_c('p',[_v("Add a comibnation of the above classes to further customize the style of a horizontal line.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("--- {.dashed .thick-3}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.double .border-secondary}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.dotted .thick-1 .border-primary}\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('hr',{staticClass:"dashed thick-3"}),_v(" "),_c('hr',{staticClass:"double border-secondary"}),_v(" "),_c('hr',{staticClass:"dotted thick-1 border-primary"})])],1)]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("****")]),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("*")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("-----")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__")])])]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('hr')])])])],1),_v(" "),_m(7),_v(" "),_c('box',[_c('div',[_c('p',[_v("MarkBind home is at "),_c('a',{attrs:{"href":"https://markbind.org"}},[_v("here")]),_v(".\n")])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"links-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"links-2"}}),_v("Links"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#links-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Basic style:")]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("MarkBind home is at ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("here")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org")]),_v(").\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("MarkBind home is at "),_c('a',{attrs:{"href":"https://markbind.org"}},[_v("here")]),_v(".")])])],1)])]),_v(" "),_c('p',[_c('em',[_v("Reference style")]),_v(" links (i.e., specify the URL in a separate place):")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("MarkBind home is at ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("here")]),_v("]["),_c('span',{pre:true,attrs:{"class":"hljs-symbol"}},[_v("1")]),_v("].\n")]),_c('span',[_v("\n")]),_c('span',[_v("["),_c('span',{pre:true,attrs:{"class":"hljs-symbol"}},[_v("1")]),_v("]: "),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("MarkBind home is at "),_c('a',{attrs:{"href":"https://markbind.org"}},[_v("here")]),_v(".")])])],1)]),_v(" "),_c('p',[_c('small',[_v("More info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/basic-syntax#links"}},[_v("https://www.markdownguide.org/basic-syntax#links")])])]),_v(" "),_c('h4',{attrs:{"id":"intra-site-links"}},[_c('span',{staticClass:"anchor",attrs:{"id":"intra-site-links"}}),_v("Intra-Site Links"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#intra-site-links","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{attrs:{"id":"intraSiteLinks"}},[_c('p',[_v("Links to files of the generated site (e.g., an HTML page or an image file) can be specified either as relative paths or absolute paths.")]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Auto-conversion of extension")])])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_v("You may link to markdown files using its original extension ("),_c('strong',[_v(".md")]),_v(") as it will automatically be converted to a html extension ("),_c('strong',[_v(".html")]),_v(") when the site is generated.")]),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Click [here](index.md)")]),_v(" --- "),_c('em',[_v("auto-conversion")]),_v(" ---> "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Click [here](index.html)")])],1),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("If you wish to disable the auto-conversion, you may use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-convert")]),_v(" attribute in your link.")]),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Click [here](index.md){no-convert}")])],1)])],1),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Absolute paths")])])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_v("Links should start with "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{{ baseUrl }}")]),_v(" (which represents the root directory of the site).")]),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Here's how to specify a link to (1) a page, and (2) an image, using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{{ baseUrl }}")]),_v(":")],1),_v(" "),_c('ol',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Click [here]({{ baseUrl }}/userGuide/reusingContents.html).")])]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("![]({{ baseUrl }}/images/preview.png)")])])]),_v(" "),_c('box',{attrs:{"type":"important"}},[_c('p',[_v("To ensure that links in the "),_c('code',{pre:true},[_v("_markbind/")]),_v(" folder work correctly across the entire site, they should be written as absolute paths, prepended with "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{{ baseUrl }}")]),_v(".")])])],1),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Relative paths")])])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Assuming that we have the following folder structure:")],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("C:\\course\\\n")]),_c('span',[_v(" ├── textbook\\\n")]),_c('span',[_v(" | ├── subsite.md\n")]),_c('span',[_v(" | ├── image.png\n")]),_c('span',[_v(" | └── site.json\n")]),_c('span',[_v(" ├── index.md\n")]),_c('span',[_v(" └── site.json\n")])])]),_c('p',[_v("Within "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("textbook/subsite.md")]),_v(", we can refer to the image using:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("img")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"image.png\"")]),_v(" />")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v("![](image.png)\n")])])]),_c('p',[_v("Within "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("index.md")]),_v(", we can also display the image using")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("img")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"textbook/image.png\"")]),_v(" />")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v("![](textbook/image.png)\n")])])]),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Relative links to resources (e.g. images, hrefs) should be valid "),_c('strong',[_v("relative to the file where the link is defined")]),_v(".")]),_v(" "),_c('p',[_v("In the example above, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("image.png")]),_v(" is in the same directory as "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("subsite.md")]),_v(". Thus, the correct path is "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("image.png")]),_v(" and not "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("textbook/image.png")]),_v(".")])])],1),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Link validation")])])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_v("Links will be validated when generating a site and a warning will be displayed in the console for every link that is invalid.")]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_c('strong',[_v("Disabling link validation")])]),_v(" "),_c('p',[_v("Link validation is enabled by default.")]),_v(" "),_c('p',[_v("If you wish to only disable validation for a "),_c('strong',[_v("specific link")]),_v(", you may use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-validation")]),_v(" attribute.")]),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Click [here](index.md){no-validation}")])],1),_v(" "),_c('p',[_v("However, if you wish to disable this feature "),_c('strong',[_v("entirely")]),_v(", you may simply modify your "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" like "),_c('trigger',{attrs:{"for":"pop:global-intralink-disable","placement":"bottom","trigger":"click"}},[_v(" this ")]),_v(".")],1),_v(" "),_c('b-modal',{ref:"pop:global-intralink-disable",attrs:{"id":"pop:global-intralink-disable","hide-footer":"","size":"","modal-class":"mb-zoom"},scopedSlots:_u([{key:"modal-title",fn:function(){return [_v("Disabling global intra-site link validation in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")])]},proxy:true}])},[_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs js"}},[_c('span',[_v("...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"intrasiteLinkValidation\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"enabled\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-literal"}},[_v("false")]),_v("\n")]),_c('span',[_v("},\n")]),_c('span',[_v("...\n")])])])])])],1)],1)]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("MarkBind home is at ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("here")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org")]),_v(").\n")]),_c('span',[_v("\n")]),_c('span',[_v("MarkBind home is at ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("here")]),_v("]["),_c('span',{pre:true,attrs:{"class":"hljs-symbol"}},[_v("1")]),_v("].\n")]),_c('span',[_v("\n")]),_c('span',[_v("["),_c('span',{pre:true,attrs:{"class":"hljs-symbol"}},[_v("1")]),_v("]: "),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org")]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("MarkBind home is at "),_c('a',{attrs:{"href":"https://markbind.org"}},[_v("here")]),_v(".\n")])]),_c('p')])])],1),_v(" "),_m(8),_v(" "),_c('box',[_c('div',[_v("\n1 + 1 = 2 ^[Math]\n")]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"footnotes-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"footnotes-2"}}),_v("Footnotes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#footnotes-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('span',{attrs:{"id":"main-example-markbind"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**Normal footnotes:**")]),_v("\n")]),_c('span',[_v("Here is a footnote reference,[^1] and another.[^longnote]\n")]),_c('span',[_v("\n")]),_c('span',[_v("["),_c('span',{pre:true,attrs:{"class":"hljs-symbol"}},[_v("^1")]),_v("]: "),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("Here is the footnote. Footnotes will appear at the bottom of the page.")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("["),_c('span',{pre:true,attrs:{"class":"hljs-symbol"}},[_v("^longnote")]),_v("]: "),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("Here's one with multiple blocks.")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" Subsequent paragraphs are indented to show that they")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("belong to the previous footnote.")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**Inline footnotes:**")]),_v("\n")]),_c('span',[_v("Here is an inline note.^[Inlines notes are easier to write, since\n")]),_c('span',[_v("you don't have to pick an identifier and move down to type the\n")]),_c('span',[_v("note.]\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('strong',[_v("Normal footnotes:")]),_v("\nHere is a footnote reference,"),_c('trigger',{attrs:{"for":"pop:footnotefn-47-1"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-47-1"}},[_v("[1]")])])]),_v(" and another."),_c('trigger',{attrs:{"for":"pop:footnotefn-47-2"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-47-2"}},[_v("[2]")])])])],1),_v(" "),_c('p',[_c('strong',[_v("Inline footnotes:")]),_v("\nHere is an inline note."),_c('trigger',{attrs:{"for":"pop:footnotefn-47-3"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-47-3"}},[_v("[3]")])])])],1)])],1)])]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Normal footnotes won't work when used inside the attributes of markbind components!\n"),_c('br'),_v("\nFor example, it won't work in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("header")]),_v(" attribute of "),_c('a',{attrs:{"href":"/userGuide/components/presentation.html#panels"}},[_v("panels")]),_v(".")])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("**Normal footnotes:**\n")]),_c('span',[_v("Here is a footnote reference,[^1] and another.[^longnote]\n")]),_c('span',[_v("\n")]),_c('span',[_v("[^1]: Here is the footnote. Footnotes will appear at the bottom of the page.\n")]),_c('span',[_v("\n")]),_c('span',[_v("[^longnote]: Here's one with multiple blocks.\n")]),_c('span',[_v(" Subsequent paragraphs are indented to show that they\n")]),_c('span',[_v("belong to the previous footnote.\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_v("\n1 + 1 = 2 ^[Math]\n")])],1)])],1),_v(" "),_m(9),_v(" "),_c('box',[_c('div',[_c('p',[_c('a',{attrs:{"href":"https://markbind.org/images/logo-lightbackground.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","alt":"","title":"title here"}})])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"images-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"images-2"}}),_v("Images"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#images-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("![](https://markbind.org/images/logo-lightbackground.png)\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('a',{attrs:{"href":"https://markbind.org/images/logo-lightbackground.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","alt":""}})])])])],1)]),_v(" "),_c('box',{attrs:{"type":"info"}},[_v("\n URLs can be specified as relative references. More info in: "),_c('i',[_c('a',{attrs:{"href":"#intraSiteLinks"}},[_v("Intra-Site Links")])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("!["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("alt text here")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org/images/logo-lightbackground.png \"title here\"")]),_v(")\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_c('a',{attrs:{"href":"https://markbind.org/images/logo-lightbackground.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","alt":"","title":"title here"}})])])]),_c('p')],1)])],1),_v(" "),_m(10),_v(" "),_c('box',[_c('div',[_c('div',[_v("\n* Apply to the list item itself like so {.text-success #list-item-id}\n * Curly groups after newlines apply to the closest nested list {.text-danger}\n{.bg-light}\n* Curly groups two lines after the last line apply to the top most list\n\n{.alert-info}\n")])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"classes-attributes-and-amp-identifiers-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"classes-attributes-and-amp-identifiers-2"}}),_v("Classes, Attributes & Identifiers"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#classes-attributes-and-amp-identifiers-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Most markdown syntax above this section supports adding classes, attributes and identifiers\nusing "),_c('a',{attrs:{"href":"https://pandoc.org/MANUAL.html"}},[_v("pandoc")]),_v(" syntax without the need for a wrapper html element.")]),_v(" "),_c('p',[_v("The syntax is "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{.class-name attribute=\"value\" attribute=value #id}")]),_v(", which is placed at different locations depending\non the type of markdown.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("Apply classes, attributes, identifiers to block level markdown (eg. paragraphs, headings)\n")]),_c('span',[_v("by leaving a space before '{' {.text-success #attribute-example}\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("#### heading {.text-info}")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.border-danger}\n")]),_c('span',[_v("\n")]),_c('span',[_v("Apply the same to inline markdown (eg. bold text) by\n")]),_c('span',[_v("omitting the "),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**space**")]),_v("{.text-primary .bg-light header=\"attributes example\"}\n")]),_c('span',[_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',{staticClass:"text-success",attrs:{"id":"attribute-example"}},[_v("Apply classes, attributes, identifiers to block level markdown (eg. paragraphs, headings)\nby leaving a space before '{'")]),_v(" "),_c('h4',{staticClass:"text-info",attrs:{"id":"heading-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-2"}}),_v("heading"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('hr',{staticClass:"border-danger"}),_v(" "),_c('p',[_v("Apply the same to inline markdown (eg. bold text) by\nomitting the "),_c('strong',{staticClass:"text-primary bg-light",attrs:{"header":"attributes example"}},[_v("space")])])])],1)]),_v(" "),_c('p',{staticClass:"mb-4"},[_v("Some other types of markdown have "),_c('strong',[_v("different placements")]),_v(" of the curly group "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{...}")]),_v(".")]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Unordered and Ordered lists")])])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Apply to the list item itself like so {.text-success #list-item-id}\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Curly groups after newlines apply to the closest nested list {.text-danger}\n")]),_c('span',[_v("{.bg-light}\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Curly groups two lines after the last line apply to the top most list\n")]),_c('span',[_v("\n")]),_c('span',[_v("{.alert-info}\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ul',{staticClass:"alert-info"},[_c('li',{staticClass:"text-success",attrs:{"id":"list-item-id"}},[_v("Apply to the list item itself like so\n"),_c('ul',{staticClass:"bg-light"},[_c('li',{staticClass:"text-danger"},[_v("Curly groups after newlines apply to the closest nested list")])])]),_v(" "),_c('li',[_v("Curly groups two lines after the last line apply to the top most list")])])])],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Fenced code blocks")])])]),_v(" "),_c('p',[_v("Refer to the above "),_c('a',{attrs:{"href":"/userGuide/formattingContents.html#line-numbering"}},[_v("section")]),_v("!")]),_v(" "),_c('p',[_c('small',[_v("For a more detailed guide, see: "),_c('a',{attrs:{"href":"https://www.npmjs.com/package/markdown-it-attrs"}},[_v("https://www.npmjs.com/package/markdown-it-attrs")])])]),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_v("\nFormatting features listed above this section support this syntax for attributes, classes and identifiers.\nThose below this section do not.\n")]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("add a space before '{' for block level markdown {.class-name attribute=\"value\" attribute=value #id}\n")]),_c('span',[_v("\n")]),_c('span',[_v("don't add a space for **inline**{.text-danger} markdown\n")])])]),_c('p',[_c('small',[_v("For a more detailed guide, see: "),_c('a',{attrs:{"href":"https://www.npmjs.com/package/markdown-it-attrs"}},[_v("https://www.npmjs.com/package/markdown-it-attrs")])])])]),_c('p'),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('div',[_v("\n* Apply to the list item itself like so {.text-success #list-item-id}\n * Curly groups after newlines apply to the closest nested list {.text-danger}\n{.bg-light}\n* Curly groups two lines after the last line apply to the top most list\n\n{.alert-info}\n")])])],1)])],1),_v(" "),_m(11),_v(" "),_c('box',[_c('div',[_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',{staticStyle:{"text-align":"left"}},[_v("Animal")]),_v(" "),_c('th',{staticStyle:{"text-align":"center"}},[_v("Trainable?")]),_v(" "),_c('th',{staticStyle:{"text-align":"right"}},[_v("Price")]),_v(" "),_c('th',[_v("Remarks")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Ants")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("no")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("5")]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Bees")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("no")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("20")]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Cats")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("yes")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("100")]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}})])])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"tables-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tables-2"}}),_v("Tables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tables-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("Animal | Trainable?| Price | Remarks\n")]),_c('span',[_v(":----- | :-------: | ----: | ----\n")]),_c('span',[_v("Ants | no | 5 |\n")]),_c('span',[_v("Bees | no | 20 |\n")]),_c('span',[_v("Cats|yes|100|\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',{staticStyle:{"text-align":"left"}},[_v("Animal")]),_v(" "),_c('th',{staticStyle:{"text-align":"center"}},[_v("Trainable?")]),_v(" "),_c('th',{staticStyle:{"text-align":"right"}},[_v("Price")]),_v(" "),_c('th',[_v("Remarks")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Ants")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("no")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("5")]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Bees")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("no")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("20")]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Cats")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("yes")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("100")]),_v(" "),_c('td')])])])])])],1)]),_v(" "),_c('ul',[_c('li',[_v("Colons ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(":")]),_v(") in the 2nd line are optional and they indicates whether to left/center/right-align the values in that column.")]),_v(" "),_c('li',[_v("There is no need to align pipe symbols to be on a vertical line; it's just for aesthetic purposes only.")])]),_v(" "),_c('p',[_c('small',[_v("More info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/extended-syntax#tables"}},[_v("https://www.markdownguide.org/extended-syntax#tables")])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("Animal | Trainable?| Price | Remarks\n")]),_c('span',[_v(":----- | :-------: | ----: | ----\n")]),_c('span',[_v("Ants | no | 5 |\n")]),_c('span',[_v("Bees | no | 20 |\n")]),_c('span',[_v("Cats|yes|100|\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',{staticStyle:{"text-align":"left"}},[_v("Animal")]),_v(" "),_c('th',{staticStyle:{"text-align":"center"}},[_v("Trainable?")]),_v(" "),_c('th',{staticStyle:{"text-align":"right"}},[_v("Price")]),_v(" "),_c('th',[_v("Remarks")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Ants")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("no")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("5")]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Bees")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("no")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("20")]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Cats")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("yes")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("100")]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}})])])])])]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}}),_v(" "),_c('td',{staticStyle:{"text-align":"right"}}),_v(" "),_c('td')])])],1),_v(" "),_m(12),_v(" "),_c('box',[_c('div',[_c('p',[_v("👍 ❗️ ❌ 🚧\n")])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"emoji-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"emoji-2"}}),_v("Emoji"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#emoji-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v(":+1: :exclamation: :x: :construction:\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("👍 ❗️ ❌ 🚧")])])],1)])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" "),_c('a',{attrs:{"href":"https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md"}},[_v("the list of supported emoji")]),_v(".")])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v(":+1: :exclamation: :x: :construction:\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("👍 ❗️ ❌ 🚧\n")])]),_c('p')])])],1),_v(" "),_m(13),_v(" "),_c('box',[_c('div',[_c('p',[_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fas fa-home",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fas fa-home",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('span',{staticStyle:{"color":"red"}},[_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fas fa-home",attrs:{"aria-hidden":"true"}})])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"icons-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"icons-2"}}),_v("Icons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#icons-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('small',[_c('span',{staticClass:"dimmed"},[_v("Acknowledgement: Font Awesome icons are provided by "),_c('a',{attrs:{"href":"https://fontawesome.com/"}},[_v("Font Awesome")]),_v(" under their "),_c('a',{attrs:{"href":"https://fontawesome.com/license"}},[_v("free license")]),_v(", Glyphicons are provided by "),_c('a',{attrs:{"href":"https://glyphicons.com/"}},[_v("Glyphicons")]),_v(" via "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/3.3/"}},[_v("Bootstrap 3")]),_v(", "),_c('a',{attrs:{"href":"https://octicons.github.com"}},[_v("Octicons")]),_v(" are copyright of GitHub, and Material icons are provided by "),_c('a',{attrs:{"href":"https://fonts.google.com/icons"}},[_v("Google Fonts")]),_v(" via "),_c('a',{attrs:{"href":"https://www.npmjs.com/package/material-icons"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("material-icons")]),_v(" by Ravindra Marella")]),_v(" under the "),_c('a',{attrs:{"href":"https://www.apache.org/licenses/LICENSE-2.0.html"}},[_v("Apache license 2.0")]),_v(".")])])]),_v(" "),_c('p',[_v("MarkBind supports using Font Icons provided by Font Awesome, Glyphicons and GitHub's Octicons.")]),_v(" "),_c('div',[_c('box',{attrs:{"border-left-color":"#00B0F0"}},[_c('p',[_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-lightbulb",attrs:{"aria-hidden":"true"}})]),_v("\nThe advantage of font icons over emojis is font icons can be "),_c('em',[_v("styled")]),_v(" to fit your needs. e.g.,")]),_v(" "),_c('ul',[_c('li',[_v("emoji: "),_c('span',{staticStyle:{"color":"purple"}},[_v("Don't judge the 📖 by it's cover! 👎")])]),_v(" "),_c('li',[_v("font icons: "),_c('span',{staticStyle:{"color":"purple"}},[_v("Don't judge the "),_c('span',{staticClass:"fas fa-book",attrs:{"aria-hidden":"true"}}),_v(" by it's cover! "),_c('span',{staticClass:"fas fa-thumbs-down",attrs:{"aria-hidden":"true"}})])])])])],1),_v(" "),_c('box',{attrs:{"type":"important"}},[_c('p',[_v("The syntax for icons has changed, and the earlier "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{{ prefix_name }}")]),_v(" syntax has been deprecated. "),_c('br'),_v("\nPlease use the new "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(":prefix-name:")]),_v(" syntax instead.")])]),_v(" "),_c('h6',{attrs:{"id":"using-font-awesome-icons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-font-awesome-icons"}}),_v("Using Font Awesome Icons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-font-awesome-icons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('ol',[_c('li',[_c('p',[_v("Decide which icon you want to use from the "),_c('a',{attrs:{"href":"https://fontawesome.com/icons?d=gallery&m=free"}},[_v("list of available icons")]),_v(".")])]),_v(" "),_c('li',[_c('p',[_v("Construct the MarkBind name for the selected icon by adding the "),_c('em',[_v("type prefix")]),_v(".\nNote: Font Awesome has three different styles for their icons, each with their own type prefix. Here is an example from each type:")]),_v(" "),_c('ul',[_c('li',[_c('em',[_v("Solid")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fas-")]),_v(") e.g., "),_c('span',{staticClass:"fas fa-file-code",attrs:{"aria-hidden":"true"}}),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("file-code")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fas-file-code")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Regular")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("far-")]),_v(") e.g., "),_c('span',{staticClass:"far fa-file-code",attrs:{"aria-hidden":"true"}}),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("file-code")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("far-file-code")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Brands")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fab-")]),_v("): e.g., "),_c('span',{staticClass:"fab fa-github-alt",attrs:{"aria-hidden":"true"}}),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("github-alt")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fab-github-alt")]),_v(")")])])]),_v(" "),_c('li',[_c('p',[_v("Insert MarkBind name for the icon enclosed within colons to get the icon in your page."),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Create a **branch**")]),_c('code',{pre:true},[_v(":"),_c('span'),_v("fas-code-branch: now!")]),_v(" → Create a "),_c('strong',[_v("branch")]),_v(" "),_c('span',{staticClass:"fas fa-code-branch",attrs:{"aria-hidden":"true"}}),_v(" now!")])])]),_v(" "),_c('h6',{attrs:{"id":"using-glyphicons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-glyphicons"}}),_v("Using Glyphicons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-glyphicons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('ol',[_c('li',[_v("Decide which icon you want to use from "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/3.3/components/#glyphicons"}},[_v("list of provided glyphicons")]),_v(".")]),_v(" "),_c('li',[_v("Insert the name for the icon enclosed within colons to get the icon in your page."),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Move to the right!")]),_c('code',{pre:true},[_v(":"),_c('span'),_v("glyphicon-hand-right:")]),_v(" → Move to the right! "),_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}})])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('p',[_c('code',{pre:true},[_v(":"),_c('span'),_v("glyphicon-hand-right:")]),_v(" "),_c('code',{pre:true},[_v(":"),_c('span'),_v("fab-github:")]),_v(" "),_c('code',{pre:true},[_v(":"),_c('span'),_v("fas-home:")])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fas fa-home",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fas fa-home",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('span',{staticStyle:{"color":"red"}},[_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fas fa-home",attrs:{"aria-hidden":"true"}})])])]),_c('p'),_v(" "),_c('h6',{attrs:{"id":"using-octicons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-octicons"}}),_v("Using Octicons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-octicons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('ol',[_c('li',[_v("Decide which icon you want to use from "),_c('a',{attrs:{"href":"https://octicons.github.com"}},[_v("list of available Octicons")]),_v(".")]),_v(" "),_c('li',[_v("Insert the name for the icon enclosed within colons to get the icon in your page."),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Merge a **pull request** :octicon-git-pull-request:")]),_v(" → Merge a "),_c('strong',[_v("pull request")]),_v(" "),_c('svg',{staticClass:"octicon octicon-git-pull-request",attrs:{"version":"1.1","width":"16","height":"16","viewBox":"0 0 16 16","aria-hidden":"true"}},[_c('path',{attrs:{"fill-rule":"evenodd","d":"M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"}})])]),_v(" "),_c('li',[_v("You may also append "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("~class-name")]),_v(" to the end of the octicon name to add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("class=\"class-name\"")]),_v(" property to your Octicon (e.g. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(":octicon-git-pull-request~icon-large-red:")]),_v(" will generate an Octicon of class "),_c('em',[_v("icon-large-red")]),_v("). You may then add corresponding CSS to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{root}/_markbind/layouts/{layout-name}/styles.css")]),_v(" to customize the style of your Octicon.")]),_v(" "),_c('li',[_v("If your background is dark, you may use "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(":octiconlight-*:")]),_v(" to render the icon as white.")])]),_v(" "),_c('h6',{attrs:{"id":"using-material-icons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-material-icons"}}),_v("Using Material Icons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-material-icons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('ol',[_c('li',[_c('p',[_v("Decide which icon you want to use from "),_c('a',{attrs:{"href":"https://fonts.google.com/icons"}},[_v("list of available icons")]),_v(".")])]),_v(" "),_c('li',[_c('p',[_v("Construct the MarkBind name for the selected icon by writing the icon name in "),_c('em',[_v("lowercase letters only")]),_v(", replacing any spaces between the words in the name with "),_c('em',[_v("dashes")]),_v(" ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v("), then adding the "),_c('em',[_v("type prefix")]),_v(".\nNote: Google has five different styles for their Material icons, each with their own type prefix. Here is an example from each type:")]),_v(" "),_c('ul',[_c('li',[_c('em',[_v("Filled")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mif-")]),_v(") e.g. "),_c('span',{staticClass:"material-icons align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mif-perm-media")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Outlined")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mio-")]),_v(") e.g., "),_c('span',{staticClass:"material-icons-outlined align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mio-perm-media")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Rounded")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mir-")]),_v("): e.g., "),_c('span',{staticClass:"material-icons-round align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mir-perm-media")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Sharp")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mis-")]),_v("): e.g., "),_c('span',{staticClass:"material-icons-sharp align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mis-perm-media")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Two tone")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mit-")]),_v("): e.g., "),_c('span',{staticClass:"material-icons-two-tone align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mit-perm-media")]),_v(")")])])]),_v(" "),_c('li',[_c('p',[_v("Insert the name for the icon enclosed within colons to get the icon in your page."),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Download from Cloud :mio-cloud-download:")]),_v(" → Download from Cloud "),_c('span',{staticClass:"material-icons-outlined align-middle",attrs:{"aria-hidden":"true"}},[_v("cloud_download")])])])])],1)])],1),_v(" "),_m(14),_v(" "),_c('box',[_c('div',[_c('p',[_v("Embedded YouTube video:")]),_v(" "),_c('div',{staticClass:"block-embed block-embed-service-youtube"},[_c('iframe',{attrs:{"type":"text/html","src":"//www.youtube.com/embed/v40b3ExbM0c","frameborder":"0","width":"640","height":"390","webkitallowfullscreen":"","mozallowfullscreen":"","allowfullscreen":""}})]),_v(" "),_c('p',[_v("Embedded slide deck:")]),_v(" "),_c('div',{staticClass:"block-embed block-embed-service-powerpoint"},[_c('iframe',{attrs:{"type":"text/html","src":"https://onedrive.live.com/embed?cid=A5AF047C4CAD67AB&resid=A5AF047C4CAD67AB%212070&authkey=&em=2&action=embedview&wdAr=1.3333333333333333","frameborder":"0","width":"610","height":"481","webkitallowfullscreen":"","mozallowfullscreen":"","allowfullscreen":""}})])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"embeds-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"embeds-2"}}),_v("Embeds"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#embeds-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("There are easy ways to embed media content such as YouTube videos and PowerPoint slides")]),_v(".")]),_v(" "),_c('h6',{attrs:{"id":"embedding-youtube-videos"}},[_c('span',{staticClass:"anchor",attrs:{"id":"embedding-youtube-videos"}}),_v("Embedding Youtube Videos"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#embedding-youtube-videos","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Here are three ways of embedding YouTube videos and one example of how it will look in the page.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("youtube")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("v40b3ExbM0c")]),_v(")\n")]),_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("youtube")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("http://www.youtube.com/watch?v=v40b3ExbM0c")]),_v(")\n")]),_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("youtube")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("http://youtu.be/v40b3ExbM0c")]),_v(")\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"block-embed block-embed-service-youtube"},[_c('iframe',{attrs:{"type":"text/html","src":"//www.youtube.com/embed/v40b3ExbM0c","frameborder":"0","width":"640","height":"390","webkitallowfullscreen":"","mozallowfullscreen":"","allowfullscreen":""}})])])],1)]),_v(" "),_c('p',[_v("More media blocks, embedding services and additional options can be found in "),_c('a',{attrs:{"href":"https://github.com/rotorz/markdown-it-block-embed"}},[_v("Markdown-it documentation")]),_v(".")]),_v(" "),_c('h6',{attrs:{"id":"embedding-powerpoint-slides-using-the-embed-url-from-powerpoint-online"}},[_c('span',{staticClass:"anchor",attrs:{"id":"embedding-powerpoint-slides-using-the-embed-url-from-powerpoint-online"}}),_v("Embedding Powerpoint Slides (using the embed url from Powerpoint online)"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#embedding-powerpoint-slides-using-the-embed-url-from-powerpoint-online","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Here is an example of embedding a PowerPoint slide deck:")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("powerpoint")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://onedrive.live.com/embed?cid=A5AF047C4CAD67AB&resid=A5AF047C4CAD67AB%212070&authkey=&em=2")]),_v(")\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"block-embed block-embed-service-powerpoint"},[_c('iframe',{attrs:{"type":"text/html","src":"https://onedrive.live.com/embed?cid=A5AF047C4CAD67AB&resid=A5AF047C4CAD67AB%212070&authkey=&em=2&action=embedview&wdAr=1.3333333333333333","frameborder":"0","width":"610","height":"481","webkitallowfullscreen":"","mozallowfullscreen":"","allowfullscreen":""}})])])],1)]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("youtube")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("v40b3ExbM0c")]),_v(")\n")]),_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("youtube")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("http://www.youtube.com/watch?v=v40b3ExbM0c")]),_v(")\n")]),_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("youtube")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("http://youtu.be/v40b3ExbM0c")]),_v(")\n")]),_c('span',[_v("\n")]),_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("powerpoint")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://onedrive.live.com/embed?cid=A5AF047C4CAD67AB&resid=A5AF047C4CAD67AB%212070&authkey=&em=2")]),_v(")\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("Embedded YouTube video:")]),_v(" "),_c('div',{staticClass:"block-embed block-embed-service-youtube"},[_c('iframe',{attrs:{"type":"text/html","src":"//www.youtube.com/embed/v40b3ExbM0c","frameborder":"0","width":"640","height":"390","webkitallowfullscreen":"","mozallowfullscreen":"","allowfullscreen":""}})]),_v(" "),_c('p',[_v("Embedded slide deck:")]),_v(" "),_c('div',{staticClass:"block-embed block-embed-service-powerpoint"},[_c('iframe',{attrs:{"type":"text/html","src":"https://onedrive.live.com/embed?cid=A5AF047C4CAD67AB&resid=A5AF047C4CAD67AB%212070&authkey=&em=2&action=embedview&wdAr=1.3333333333333333","frameborder":"0","width":"610","height":"481","webkitallowfullscreen":"","mozallowfullscreen":"","allowfullscreen":""}})])])])])],1),_v(" "),_m(15),_v(" "),_c('box',[_c('div'),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"dates-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"dates-2"}}),_v("Dates"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#dates-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Markbind supports date formatting and simple calculations")]),_v(" as a Nunjucks "),_c('a',{attrs:{"href":"https://mozilla.github.io/nunjucks/templating.html#filters"}},[_v("filter")]),_v(".")]),_v(" "),_c('p',[_c('strong',[_v("Syntax:")]),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("{ baseDate | date(format, daysToAdd) }}")])]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('p',[_v("20 days after 1st Jan 2020:")]),_v(" "),_c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ \"2020-01-01\" | date(\"ddd, Do MMM, YYYY\", 20) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Tue, 21st Jan, 2020")])]),_v(" "),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("The baseDate follows the format: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("YYYY-MM-DD")])]),_v(" "),_c('p',[_v("The default output format is "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"ddd D MMM\"")]),_v(" e.g. Fri 6 Mar")])]),_v(" "),_c('h3',{attrs:{"id":"using-variables"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-variables"}}),_v("Using variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-variables","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("% set base1 = \"2020-01-01\" %}")]),_v(" "),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("% set format1 = \"DD MM YYYY\" %}")]),_v(" "),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("% set format2 = \"ddd Do MMM (DD/MM/YYYY)\" %}")])]),_v(" "),_c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Wed 1 Jan"),_c('br')]),_v(" "),_c('h4',{attrs:{"id":"custom-formatting"}},[_c('span',{staticClass:"anchor",attrs:{"id":"custom-formatting"}}),_v("Custom formatting"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#custom-formatting","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format1) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" 01 01 2020"),_c('br')]),_v(" "),_c('h4',{attrs:{"id":"adding-days"}},[_c('span',{staticClass:"anchor",attrs:{"id":"adding-days"}}),_v("Adding days"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#adding-days","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format2, 0) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Wed 1st Jan (01/01/2020)"),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format2, 10) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Sat 11th Jan (11/01/2020)"),_c('br')]),_v(" "),_c('h4',{attrs:{"id":"page-variables"}},[_c('span',{staticClass:"anchor",attrs:{"id":"page-variables"}}),_v("Page variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#page-variables","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Dates can be supplied using "),_c('a',{attrs:{"href":"/userGuide/reusingContents.html#variables"}},[_v("page variables")]),_v(" for convenience.")]),_v(" "),_c('p',[_v("Inside "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("variables.md")]),_v(" or referencing page:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("{% set date_pagevar = \"2020-03-06\" %}\n")])])]),_c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ date_pagevar | date(format2) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Fri 6th Mar (06/03/2020) "),_c('br')]),_v(" "),_c('h3',{attrs:{"id":"advanced-formatting"}},[_c('span',{staticClass:"anchor",attrs:{"id":"advanced-formatting"}}),_v("Advanced Formatting"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#advanced-formatting","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("The output date can be formatted to suit your needs by specifying a format string as an argument to the date filter.")]),_v(" "),_c('p',[_v("Default format: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"ddd D MMM\"")]),_v(" e.g. Fri 6 Mar")]),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("Brief reference")])])]},proxy:true}])},[_v(" "),_c('p',[_v("Token | Output")]),_v(" "),_c('ul',[_c('li',[_v("| -\nD | 1\nDo | 1st\nDD | 01\nM | 1\nMM | 01\nMMM | Jan\nMMMM | January\nYY | 19\nYYYY | 2019")])])]),_v(" "),_c('p',[_v("Full formatting reference available "),_c('a',{attrs:{"href":"https://momentjs.com/docs/#/displaying/format/"}},[_v("here")]),_v(".")]),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}})],1),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',[_c('span',[_c('code',{pre:true},[_v("{"),_c('a'),_v("% set base1 = \"2019-08-12\" %}")]),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("% set format1 = \"DD MM YYYY\" %}")]),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("% set format2 = \"ddd Do MM\" %}")]),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date }}")]),_v(" ``"),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format1) }}")]),_v(" ``"),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format1, 10) }}")]),_v(" ``"),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format2, 10) }}")]),_v(" ``"),_c('br')])])],1),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Mon 12 Aug"),_c('br'),_v("\n12 08 2019"),_c('br'),_v("\n22 08 2019"),_c('br'),_v("\nThu 22/08")])])],1)]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('box',[_c('span',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ \"2019-08-12\" | date(\"DD.MM.YYYY\", 10) }}")]),_v(" ``"),_c('br')])]),_v(" "),_c('p',[_v("22.08.2019\n")])],1),_v(" "),_c('p')],1)])],1),_v(" "),_m(16),_v(" "),_c('box',[_c('div',[_c('p',[_v("Solve the following simultaneous equations:")]),_v(" "),_c('section',{staticClass:"eqno"},[_c('eqn',{pre:true},[_c('span',{pre:true,attrs:{"class":"katex-display"}},[_c('span',{pre:true,attrs:{"class":"katex"}},[_c('span',{pre:true,attrs:{"class":"katex-mathml"}},[_c('math',{pre:true,attrs:{"xmlns":"http://www.w3.org/1998/Math/MathML","display":"block"}},[_c('semantics',{pre:true},[_c('mrow',{pre:true},[_c('mn',{pre:true},[_v("3")]),_c('mi',{pre:true},[_v("x")]),_c('mo',{pre:true},[_v("+")]),_c('mi',{pre:true},[_v("y")]),_c('mo',{pre:true},[_v("=")]),_c('mn',{pre:true},[_v("11")])],1),_c('annotation',{pre:true,attrs:{"encoding":"application/x-tex","v-pre":""}},[_v(" 3x + y = 11 ")])],1)],1)],1),_c('span',{pre:true,attrs:{"class":"katex-html","aria-hidden":"true"}},[_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.72777em;vertical-align:-0.08333em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("3")]),_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("x")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.625em;vertical-align:-0.19444em;"}}),_c('span',{pre:true,attrs:{"class":"mord mathnormal","style":"margin-right:0.03588em;"}},[_v("y")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.64444em;vertical-align:0em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("1")]),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("1")])])])])])]),_c('span',[_v("(1)")])],1),_v(" "),_c('section',{staticClass:"eqno"},[_c('eqn',{pre:true},[_c('span',{pre:true,attrs:{"class":"katex-display"}},[_c('span',{pre:true,attrs:{"class":"katex"}},[_c('span',{pre:true,attrs:{"class":"katex-mathml"}},[_c('math',{pre:true,attrs:{"xmlns":"http://www.w3.org/1998/Math/MathML","display":"block"}},[_c('semantics',{pre:true},[_c('mrow',{pre:true},[_c('mfrac',{pre:true},[_c('mrow',{pre:true},[_c('mn',{pre:true},[_v("2")]),_c('mi',{pre:true},[_v("x")])],1),_c('mn',{pre:true},[_v("3")])],1),_c('mo',{pre:true},[_v("+")]),_c('mfrac',{pre:true},[_c('mrow',{pre:true},[_c('mn',{pre:true},[_v("2")]),_c('mi',{pre:true},[_v("y")])],1),_c('mn',{pre:true},[_v("3")])],1),_c('mo',{pre:true},[_v("=")]),_c('mn',{pre:true},[_v("8")])],1),_c('annotation',{pre:true,attrs:{"encoding":"application/x-tex","v-pre":""}},[_v("\\frac{2x}{3} + \\frac{2y}{3} = 8")])],1)],1)],1),_c('span',{pre:true,attrs:{"class":"katex-html","aria-hidden":"true"}},[_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:2.00744em;vertical-align:-0.686em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mopen nulldelimiter"}}),_c('span',{pre:true,attrs:{"class":"mfrac"}},[_c('span',{pre:true,attrs:{"class":"vlist-t vlist-t2"}},[_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:1.32144em;"}},[_c('span',{pre:true,attrs:{"style":"top:-2.314em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord"}},[_v("3")])])]),_c('span',{pre:true,attrs:{"style":"top:-3.23em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"frac-line","style":"border-bottom-width:0.04em;"}})]),_c('span',{pre:true,attrs:{"style":"top:-3.677em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord"}},[_v("2")]),_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("x")])])])]),_c('span',{pre:true,attrs:{"class":"vlist-s"}},[_v("​")])]),_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:0.686em;"}},[_c('span')])])])]),_c('span',{pre:true,attrs:{"class":"mclose nulldelimiter"}})]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:2.00744em;vertical-align:-0.686em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mopen nulldelimiter"}}),_c('span',{pre:true,attrs:{"class":"mfrac"}},[_c('span',{pre:true,attrs:{"class":"vlist-t vlist-t2"}},[_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:1.32144em;"}},[_c('span',{pre:true,attrs:{"style":"top:-2.314em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord"}},[_v("3")])])]),_c('span',{pre:true,attrs:{"style":"top:-3.23em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"frac-line","style":"border-bottom-width:0.04em;"}})]),_c('span',{pre:true,attrs:{"style":"top:-3.677em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord"}},[_v("2")]),_c('span',{pre:true,attrs:{"class":"mord mathnormal","style":"margin-right:0.03588em;"}},[_v("y")])])])]),_c('span',{pre:true,attrs:{"class":"vlist-s"}},[_v("​")])]),_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:0.686em;"}},[_c('span')])])])]),_c('span',{pre:true,attrs:{"class":"mclose nulldelimiter"}})]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.64444em;vertical-align:0em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("8")])])])])])]),_c('span',[_v("(2)")])],1),_v(" "),_c('p',[_v("Euler's equation "),_c('eq',{pre:true},[_c('span',{pre:true,attrs:{"class":"katex"}},[_c('span',{pre:true,attrs:{"class":"katex-mathml"}},[_c('math',{pre:true,attrs:{"xmlns":"http://www.w3.org/1998/Math/MathML"}},[_c('semantics',{pre:true},[_c('mrow',{pre:true},[_c('msup',{pre:true},[_c('mi',{pre:true},[_v("e")]),_c('mrow',{pre:true},[_c('mi',{pre:true},[_v("i")]),_c('mi',{pre:true},[_v("π")])],1)],1),_c('mo',{pre:true},[_v("+")]),_c('mn',{pre:true},[_v("1")]),_c('mo',{pre:true},[_v("=")]),_c('mn',{pre:true},[_v("0")])],1),_c('annotation',{pre:true,attrs:{"encoding":"application/x-tex","v-pre":""}},[_v(" e^{i\\pi}+1=0 ")])],1)],1)],1),_c('span',{pre:true,attrs:{"class":"katex-html","aria-hidden":"true"}},[_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.907994em;vertical-align:-0.08333em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("e")]),_c('span',{pre:true,attrs:{"class":"msupsub"}},[_c('span',{pre:true,attrs:{"class":"vlist-t"}},[_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:0.824664em;"}},[_c('span',{pre:true,attrs:{"style":"top:-3.063em;margin-right:0.05em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:2.7em;"}}),_c('span',{pre:true,attrs:{"class":"sizing reset-size6 size3 mtight"}},[_c('span',{pre:true,attrs:{"class":"mord mtight"}},[_c('span',{pre:true,attrs:{"class":"mord mathnormal mtight"}},[_v("i")]),_c('span',{pre:true,attrs:{"class":"mord mathnormal mtight","style":"margin-right:0.03588em;"}},[_v("π")])])])])])])])])]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.64444em;vertical-align:0em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("1")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.64444em;vertical-align:0em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("0")])])])])]),_v(" is a beautiful equation.")],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"math-formulae-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"math-formulae-2"}}),_v("Math Formulae"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#math-formulae-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Markbind supports typesetting TeX math equations. "),_c('a',{attrs:{"href":"https://katex.org"}},[_v("KaTeX")]),_v(" is used as a fast math renderer.")]),_v(" "),_c('p',[_v("Insert "),_c('strong',[_v("inline")]),_v(" equations by enclosing them in round brackets "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\\( ... \\)")]),_v(".")]),_v(" "),_c('p',[_v("Insert "),_c('strong',[_v("display")]),_v(" equations by enclosing them in square brackets "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\\[ ... \\]")]),_v(".")]),_v(" "),_c('p',[_v("Insert numbered "),_c('strong',[_v("display")]),_v(" equations by enclosing the equation square brackets and the equation number in curly brackets "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\\[ ... \\] (1)")]),_v(".")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("Solve the following simultaneous equations:\n")]),_c('span',[_v("\n")]),_c('span',[_v("\\[ 3x + y = 11 \\] (1)\n")]),_c('span',[_v("\n")]),_c('span',[_v("\\[\\frac{2x}{3} + \\frac{2y}{3} = 8\\] (2)\n")]),_c('span',[_v("\n")]),_c('span',[_v("Euler's equation \\( e^{i\\pi}+1=0 \\) is a beautiful equation.\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Solve the following simultaneous equations:")]),_v(" "),_c('section',{staticClass:"eqno"},[_c('eqn',{pre:true},[_c('span',{pre:true,attrs:{"class":"katex-display"}},[_c('span',{pre:true,attrs:{"class":"katex"}},[_c('span',{pre:true,attrs:{"class":"katex-mathml"}},[_c('math',{pre:true,attrs:{"xmlns":"http://www.w3.org/1998/Math/MathML","display":"block"}},[_c('semantics',{pre:true},[_c('mrow',{pre:true},[_c('mn',{pre:true},[_v("3")]),_c('mi',{pre:true},[_v("x")]),_c('mo',{pre:true},[_v("+")]),_c('mi',{pre:true},[_v("y")]),_c('mo',{pre:true},[_v("=")]),_c('mn',{pre:true},[_v("11")])],1),_c('annotation',{pre:true,attrs:{"encoding":"application/x-tex","v-pre":""}},[_v(" 3x + y = 11 ")])],1)],1)],1),_c('span',{pre:true,attrs:{"class":"katex-html","aria-hidden":"true"}},[_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.72777em;vertical-align:-0.08333em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("3")]),_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("x")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.625em;vertical-align:-0.19444em;"}}),_c('span',{pre:true,attrs:{"class":"mord mathnormal","style":"margin-right:0.03588em;"}},[_v("y")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.64444em;vertical-align:0em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("1")]),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("1")])])])])])]),_c('span',[_v("(1)")])],1),_v(" "),_c('section',{staticClass:"eqno"},[_c('eqn',{pre:true},[_c('span',{pre:true,attrs:{"class":"katex-display"}},[_c('span',{pre:true,attrs:{"class":"katex"}},[_c('span',{pre:true,attrs:{"class":"katex-mathml"}},[_c('math',{pre:true,attrs:{"xmlns":"http://www.w3.org/1998/Math/MathML","display":"block"}},[_c('semantics',{pre:true},[_c('mrow',{pre:true},[_c('mfrac',{pre:true},[_c('mrow',{pre:true},[_c('mn',{pre:true},[_v("2")]),_c('mi',{pre:true},[_v("x")])],1),_c('mn',{pre:true},[_v("3")])],1),_c('mo',{pre:true},[_v("+")]),_c('mfrac',{pre:true},[_c('mrow',{pre:true},[_c('mn',{pre:true},[_v("2")]),_c('mi',{pre:true},[_v("y")])],1),_c('mn',{pre:true},[_v("3")])],1),_c('mo',{pre:true},[_v("=")]),_c('mn',{pre:true},[_v("8")])],1),_c('annotation',{pre:true,attrs:{"encoding":"application/x-tex","v-pre":""}},[_v("\\frac{2x}{3} + \\frac{2y}{3} = 8")])],1)],1)],1),_c('span',{pre:true,attrs:{"class":"katex-html","aria-hidden":"true"}},[_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:2.00744em;vertical-align:-0.686em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mopen nulldelimiter"}}),_c('span',{pre:true,attrs:{"class":"mfrac"}},[_c('span',{pre:true,attrs:{"class":"vlist-t vlist-t2"}},[_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:1.32144em;"}},[_c('span',{pre:true,attrs:{"style":"top:-2.314em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord"}},[_v("3")])])]),_c('span',{pre:true,attrs:{"style":"top:-3.23em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"frac-line","style":"border-bottom-width:0.04em;"}})]),_c('span',{pre:true,attrs:{"style":"top:-3.677em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord"}},[_v("2")]),_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("x")])])])]),_c('span',{pre:true,attrs:{"class":"vlist-s"}},[_v("​")])]),_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:0.686em;"}},[_c('span')])])])]),_c('span',{pre:true,attrs:{"class":"mclose nulldelimiter"}})]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:2.00744em;vertical-align:-0.686em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mopen nulldelimiter"}}),_c('span',{pre:true,attrs:{"class":"mfrac"}},[_c('span',{pre:true,attrs:{"class":"vlist-t vlist-t2"}},[_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:1.32144em;"}},[_c('span',{pre:true,attrs:{"style":"top:-2.314em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord"}},[_v("3")])])]),_c('span',{pre:true,attrs:{"style":"top:-3.23em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"frac-line","style":"border-bottom-width:0.04em;"}})]),_c('span',{pre:true,attrs:{"style":"top:-3.677em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord"}},[_v("2")]),_c('span',{pre:true,attrs:{"class":"mord mathnormal","style":"margin-right:0.03588em;"}},[_v("y")])])])]),_c('span',{pre:true,attrs:{"class":"vlist-s"}},[_v("​")])]),_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:0.686em;"}},[_c('span')])])])]),_c('span',{pre:true,attrs:{"class":"mclose nulldelimiter"}})]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.64444em;vertical-align:0em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("8")])])])])])]),_c('span',[_v("(2)")])],1),_v(" "),_c('p',[_v("Euler's equation "),_c('eq',{pre:true},[_c('span',{pre:true,attrs:{"class":"katex"}},[_c('span',{pre:true,attrs:{"class":"katex-mathml"}},[_c('math',{pre:true,attrs:{"xmlns":"http://www.w3.org/1998/Math/MathML"}},[_c('semantics',{pre:true},[_c('mrow',{pre:true},[_c('msup',{pre:true},[_c('mi',{pre:true},[_v("e")]),_c('mrow',{pre:true},[_c('mi',{pre:true},[_v("i")]),_c('mi',{pre:true},[_v("π")])],1)],1),_c('mo',{pre:true},[_v("+")]),_c('mn',{pre:true},[_v("1")]),_c('mo',{pre:true},[_v("=")]),_c('mn',{pre:true},[_v("0")])],1),_c('annotation',{pre:true,attrs:{"encoding":"application/x-tex","v-pre":""}},[_v(" e^{i\\pi}+1=0 ")])],1)],1)],1),_c('span',{pre:true,attrs:{"class":"katex-html","aria-hidden":"true"}},[_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.907994em;vertical-align:-0.08333em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("e")]),_c('span',{pre:true,attrs:{"class":"msupsub"}},[_c('span',{pre:true,attrs:{"class":"vlist-t"}},[_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:0.824664em;"}},[_c('span',{pre:true,attrs:{"style":"top:-3.063em;margin-right:0.05em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:2.7em;"}}),_c('span',{pre:true,attrs:{"class":"sizing reset-size6 size3 mtight"}},[_c('span',{pre:true,attrs:{"class":"mord mtight"}},[_c('span',{pre:true,attrs:{"class":"mord mathnormal mtight"}},[_v("i")]),_c('span',{pre:true,attrs:{"class":"mord mathnormal mtight","style":"margin-right:0.03588em;"}},[_v("π")])])])])])])])])]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.64444em;vertical-align:0em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("1")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.64444em;vertical-align:0em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("0")])])])])]),_v(" is a beautiful equation.")],1)])],1)]),_v(" "),_c('box',{attrs:{"type":"important"}},[_c('p',[_v("If your equation requires special Nunjucks tags like "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{{")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("}}")]),_v(",use a\n"),_c('a',{attrs:{"href":"https://markbind.org/userGuide/tipsAndTricks.html#using-raw-endraw-to-display-content"}},[_v("raw-endraw block")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("{% raw %}\\(e^{{\\frac{1}{3}} + 1}\\){% endraw %}\n")])])])]),_v(" "),_c('p',[_c('small',[_v("More info on allowed symbols: "),_c('a',{attrs:{"href":"https://katex.org/docs/support_table.html"}},[_v("https://katex.org/docs/support_table.html")])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("\n")]),_c('span',[_v("Solve the following simultaneous equations:\n")]),_c('span',[_v("\n")]),_c('span',[_v("\\[ 3x + y = 11 \\] (1)\n")]),_c('span',[_v("\n")]),_c('span',[_v("\\[\\frac{2x}{3} + \\frac{2y}{3} = 8\\] (2)\n")]),_c('span',[_v("\n")]),_c('span',[_v("Euler's equation \\( e^{i\\pi}+1=0 \\) is a beautiful equation.\n")]),_c('span',[_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("Solve the following simultaneous equations:")]),_v(" "),_c('section',{staticClass:"eqno"},[_c('eqn',{pre:true},[_c('span',{pre:true,attrs:{"class":"katex-display"}},[_c('span',{pre:true,attrs:{"class":"katex"}},[_c('span',{pre:true,attrs:{"class":"katex-mathml"}},[_c('math',{pre:true,attrs:{"xmlns":"http://www.w3.org/1998/Math/MathML","display":"block"}},[_c('semantics',{pre:true},[_c('mrow',{pre:true},[_c('mn',{pre:true},[_v("3")]),_c('mi',{pre:true},[_v("x")]),_c('mo',{pre:true},[_v("+")]),_c('mi',{pre:true},[_v("y")]),_c('mo',{pre:true},[_v("=")]),_c('mn',{pre:true},[_v("11")])],1),_c('annotation',{pre:true,attrs:{"encoding":"application/x-tex","v-pre":""}},[_v(" 3x + y = 11 ")])],1)],1)],1),_c('span',{pre:true,attrs:{"class":"katex-html","aria-hidden":"true"}},[_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.72777em;vertical-align:-0.08333em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("3")]),_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("x")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.625em;vertical-align:-0.19444em;"}}),_c('span',{pre:true,attrs:{"class":"mord mathnormal","style":"margin-right:0.03588em;"}},[_v("y")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.64444em;vertical-align:0em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("1")]),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("1")])])])])])]),_c('span',[_v("(1)")])],1),_v(" "),_c('section',{staticClass:"eqno"},[_c('eqn',{pre:true},[_c('span',{pre:true,attrs:{"class":"katex-display"}},[_c('span',{pre:true,attrs:{"class":"katex"}},[_c('span',{pre:true,attrs:{"class":"katex-mathml"}},[_c('math',{pre:true,attrs:{"xmlns":"http://www.w3.org/1998/Math/MathML","display":"block"}},[_c('semantics',{pre:true},[_c('mrow',{pre:true},[_c('mfrac',{pre:true},[_c('mrow',{pre:true},[_c('mn',{pre:true},[_v("2")]),_c('mi',{pre:true},[_v("x")])],1),_c('mn',{pre:true},[_v("3")])],1),_c('mo',{pre:true},[_v("+")]),_c('mfrac',{pre:true},[_c('mrow',{pre:true},[_c('mn',{pre:true},[_v("2")]),_c('mi',{pre:true},[_v("y")])],1),_c('mn',{pre:true},[_v("3")])],1),_c('mo',{pre:true},[_v("=")]),_c('mn',{pre:true},[_v("8")])],1),_c('annotation',{pre:true,attrs:{"encoding":"application/x-tex","v-pre":""}},[_v("\\frac{2x}{3} + \\frac{2y}{3} = 8")])],1)],1)],1),_c('span',{pre:true,attrs:{"class":"katex-html","aria-hidden":"true"}},[_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:2.00744em;vertical-align:-0.686em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mopen nulldelimiter"}}),_c('span',{pre:true,attrs:{"class":"mfrac"}},[_c('span',{pre:true,attrs:{"class":"vlist-t vlist-t2"}},[_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:1.32144em;"}},[_c('span',{pre:true,attrs:{"style":"top:-2.314em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord"}},[_v("3")])])]),_c('span',{pre:true,attrs:{"style":"top:-3.23em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"frac-line","style":"border-bottom-width:0.04em;"}})]),_c('span',{pre:true,attrs:{"style":"top:-3.677em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord"}},[_v("2")]),_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("x")])])])]),_c('span',{pre:true,attrs:{"class":"vlist-s"}},[_v("​")])]),_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:0.686em;"}},[_c('span')])])])]),_c('span',{pre:true,attrs:{"class":"mclose nulldelimiter"}})]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:2.00744em;vertical-align:-0.686em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mopen nulldelimiter"}}),_c('span',{pre:true,attrs:{"class":"mfrac"}},[_c('span',{pre:true,attrs:{"class":"vlist-t vlist-t2"}},[_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:1.32144em;"}},[_c('span',{pre:true,attrs:{"style":"top:-2.314em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord"}},[_v("3")])])]),_c('span',{pre:true,attrs:{"style":"top:-3.23em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"frac-line","style":"border-bottom-width:0.04em;"}})]),_c('span',{pre:true,attrs:{"style":"top:-3.677em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord"}},[_v("2")]),_c('span',{pre:true,attrs:{"class":"mord mathnormal","style":"margin-right:0.03588em;"}},[_v("y")])])])]),_c('span',{pre:true,attrs:{"class":"vlist-s"}},[_v("​")])]),_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:0.686em;"}},[_c('span')])])])]),_c('span',{pre:true,attrs:{"class":"mclose nulldelimiter"}})]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.64444em;vertical-align:0em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("8")])])])])])]),_c('span',[_v("(2)")])],1),_v(" "),_c('p',[_v("Euler's equation "),_c('eq',{pre:true},[_c('span',{pre:true,attrs:{"class":"katex"}},[_c('span',{pre:true,attrs:{"class":"katex-mathml"}},[_c('math',{pre:true,attrs:{"xmlns":"http://www.w3.org/1998/Math/MathML"}},[_c('semantics',{pre:true},[_c('mrow',{pre:true},[_c('msup',{pre:true},[_c('mi',{pre:true},[_v("e")]),_c('mrow',{pre:true},[_c('mi',{pre:true},[_v("i")]),_c('mi',{pre:true},[_v("π")])],1)],1),_c('mo',{pre:true},[_v("+")]),_c('mn',{pre:true},[_v("1")]),_c('mo',{pre:true},[_v("=")]),_c('mn',{pre:true},[_v("0")])],1),_c('annotation',{pre:true,attrs:{"encoding":"application/x-tex","v-pre":""}},[_v(" e^{i\\pi}+1=0 ")])],1)],1)],1),_c('span',{pre:true,attrs:{"class":"katex-html","aria-hidden":"true"}},[_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.907994em;vertical-align:-0.08333em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("e")]),_c('span',{pre:true,attrs:{"class":"msupsub"}},[_c('span',{pre:true,attrs:{"class":"vlist-t"}},[_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:0.824664em;"}},[_c('span',{pre:true,attrs:{"style":"top:-3.063em;margin-right:0.05em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:2.7em;"}}),_c('span',{pre:true,attrs:{"class":"sizing reset-size6 size3 mtight"}},[_c('span',{pre:true,attrs:{"class":"mord mtight"}},[_c('span',{pre:true,attrs:{"class":"mord mathnormal mtight"}},[_v("i")]),_c('span',{pre:true,attrs:{"class":"mord mathnormal mtight","style":"margin-right:0.03588em;"}},[_v("π")])])])])])])])])]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.64444em;vertical-align:0em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("1")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.64444em;vertical-align:0em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("0")])])])])]),_v(" is a beautiful equation.")],1)])],1)])],1),_v(" "),_m(17),_v(" "),_c('box',[_c('div',[_c('p',[_c('span',{staticClass:"badge badge-primary"},[_v("Primary")]),_v(" "),_c('span',{staticClass:"badge badge-pill badge-success"},[_v("Success")]),_v(" "),_c('button',{staticClass:"btn btn-primary",attrs:{"type":"button"}},[_v("\nDifficulty Level "),_c('span',{staticClass:"badge badge-light"},[_v("4")])])]),_v(" "),_c('h5',{staticClass:"no-index",attrs:{"id":"feature-y-stable"}},[_c('span',{staticClass:"anchor",attrs:{"id":"feature-y-stable"}}),_v("Feature Y "),_c('span',{staticClass:"badge badge-pill badge-warning"},[_v("stable")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#feature-y-stable","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"badges-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"badges-2"}}),_v("Badges"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#badges-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_v("Normal:\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-primary\"")]),_v(">")]),_v("Primary"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-secondary\"")]),_v(">")]),_v("Secondary"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-success\"")]),_v(">")]),_v("Success"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-danger\"")]),_v(">")]),_v("Danger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-warning\"")]),_v(">")]),_v("Warning"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-info\"")]),_v(">")]),_v("Info"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-light\"")]),_v(">")]),_v("Light"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-dark\"")]),_v(">")]),_v("Dark"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("Pills:\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-pill badge-primary\"")]),_v(">")]),_v("Primary"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-pill badge-secondary\"")]),_v(">")]),_v("Secondary"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-pill badge-success\"")]),_v(">")]),_v("Success"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-pill badge-danger\"")]),_v(">")]),_v("Danger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-pill badge-warning\"")]),_v(">")]),_v("Warning"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-pill badge-info\"")]),_v(">")]),_v("Info"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-pill badge-light\"")]),_v(">")]),_v("Light"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-pill badge-dark\"")]),_v(">")]),_v("Dark"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Normal:\n"),_c('span',{staticClass:"badge badge-primary"},[_v("Primary")]),_v(" "),_c('span',{staticClass:"badge badge-secondary"},[_v("Secondary")]),_v(" "),_c('span',{staticClass:"badge badge-success"},[_v("Success")]),_v(" "),_c('span',{staticClass:"badge badge-danger"},[_v("Danger")]),_v(" "),_c('span',{staticClass:"badge badge-warning"},[_v("Warning")]),_v(" "),_c('span',{staticClass:"badge badge-info"},[_v("Info")]),_v(" "),_c('span',{staticClass:"badge badge-light"},[_v("Light")]),_v(" "),_c('span',{staticClass:"badge badge-dark"},[_v("Dark")]),_v(" "),_c('br'),_v("Pills:\n"),_c('span',{staticClass:"badge badge-pill badge-primary"},[_v("Primary")]),_v(" "),_c('span',{staticClass:"badge badge-pill badge-secondary"},[_v("Secondary")]),_v(" "),_c('span',{staticClass:"badge badge-pill badge-success"},[_v("Success")]),_v(" "),_c('span',{staticClass:"badge badge-pill badge-danger"},[_v("Danger")]),_v(" "),_c('span',{staticClass:"badge badge-pill badge-warning"},[_v("Warning")]),_v(" "),_c('span',{staticClass:"badge badge-pill badge-info"},[_v("Info")]),_v(" "),_c('span',{staticClass:"badge badge-pill badge-light"},[_v("Light")]),_v(" "),_c('span',{staticClass:"badge badge-pill badge-dark"},[_v("Dark")])])])],1)]),_v(" "),_c('p',[_v("You can use Badges in combination with headings, buttons, links, etc.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_v("Links:\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-primary\"")]),_v(">")]),_v("Primary"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-pill badge-warning\"")]),_v(">")]),_v("Warning"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("Buttons:\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Difficulty Level "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-light\"")]),_v(">")]),_v("4"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("Headings:\n")]),_c('span',[_v("\n")]),_c('span',[_v("### Feature X "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-danger\"")]),_v(">")]),_v("beta"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" {.no-index}\n")]),_c('span',[_v("##### Feature Y "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-pill badge-success\"")]),_v(">")]),_v("stable"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" {.no-index}\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Links:\n"),_c('a',{staticClass:"badge badge-primary",attrs:{"href":"#"}},[_v("Primary")]),_v(" "),_c('a',{staticClass:"badge badge-pill badge-warning",attrs:{"href":"#"}},[_v("Warning")])]),_v(" "),_c('p',[_v("Buttons:\n"),_c('button',{staticClass:"btn btn-primary",attrs:{"type":"button"}},[_v("\nDifficulty Level "),_c('span',{staticClass:"badge badge-light"},[_v("4")])])]),_v(" "),_c('p',[_v("Headings:")]),_v(" "),_c('h3',{staticClass:"no-index",attrs:{"id":"feature-x-beta"}},[_c('span',{staticClass:"anchor",attrs:{"id":"feature-x-beta"}}),_v("Feature X "),_c('span',{staticClass:"badge badge-danger"},[_v("beta")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#feature-x-beta","onclick":"event.stopPropagation()"}})]),_v(" "),_c('h5',{staticClass:"no-index",attrs:{"id":"feature-y-stable-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"feature-y-stable-2"}}),_v("Feature Y "),_c('span',{staticClass:"badge badge-pill badge-success"},[_v("stable")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#feature-y-stable-2","onclick":"event.stopPropagation()"}})])])],1)]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" You can refer to "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/4.2/components/badge/"}},[_v("Bootstrap documentation")]),_v(" to find more information about Badges.")])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-primary\"")]),_v(">")])]),_v("Primary"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-pill badge-success\"")]),_v(">")])]),_v("Success"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-primary\"")]),_v(">")])]),_v("\n")]),_c('span',[_v(" Difficulty Level "),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-light\"")]),_v(">")])]),_v("4"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_c('span',{staticClass:"badge badge-primary"},[_v("Primary")]),_v(" "),_c('span',{staticClass:"badge badge-pill badge-success"},[_v("Success")]),_v(" "),_c('button',{staticClass:"btn btn-primary",attrs:{"type":"button"}},[_v("\nDifficulty Level "),_c('span',{staticClass:"badge badge-light"},[_v("4")])])]),_v(" "),_c('h5',{staticClass:"no-index",attrs:{"id":"feature-y-stable-3"}},[_c('span',{staticClass:"anchor",attrs:{"id":"feature-y-stable-3"}}),_v("Feature Y "),_c('span',{staticClass:"badge badge-pill badge-warning"},[_v("stable")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#feature-y-stable-3","onclick":"event.stopPropagation()"}})])])])])],1),_v(" "),_m(18),_v(" "),_c('box',[_c('div',[_c('box',[_v("\n default\n")]),_v(" "),_c('box',{attrs:{"type":"info"}},[_v("\n info\n")]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_v("\n warning\n")]),_v(" "),_c('box',{attrs:{"type":"success"}},[_v("\n success\n")]),_v(" "),_c('box',{attrs:{"type":"important"}},[_v("\n important\n")]),_v(" "),_c('box',{attrs:{"type":"wrong"}},[_v("\n wrong\n")]),_v(" "),_c('box',{attrs:{"type":"tip"}},[_v("\n tip\n")]),_v(" "),_c('box',{attrs:{"type":"definition"}},[_v("\n definition\n")])],1),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"boxes-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"boxes-2"}}),_v("Boxes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#boxes-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Boxes come with different built-in types.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("\n")]),_c('span',[_v(" default\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" info\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" warning\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" success\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"important\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" important\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"wrong\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" wrong\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tip\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" tip\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" definition\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("dismissible")]),_v(">")]),_v("\n")]),_c('span',[_v(" dismissible info\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#### Header :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon-size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"2x\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"You can use **markdown** here! :pizza:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("dismissible")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',[_v("\n default\n")]),_v(" "),_c('box',{attrs:{"type":"info"}},[_v("\n info\n")]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_v("\n warning\n")]),_v(" "),_c('box',{attrs:{"type":"success"}},[_v("\n success\n")]),_v(" "),_c('box',{attrs:{"type":"important"}},[_v("\n important\n")]),_v(" "),_c('box',{attrs:{"type":"wrong"}},[_v("\n wrong\n")]),_v(" "),_c('box',{attrs:{"type":"tip"}},[_v("\n tip\n")]),_v(" "),_c('box',{attrs:{"type":"definition"}},[_v("\n definition\n")]),_v(" "),_c('box',{attrs:{"type":"info","dismissible":""}},[_v("\n dismissible info\n")]),_v(" "),_c('box',{attrs:{"type":"success","icon-size":"2x"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h4',{attrs:{"id":"header"}},[_c('span',{staticClass:"anchor",attrs:{"id":"header"}}),_v("Header 🚀"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#header","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('p',[_v("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.")]),_v(" "),_c('box',{attrs:{"type":"warning","dismissible":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("You can use "),_c('strong',[_v("markdown")]),_v(" here! 🍕")])]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n ")])],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("The built in types can be colored.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("\n")]),_c('span',[_v(" default\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" primary\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"secondary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" secondary\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" success\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"danger\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" danger\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" warning\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" info\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"light\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dark\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" dark\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',[_v("\n default\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"primary"}},[_v("\n primary\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"secondary"}},[_v("\n secondary\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"success"}},[_v("\n success\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"danger"}},[_v("\n danger\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"warning"}},[_v("\n warning\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"info"}},[_v("\n info\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"light"}},[_v("\n light\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"dark"}},[_v("\n dark\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Markbind also supports a light color scheme for boxes")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" default light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" info light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" warning light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" success light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"important\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" important light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"wrong\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" wrong light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tip\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" tip light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" definition light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"##### Header markdown :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" definition light with header markdown\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',{attrs:{"light":""}},[_v("\n default light\n")]),_v(" "),_c('box',{attrs:{"type":"info","light":""}},[_v("\n info light\n")]),_v(" "),_c('box',{attrs:{"type":"warning","light":""}},[_v("\n warning light\n")]),_v(" "),_c('box',{attrs:{"type":"success","light":""}},[_v("\n success light\n")]),_v(" "),_c('box',{attrs:{"type":"important","light":""}},[_v("\n important light\n")]),_v(" "),_c('box',{attrs:{"type":"wrong","light":""}},[_v("\n wrong light\n")]),_v(" "),_c('box',{attrs:{"type":"tip","light":""}},[_v("\n tip light\n")]),_v(" "),_c('box',{attrs:{"type":"definition","light":""}},[_v("\n definition light\n")]),_v(" "),_c('box',{attrs:{"type":"definition","light":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('h5',{attrs:{"id":"header-markdown"}},[_c('span',{staticClass:"anchor",attrs:{"id":"header-markdown"}}),_v("Header markdown 🚀"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#header-markdown","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v("\n definition light with header markdown\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("MarkBind also supports a seamless style of boxes")])]),_v(" "),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("As "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("light")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("seamless")]),_v(" are mutually exclusive styles, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("light")]),_v(" takes priority over "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("seamless")]),_v(".")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" default seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" info seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" warning seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" success seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"important\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" important seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"wrong\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" wrong seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tip\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" tip seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("dismissible")]),_v(">")]),_v("\n")]),_c('span',[_v(" dismissible definition seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"##### Header markdown :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" success seamless with header markdown\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',{attrs:{"seamless":""}},[_v("\n default seamless\n")]),_v(" "),_c('box',{attrs:{"type":"info","seamless":""}},[_v("\n info seamless\n")]),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_v("\n warning seamless\n")]),_v(" "),_c('box',{attrs:{"type":"success","seamless":""}},[_v("\n success seamless\n")]),_v(" "),_c('box',{attrs:{"type":"important","seamless":""}},[_v("\n important seamless\n")]),_v(" "),_c('box',{attrs:{"type":"wrong","seamless":""}},[_v("\n wrong seamless\n")]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_v("\n tip seamless\n")]),_v(" "),_c('box',{attrs:{"type":"definition","seamless":"","dismissible":""}},[_v("\n dismissible definition seamless\n")]),_v(" "),_c('box',{attrs:{"type":"definition","seamless":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('h5',{attrs:{"id":"header-markdown-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"header-markdown-2"}}),_v("Header markdown 🚀"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#header-markdown-2","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v("\n success seamless with header markdown\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("You can further customize the Box's appearance.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("background-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#ffca6a\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("border-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"grey\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("border-left-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#8b5a01\"")]),_v(">")]),_v("\n")]),_c('span',[_v("default type, styled as an orange box with a brown left border\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"red\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":rocket:\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("info, with a custom markdown rocket icon and `red` colored text.\n")]),_c('span',[_v("\n")]),_c('span',[_v("You can use any inline markdown in the `icon` property.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',{attrs:{"background-color":"#ffca6a","border-color":"grey","border-left-color":"#8b5a01"}},[_v("\ndefault type, styled as an orange box with a brown left border\n")]),_v(" "),_c('box',{attrs:{"type":"info","color":"red"},scopedSlots:_u([{key:"icon",fn:function(){return [_v("🚀")]},proxy:true}])},[_v(" "),_c('p',[_v("info, with a custom markdown rocket icon and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("red")]),_v(" colored text.")]),_v(" "),_c('p',[_v("You can use any inline markdown in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("icon")]),_v(" property.")])])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("You can remove the background, icon and borders of preset styles.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-icon")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-background")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" success box without a tick icon and backgound\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-border")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" definition type box, light style without border\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',{attrs:{"no-icon":"","no-background":"","type":"success"}},[_v("\n success box without a tick icon and backgound\n")]),_v(" "),_c('box',{attrs:{"no-border":"","type":"definition","light":""}},[_v("\n definition type box, light style without border\n")])],1)],1)]),_v(" "),_c('box',{attrs:{"type":"info","seamless":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Note")])]},proxy:true}])},[_v(" "),_c('p',[_v("Custom styles "),_c('strong',[_v("(")]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("background-color")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("border-color")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("border-left-color")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("icon")]),_v(" "),_c('strong',[_v(")")]),_v(" as introduced in the previous section, takes precedence over the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-background")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-border")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-icon")]),_v(" attributes.")])]),_v(" "),_c('p',[_c('strong',[_v("You can also use icons, resize them and change their color accordingly.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-camera:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-camera:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon-size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"2x\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-camera:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon-size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"3x\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-camera:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"red\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon-size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"3x\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',{attrs:{"type":"success"},scopedSlots:_u([{key:"icon",fn:function(){return [_c('span',{staticClass:"fas fa-camera",attrs:{"aria-hidden":"true"}})]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit\n")]),_v(" "),_c('box',{attrs:{"type":"warning","icon-size":"2x"},scopedSlots:_u([{key:"icon",fn:function(){return [_c('span',{staticClass:"fas fa-camera",attrs:{"aria-hidden":"true"}})]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n")]),_v(" "),_c('box',{attrs:{"type":"definition","icon-size":"3x"},scopedSlots:_u([{key:"icon",fn:function(){return [_c('span',{staticClass:"fas fa-camera",attrs:{"aria-hidden":"true"}})]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n")]),_v(" "),_c('box',{attrs:{"type":"info","icon-color":"red","icon-size":"3x"},scopedSlots:_u([{key:"icon",fn:function(){return [_c('span',{staticClass:"fas fa-camera",attrs:{"aria-hidden":"true"}})]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("background-color")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',[_v("border-color")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',[_v("border-left-color")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Overrides border-color for the left border.")])]),_v(" "),_c('tr',[_c('td',[_v("color")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Color of the text.")])]),_v(" "),_c('tr',[_c('td',[_v("dismissible")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Adds a button to close the box to the top right corner.")])]),_v(" "),_c('tr',[_c('td',[_v("icon"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Inline MarkDown text of the icon displayed on the left.")])]),_v(" "),_c('tr',[_c('td',[_v("icon-size")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Resizes the icon. Supports integer-scaling of the icon dimensions e.g. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("2x")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("3x")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("4x")]),_v(", etc.")])]),_v(" "),_c('tr',[_c('td',[_v("icon-color")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Color of the icon.")])]),_v(" "),_c('tr',[_c('td',[_v("header"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Markdown text of the box header.")])]),_v(" "),_c('tr',[_c('td',[_v("type")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("info")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("warning")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("success")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("important")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("wrong")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tip")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("definition")]),_v(", or empty for default.")])]),_v(" "),_c('tr',[_c('td',[_v("theme")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("primary")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("secondary")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("success")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("danger")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("warning")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tip")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("light")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("dark")]),_v(" or empty for default.")])]),_v(" "),_c('tr',[_c('td',[_v("light")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Uses a light color scheme for the box.")])]),_v(" "),_c('tr',[_c('td',[_v("seamless")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Uses a seamless style for the box. If "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("light")]),_v(" is specified, this style will not be activated.")])]),_v(" "),_c('tr',[_c('td',[_v("no-border")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Removes border, except if styled by "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("border-color")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("border-left-color")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("no-backgound")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Removes background, except if styled by "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("backgound-color")]),_v(" option.")])]),_v(" "),_c('tr',[_c('td',[_v("no-icon")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Removes icon, except if icon is displayed via "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("icon")]),_v(" option.")])])])])]),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" warning\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('box',[_v("\n default\n")]),_v(" "),_c('box',{attrs:{"type":"info"}},[_v("\n info\n")]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_v("\n warning\n")]),_v(" "),_c('box',{attrs:{"type":"success"}},[_v("\n success\n")]),_v(" "),_c('box',{attrs:{"type":"important"}},[_v("\n important\n")]),_v(" "),_c('box',{attrs:{"type":"wrong"}},[_v("\n wrong\n")]),_v(" "),_c('box',{attrs:{"type":"tip"}},[_v("\n tip\n")]),_v(" "),_c('box',{attrs:{"type":"definition"}},[_v("\n definition\n")])],1)],1)])],1),_v(" "),_m(19),_v(" "),_c('box',[_c('div',[_c('panel',{attrs:{"type":"minimal"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("minimal type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("seamless type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"info","expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("info type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"danger"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("danger type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"warning"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("warning type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"success"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("success type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('p'),_v(" "),_c('panel',{attrs:{"type":"light","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("light type panel (DEFAULT)")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"dark","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("dark type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"primary","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("primary type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"secondary","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("secondary type panel")])]},proxy:true}])},[_v("\n ...\n")])],1),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"panels-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"panels-2"}}),_v("Panels"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#panels-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Panel is a flexible container that supports collapsing and expanding its content. It is expandable by default.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This is your header for a Panel, click me to expand!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This is your header for a Panel, click me to expand!")])]},proxy:true}])},[_v("\n Lorem ipsum ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("With "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("minimized")]),_v(" attribute, panel is minimized into an inline block element. The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("alt")]),_v(" attribute is for you to specify the minimized block header.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"How to cultivate a tomato plant at home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tomatoes\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("How to cultivate a tomato plant at home")])]},proxy:true},{key:"_alt",fn:function(){return [_c('p',[_v("Tomatoes")])]},proxy:true}])},[_v("\n Lorem ipsum ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("With "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("expanded")]),_v(" attribute, you can set the panels to be expanded when loaded in.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Have your readers click less to see the Panel's contents\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("expanded")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Have your readers click less to see the Panel's contents")])]},proxy:true}])},[_v("\n Lorem ipsum ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("With the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("expand-headerless")]),_v(" attribute, you can hide the panel header when it is expanded.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This header will only show when the Panel is collapsed\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("expand-headerless")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"expand-headerless":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This header will only show when the Panel is collapsed")])]},proxy:true}])},[_v("\n Lorem ipsum ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("With the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("peek")]),_v(" attribute, you may showcase part of your content without expanding the panel.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Give your readers a peek of the content without expanding Panel\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("peek")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n")]),_c('span',[_v(" magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n")]),_c('span',[_v(" consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n")]),_c('span',[_v(" Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n")]),_c('span',[_v(" Curabitur ornare ipsum eu ex congue egestas. Maecenas pretium nibh sed enim ornare finibus. Mauris quis metus \n")]),_c('span',[_v(" facilisis, mattis tellus nec, pulvinar mi. Quisque at vehicula lectus. Ut ac lacus mi. Donec mattis nec velit \n")]),_c('span',[_v(" eget tincidunt. Maecenas vel mauris mattis nisl tempor sollicitudin. Orci varius natoque penatibus et magnis \n")]),_c('span',[_v(" dis parturient montes, nascetur ridiculus mus. Duis tincidunt diam eu dolor pellentesque, eget dignissim tortor \n")]),_c('span',[_v(" pellentesque. \n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"peek":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Give your readers a peek of the content without expanding Panel")])]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n Curabitur ornare ipsum eu ex congue egestas. Maecenas pretium nibh sed enim ornare finibus. Mauris quis metus \n facilisis, mattis tellus nec, pulvinar mi. Quisque at vehicula lectus. Ut ac lacus mi. Donec mattis nec velit \n eget tincidunt. Maecenas vel mauris mattis nisl tempor sollicitudin. Orci varius natoque penatibus et magnis \n dis parturient montes, nascetur ridiculus mus. Duis tincidunt diam eu dolor pellentesque, eget dignissim tortor \n pellentesque. \n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Panel provides many types that change its appearance.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**light type panel (DEFAULT)**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"light\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**dark type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dark\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**primary type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**secondary type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"secondary\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**info type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**danger type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"danger\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**warning type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**success type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**seamless type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"seamless\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**minimal type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"minimal\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"type":"light","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("light type panel (DEFAULT)")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"dark","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("dark type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"primary","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("primary type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"secondary","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("secondary type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"info","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("info type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"danger","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("danger type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"warning","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("warning type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"success","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("success type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"seamless","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("seamless type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"minimal","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("minimal type panel")])])]},proxy:true}])},[_v("\n ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Show/Hide buttons using "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-switch")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-close")]),_v(".")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This panel does not have a switch button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-switch")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This panel does not have a close button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-close")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This panel does not have either buttons\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-close")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-switch")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"no-switch":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This panel does not have a switch button")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"no-close":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This panel does not have a close button")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"no-close":"","no-switch":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This panel does not have either buttons")])]},proxy:true}])},[_v("\n ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Use markdown in the header (only inline level markdown are supported).")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**Bold text** :rocket: ![](https://markbind.org/images/logo-lightbackground.png =x20)\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"seamless\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("Bold text")]),_v(" 🚀 "),_c('a',{attrs:{"href":"https://markbind.org/images/logo-lightbackground.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","alt":""}})])])]},proxy:true}])},[_v("\n ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("If "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" attribute is provided, the panel will take content from the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" specified and add it to the Panel body.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Content loaded in from 'src'\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"extra/loadContent.html#fragment\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('panel',{attrs:{"src":"/userGuide/syntax/extra/loadContent._include_.html#fragment","minimized":"","fragment":"fragment"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Content loaded in from 'src'")])]},proxy:true}])})],1)])],1)]),_v(" "),_c('p',[_c('strong',[_v("If "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("popup-url")]),_v(" attribute is provided, a popup button will be shown. If clicked, it opens the specified url in a new window.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Try clicking on my pop-up button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("popup-url")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/syntax/extra/loadContent.html\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" This panel has a popup.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"popup-url":"/userGuide/syntax/extra/loadContent.html"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Try clicking on my pop-up button")])]},proxy:true}])},[_v("\n This panel has a popup.\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("If "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("preload")]),_v(" attribute is provided, the panel body will load the HTML when the page renders instead of after being expanded.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Right click and inspect my HTML before expanding me!\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"extra/loadContent.html#fragment\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("preload")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("You should be able to find this text before expanding the Panel."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"src":"/userGuide/syntax/extra/loadContent._include_.html#fragment","preload":"","fragment":"fragment"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Right click and inspect my HTML before expanding me!")])]},proxy:true}])},[_v(" "),_c('p',[_v("You should be able to find this text before expanding the Panel.")])])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("You can nest Panels or other components within a Panel.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Parent Panel\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Level 1 Nested Panel\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Level 2 Nested Panel\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tip-box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" I'm a nested tip-box\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Level 3 Nested Panel\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"minimal\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" minimal-type panel\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Level 1 Nested Panel\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Some Text\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Parent Panel")])]},proxy:true}])},[_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Level 1 Nested Panel")])]},proxy:true}])},[_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Level 2 Nested Panel")])]},proxy:true}])},[_v(" "),_c('tip-box',{attrs:{"type":"success"}},[_v("\n I'm a nested tip-box\n ")]),_v(" "),_c('panel',{attrs:{"type":"minimal"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Level 3 Nested Panel")])]},proxy:true}])},[_v("\n minimal-type panel\n ")])],1)],1),_v(" "),_c('panel',{attrs:{"type":"info"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Level 1 Nested Panel")])]},proxy:true}])},[_v("\n Some Text\n ")])],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("header"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("The clickable text on the Panel's header. Supports MarkDown text.")])]),_v(" "),_c('tr',[_c('td',[_v("alt")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_v("Panel header")]),_v(" "),_c('td',[_v("The clickable text on the minimised Panel. Supports MarkDown text.")])]),_v(" "),_c('tr',[_c('td',[_v("expandable")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("true")])]),_v(" "),_c('td',[_v("Whether Panel is expandable.")])]),_v(" "),_c('tr',[_c('td',[_v("expanded")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether Panel is expanded or collapsed when loaded in.")])]),_v(" "),_c('tr',[_c('td',[_v("minimized")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether Panel is minimized.")])]),_v(" "),_c('tr',[_c('td',[_v("expand-headerless")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether to hide the header text when the Panel is expanded.")])]),_v(" "),_c('tr',[_c('td',[_v("peek")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether to show part of the content when the Panel is collapsed.")])]),_v(" "),_c('tr',[_c('td',[_v("no-close")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether to show the close button.")])]),_v(" "),_c('tr',[_c('td',[_v("no-switch")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether to show the expand switch.")])]),_v(" "),_c('tr',[_c('td',[_v("bottom-switch")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("true")])]),_v(" "),_c('td',[_v("Whether to show an expand switch at the bottom of the panel. Independent of no-switch.")])]),_v(" "),_c('tr',[_c('td',[_v("popup-url")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The url that the popup window will navigate to. The url can be absolute or relative.")])]),_v(" "),_c('tr',[_c('td',[_v("preload")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether the content is loaded immediately from "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("src")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The url to the remote page to be loaded as the content of the panel.")])]),_v(" "),_c('tr',[_c('td',[_v("type")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("light")])]),_v(" "),_c('td',[_v("The type or color scheme of the panel (single)."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("light")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("dark")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("primary")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("secondary")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("info")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("success")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("warning")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("danger")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("seamless")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("minimal")]),_v(".")])])])])]),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary type panel\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(" >")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('panel',{attrs:{"type":"minimal"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("minimal type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("seamless type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"info","expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("info type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"danger"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("danger type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"warning"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("warning type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"success"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("success type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('p'),_v(" "),_c('panel',{attrs:{"type":"light","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("light type panel (DEFAULT)")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"dark","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("dark type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"primary","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("primary type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"secondary","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("secondary type panel")])]},proxy:true}])},[_v("\n ...\n")])],1)])])],1),_v(" "),_m(20),_v(" "),_c('box',[_c('div',[_c('tabs',[_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("First tab")]},proxy:true}])},[_v("\n Content of the first tab\n ")]),_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Second tab")]},proxy:true}])},[_v("\n Contents of the second tab\n ")]),_v(" "),_c('tab-group',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Third tab group 📺")]},proxy:true}])},[_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Stars ⭐️")]},proxy:true}])},[_v("\n Some stuff about stars ...\n ")]),_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Moon")]},proxy:true}])},[_v("\n Some stuff about the moon ...\n ")])],1)],1)],1),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"tabs-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tabs-2"}}),_v("Tabs"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tabs-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tabs")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"First tab\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Disabled second tab :x:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("disabled")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tab not printed\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"d-print-none\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" This tab will not be printed.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Third tab group :milky_way:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Stars :star:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Some stuff about stars ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Disabled Moon :new_moon:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("disabled")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Disabled fourth tab group\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("disabled")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hidden tab\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('tabs',[_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("First tab")]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n ")]),_v(" "),_c('tab',{attrs:{"disabled":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Disabled second tab ❌")]},proxy:true}])}),_v(" "),_c('tab',{staticClass:"d-print-none",scopedSlots:_u([{key:"header",fn:function(){return [_v("Tab not printed")]},proxy:true}])},[_v("\n This tab will not be printed.\n ")]),_v(" "),_c('tab-group',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Third tab group 🌌")]},proxy:true}])},[_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Stars ⭐️")]},proxy:true}])},[_v("\n Some stuff about stars ...\n ")]),_v(" "),_c('tab',{attrs:{"disabled":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Disabled Moon 🌑")]},proxy:true}])})],1),_v(" "),_c('tab-group',{attrs:{"disabled":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Disabled fourth tab group")]},proxy:true}])},[_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Hidden tab")]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n ")])],1)],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tabs")]),_v(":")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("active")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Number")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0")])]),_v(" "),_c('td',[_v("Active Tab index (0-based)")])])])])]),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tab")]),_v(":")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("header")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Tab title.")])]),_v(" "),_c('tr',[_c('td',[_v("disabled")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether Tab is clickable and can be activated.")])])])])]),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tab-group")]),_v(":")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("header")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Tab Group title.")])]),_v(" "),_c('tr',[_c('td',[_v("disabled")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether Tab Group is clickable and can be activated.")])])])])]),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("Tabs, tab group and individual tab can be omitted during printing by adding bootstrap's display property "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("class=\"d-print-none\"")]),_v(" to the respective components.")])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tabs")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"First tab\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Content of the first tab\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Second tab\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Contents of the second tab\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Third tab group :tv:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Stars :star:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Some stuff about stars ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Moon\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Some stuff about the moon ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('tabs',[_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("First tab")]},proxy:true}])},[_v("\n Content of the first tab\n ")]),_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Second tab")]},proxy:true}])},[_v("\n Contents of the second tab\n ")]),_v(" "),_c('tab-group',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Third tab group 📺")]},proxy:true}])},[_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Stars ⭐️")]},proxy:true}])},[_v("\n Some stuff about stars ...\n ")]),_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Moon")]},proxy:true}])},[_v("\n Some stuff about the moon ...\n ")])],1)],1)],1)],1)])],1),_v(" "),_m(21),_v(" "),_c('box',[_c('div',[_c('pic',{attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","width":"300","alt":"Logo"}},[_v("\n MarkBind Logo\n")])],1),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"pictures-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"pictures-2"}}),_v("Pictures"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#pictures-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("A "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pic")]),_v(" component allows you to add captions below the image.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://markbind.org/images/logo-lightbackground.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"300\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Logo\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" MarkBind Logo\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://markbind.org/images/logo-lightbackground.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"300\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Logo\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("eager")]),_v(">")]),_v("\n")]),_c('span',[_v(" MarkBind Logo\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pic',{attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","width":"300","alt":"Logo"}},[_v("\n MarkBind Logo\n")]),_v(" "),_c('pic',{attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","width":"300","alt":"Logo","eager":""}},[_v("\n MarkBind Logo\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("alt")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_c('strong',[_v("This must be specified.")]),_c('br'),_v("The alternative text of the image.")])]),_v(" "),_c('tr',[_c('td',[_v("height")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The height of the image in pixels.")])]),_v(" "),_c('tr',[_c('td',[_v("src")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_c('strong',[_v("This must be specified.")]),_c('br'),_v("The URL of the image."),_c('br'),_v("The URL can be specified as absolute or relative references. More info in: "),_c('em',[_c('a',{attrs:{"href":"/userGuide/formattingContents.html#intraSiteLinks"}},[_v("Intra-Site Links")])])])]),_v(" "),_c('tr',[_c('td',[_v("width")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The width of the image in pixels."),_c('br'),_v("If both width and height are specified, width takes priority over height. It is to maintain the image's aspect ratio.")])]),_v(" "),_c('tr',[_c('td',[_v("eager")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boolean")])]),_v(" "),_c('td',[_v("false")]),_v(" "),_c('td',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" component lazy loads its images by default."),_c('br'),_v("If you want to eagerly load the images, simply specify this attribute.")])])])])]),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://markbind.org/images/logo-lightbackground.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"300\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Logo\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" MarkBind Logo\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('pic',{attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","width":"300","alt":"Logo"}},[_v("\n MarkBind Logo\n")])],1)])])],1),_v(" "),_m(22),_v(" "),_c('box',[_c('div',[_c('thumb',{pre:true,attrs:{"circle":"","src":"https://markbind.org/images/logo-lightbackground.png","size":"100"}})],1),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"thumbnails-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"thumbnails-2"}}),_v("Thumbnails"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#thumbnails-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("A "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("thumbnail")]),_v(" component allows you to insert thumbnails using text, images, or icons.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("circle")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../../images/deer.jpg\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("circle")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":book:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("background")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dff5ff\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("circle")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"___CS___\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("background")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#333\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("font-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"white\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("circle")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-book:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("font-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"darkgreen\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("border")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"3px solid darkgreen\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../../images/deer.jpg\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":book:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("background")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dff5ff\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"___CS___\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("background")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#333\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("font-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"white\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-book:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("font-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"darkgreen\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("border")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"3px solid darkgreen\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('thumbnail',{attrs:{"circle":"","src":"/images/deer.jpg","size":"100"}}),_v(" "),_c('thumbnail',{attrs:{"circle":"","background":"#dff5ff","size":"100"}},[_v("📖")]),_v(" "),_c('thumbnail',{attrs:{"circle":"","background":"#333","font-color":"white","size":"100"}},[_c('em',[_c('strong',[_v("CS")])])]),_v(" "),_c('thumbnail',{attrs:{"circle":"","font-color":"darkgreen","border":"3px solid darkgreen","size":"100"}},[_c('span',{staticClass:"fas fa-book",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('thumbnail',{attrs:{"src":"/images/deer.jpg","size":"100"}}),_v(" "),_c('thumbnail',{attrs:{"background":"#dff5ff","size":"100"}},[_v("📖")]),_v(" "),_c('thumbnail',{attrs:{"background":"#333","font-color":"white","size":"100"}},[_c('em',[_c('strong',[_v("CS")])])]),_v(" "),_c('thumbnail',{attrs:{"font-color":"darkgreen","border":"3px solid darkgreen","size":"100"}},[_c('span',{staticClass:"fas fa-book",attrs:{"aria-hidden":"true"}})])],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("alt")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_c('strong',[_v("This must be specified if "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" is specified")]),_c('br'),_v("The alternative text of the image.")])]),_v(" "),_c('tr',[_c('td',[_v("background")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("Specifies the background color."),_c('br'),_v(" Accepts any valid CSS background property")])]),_v(" "),_c('tr',[_c('td',[_v("border")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("Specifies the border thickness, type, and color."),_c('br'),_v(" Accepts any valid CSS border property")])]),_v(" "),_c('tr',[_c('td',[_v("circle")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boolean")])]),_v(" "),_c('td',[_v("false")]),_v(" "),_c('td',[_v("If this option is enabled, the thumbnail will be circle shaped instead of square")])]),_v(" "),_c('tr',[_c('td',[_v("font-color")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The color of the text, affects normal text and icons (but not emojis)")])]),_v(" "),_c('tr',[_c('td',[_v("font-size")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("Text size, defaults to half of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("size")]),_v(", affects text, icons and emojis")])]),_v(" "),_c('tr',[_c('td',[_v("size")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("100")]),_v(" "),_c('td',[_v("The size of the thumbnail in pixels")])]),_v(" "),_c('tr',[_c('td',[_v("src")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The URL of the image."),_c('br'),_v("The URL can be specified as absolute or relative references. More info in: "),_c('em',[_c('a',{attrs:{"href":"/userGuide/formattingContents.html#intraSiteLinks"}},[_v("Intra-Site Links")])])])]),_v(" "),_c('tr',[_c('td',[_v("text")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The text to use in the thumbnail, "),_c('a',{attrs:{"href":"/userGuide/formattingContents.html#icons"}},[_v("icons")]),_v(", "),_c('a',{attrs:{"href":"/userGuide/formattingContents.html#emoji"}},[_v("emojis")]),_v(" and markdown are supported here")])])])])]),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("If both "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("text")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" are specified, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" will take higher priority.")])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumb")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("circle")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://markbind.org/images/logo-lightbackground.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('thumb',{pre:true,attrs:{"circle":"","src":"https://markbind.org/images/logo-lightbackground.png","size":"100"}})],1)],1)])],1),_v(" "),_m(23),_v(" "),_c('box',[_c('div',[_c('div',[_c('p',[_c('strong',[_v("Sequence Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/sequence.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Use Case Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/usecase.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Class Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/class.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Activity Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/activity.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Component Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/component.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("State Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/state.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Object Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/object.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Gantt Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/gantt.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Entity Relation Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/entityrelation.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Ditaa Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/ditaa.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Archimate Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/archimate.png"}})],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"diagrams-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"diagrams-2"}}),_v("Diagrams"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#diagrams-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can use the "),_c('a',{attrs:{"href":"http://plantuml.com/"}},[_v("PlantUML")]),_v(" syntax to add diagrams.")]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_c('strong',[_c('a',{attrs:{"href":"https://www.java.com/en/download/"}},[_v("Java")]),_v(" and\n"),_c('a',{attrs:{"href":"https://www.graphviz.org/download/"}},[_v("Graphviz")]),_v("\nmust be installed to use this feature")])]),_v(" "),_c('ul',[_c('li',[_v("Java 8 or later (required to run the PlantUML JAR executable)")]),_v(" "),_c('li',[_v("Graphviz v2.38 or later (required to generate "),_c('em',[_v("all")]),_v(" diagrams)")])])]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("\n")]),_c('span',[_v("@startuml\n")]),_c('span',[_v("alice -> bob ++ : hello\n")]),_c('span',[_v("bob -> bob ++ : self call\n")]),_c('span',[_v("bob -> bib ++ #005500 : hello\n")]),_c('span',[_v("bob -> george ** : create\n")]),_c('span',[_v("return done\n")]),_c('span',[_v("return rc\n")]),_c('span',[_v("bob -> george !! : delete\n")]),_c('span',[_v("return success\n")]),_c('span',[_v("@enduml\n")]),_c('span',[_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('pic',{attrs:{"src":"/userGuide/diagrams/sequence.png","width":"300"}})],1)])],1)])]),_v(" "),_c('p',[_v("Alternatively, a PlantUML diagram can be specified in a separate "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".puml")]),_v(" file and inserted into a page using a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" tag.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("diagrams/sequence.puml")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("@startuml\n")]),_c('span',[_v("alice -> bob ++ : hello\n")]),_c('span',[_v("bob -> bob ++ : self call\n")]),_c('span',[_v("bob -> bib ++ #005500 : hello\n")]),_c('span',[_v("bob -> george ** : create\n")]),_c('span',[_v("return done\n")]),_c('span',[_v("return rc\n")]),_c('span',[_v("bob -> george !! : delete\n")]),_c('span',[_v("return success\n")]),_c('span',[_v("@enduml\n")])])]),_c('p',[_v("in another file:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("puml")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"diagrams/sequence.puml\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"300\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('pic',{attrs:{"src":"/userGuide/diagrams/sequence.png","width":"300"}})],1)])],1)]),_v(" "),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("The full PlantUML syntax reference can be found at "),_c('a',{attrs:{"href":"http://plantuml.com/guide"}},[_v("plantuml.com/guide")])])]),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("More examples")])]},proxy:true}])},[_v(" "),_c('span',{attrs:{"id":"puml-examples"}},[_c('p',[_c('strong',[_v("Sequence Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/sequence.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Use Case Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/usecase.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Class Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/class.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Activity Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/activity.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Component Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/component.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("State Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/state.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Object Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/object.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Gantt Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/gantt.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Entity Relation Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/entityrelation.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Ditaa Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/ditaa.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Archimate Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/archimate.png"}})],1)])]),_v(" "),_c('p'),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("alt")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The alternative text of the diagram.")])]),_v(" "),_c('tr',[_c('td',[_v("height")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The height of the diagram in pixels.")])]),_v(" "),_c('tr',[_c('td',[_v("name")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The name of the output file.")])]),_v(" "),_c('tr',[_c('td',[_v("src")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The URL of the diagram if your diagram is in another "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".puml")]),_v(" file."),_c('br'),_v("The URL can be specified as absolute or relative references. More info in: "),_c('em',[_c('a',{attrs:{"href":"/userGuide/formattingContents.html#intraSiteLinks"}},[_v("Intra-Site Links")])])])]),_v(" "),_c('tr',[_c('td',[_v("width")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The width of the diagram in pixels."),_c('br'),_v("If both width and height are specified, width takes priority over height. It is to maintain the diagram's aspect ratio.")])])])])]),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("\n")]),_c('span',[_v("@startuml\n")]),_c('span',[_v("alice -> bob ++ : hello\n")]),_c('span',[_v("bob -> bob ++ : self call\n")]),_c('span',[_v("@enduml\n")]),_c('span',[_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('div',[_c('p',[_c('strong',[_v("Sequence Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/sequence.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Use Case Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/usecase.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Class Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/class.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Activity Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/activity.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Component Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/component.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("State Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/state.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Object Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/object.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Gantt Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/gantt.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Entity Relation Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/entityrelation.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Ditaa Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/ditaa.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Archimate Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/archimate.png"}})],1)])])],1)])],1),_v(" "),_m(24),_v(" "),_c('box',[_c('div',[_c('p',[_v("Hover "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("An explanation, "),_c('strong',[_v("supports simple Markdown")])]),_v("here")]),_v(" to see a tooltip.\n")])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"tooltips-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tooltips-2"}}),_v("Tooltips"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tooltips-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on top"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"left\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on left"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on right"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"bottom\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on bottom"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("hr")]),_v(" />")]),_v("\n")]),_c('span',[_v("Trigger\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trigger")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"click\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Click"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(" />")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(" />")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trigger")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"focus\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("input")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Focus\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("**Markdown**:\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*Hello* **World**\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"\"")]),_v(">")]),_v("Hover me"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(" />")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("**Free Text**:\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"coupling is the degree of interdependence between software modules; a measure of how closely connected two routines or modules are; the strength of the relationships between modules.\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("i")]),_v(">")]),_v("coupling"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"placement":"top","data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on top")])]),_v(" "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.left.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"left":true,"html":true}}],staticClass:"trigger",attrs:{"placement":"left","data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on left")])]),_v(" "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.right.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"right":true,"html":true}}],staticClass:"trigger",attrs:{"placement":"right","data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on right")])]),_v(" "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.bottom.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"bottom":true,"html":true}}],staticClass:"trigger",attrs:{"placement":"bottom","data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on bottom")])]),_v(" "),_c('hr'),_v("\nTrigger\n"),_c('p',[_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.click.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"click":true,"top":true,"html":true}}],staticClass:"trigger-click",attrs:{"placement":"top","trigger":"click","data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Click")])]),_v(" "),_c('br'),_v(" "),_c('br'),_v(" "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.focus.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"focus":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"placement":"top","trigger":"focus","data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('input',{attrs:{"placeholder":"Focus"}})])]),_v(" "),_c('p',[_c('strong',[_v("Markdown")]),_v(":\n"),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_c('em',[_v("Hello")]),_v(" "),_c('strong',[_v("World")])]),_v(" "),_c('a',{attrs:{"href":""}},[_v("Hover me")])]),_v(" "),_c('br')]),_v(" "),_c('p',[_c('strong',[_v("Free Text")]),_v(":\n"),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("coupling is the degree of interdependence between software modules; a measure of how closely connected two routines or modules are; the strength of the relationships between modules.")]),_c('i',[_v("coupling")])])])])],1)]),_v(" "),_c('p',[_c('strong',[_v("Using trigger for Tooltip:")]),_c('br')]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_v("More about "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tt:trigger_id\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(".\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tt:trigger_id\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This tooltip triggered by a trigger\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v("This is the same "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tt:trigger_id\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" as last one.\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("More about "),_c('trigger',{attrs:{"for":"tt:trigger_id"}},[_v("trigger")]),_v(".\n"),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"id":"tt:trigger_id","data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("This tooltip triggered by a trigger")])]),_v(" "),_c('br'),_v("\nThis is the same "),_c('trigger',{attrs:{"for":"tt:trigger_id"}},[_v("trigger")]),_v(" as last one.")],1)])],1)]),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("More about triggers")])]},proxy:true}])},[_v(" "),_c('div',[_c('p',[_c('strong',[_c('strong',[_v("Triggers")])])]),_v(" "),_c('p',[_v("Trigger provides more flexibility in triggering contextual overlay via Tooltip, Popover or Modal.")]),_v(" "),_c('p',[_v("You could embed a Trigger within the text, and define the Tooltip, Popover or Modal at a separate location, which allows for a cleaner authoring flow.")]),_v(" "),_c('p',[_v("Specify the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(" attribute on the Tooltip, Popover or Modal component, and use the same "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(" in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("for")]),_v(" attribute of the Trigger to allow the Trigger to invoke the specific overlay elements.\nAdditionally, multiple Triggers could share the same overlay by providing them with the same "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(".\n"),_c('br')]),_v(" "),_c('p',[_c('strong',[_v("Trigger's "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("trigger")]),_v(" attribute (which defaults to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")]),_v(") is independent of the target's.")])]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("trigger")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")])]),_v(" "),_c('td',[_v("How the overlay view is triggered."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("click")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("focus")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("for")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("The id for the overlay view to be shown.")])]),_v(" "),_c('tr',[_c('td',[_v("placement")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("auto")])]),_v(" "),_c('td',[_v("How to position the Popover or Tooltip."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("auto")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("top")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("left")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("right")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bottom")]),_v(".")])])])])])])]),_c('p'),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("trigger")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")])]),_v(" "),_c('td',[_v("How the tooltip is triggered."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("click")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("focus")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("content")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Text content of the tooltip.")])]),_v(" "),_c('tr',[_c('td',[_v("placement")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("top")])]),_v(" "),_c('td',[_v("How to position the tooltip."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("top")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("left")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("right")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bottom")]),_v(".")])])])])]),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("Hover "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"An explanation, **supports simple Markdown**\"")]),_v(">")]),_v("here"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" to see a tooltip.\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("Hover "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("An explanation, "),_c('strong',[_v("supports simple Markdown")])]),_v("here")]),_v(" to see a tooltip.\n")])]),_c('p')],1)])],1),_v(" "),_m(25),_v(" "),_c('box',[_c('div',[_c('p',[_v("Hover over the "),_c('trigger',{attrs:{"for":"pop:context-target"}},[_v("keyword")]),_v(" to see the popover.")],1),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"id":"pop:context-target","placement":"top","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_v("Popover header")]),_v(" "),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_c('div',[_c('p',[_v("description 👍")])])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"popovers-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"popovers-2"}}),_v("Popovers"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#popovers-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fade\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on top"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fade\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"left\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on left"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fade\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on right"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fade\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"bottom\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on bottom"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("hr")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Header"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fade\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on top"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fade\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"left\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on left"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fade\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on right"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fade\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"bottom\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on bottom"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("hr")]),_v(" />")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"scale\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trigger")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hover\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Mouseenter"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Markdown"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"scale\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**Emoji header** :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"!!emoji!! content :cat:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Hover"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Content using slot"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"scale\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**Emoji header** :rocket:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"content\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" This is a long content...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Hover"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(" />")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(" />")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Wrap Text"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"false\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nice!\"")]),_v(">")]),_v("What do you say"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"fade","placement":"top","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on top")])]),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.left.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"left":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"fade","placement":"left","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on left")])]),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.right.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"right":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"fade","placement":"right","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on right")])]),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.bottom.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"bottom":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"fade","placement":"bottom","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on bottom")])]),_v(" "),_c('hr'),_v(" "),_c('h4',{staticClass:"no-index",attrs:{"id":"header-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"header-2"}}),_v("Header"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#header-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"fade","placement":"top","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_v("Header")]),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on top")])]),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.left.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"left":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"fade","placement":"left","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_v("Header")]),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on left")])]),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.right.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"right":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"fade","placement":"right","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_v("Header")]),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on right")])]),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.bottom.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"bottom":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"fade","placement":"bottom","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_v("Header")]),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on bottom")])]),_v(" "),_c('hr'),_v(" "),_c('h4',{staticClass:"no-index",attrs:{"id":"trigger"}},[_c('span',{staticClass:"anchor",attrs:{"id":"trigger"}}),_v("Trigger"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#trigger","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"scale","placement":"top","trigger":"hover","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_v("Header")]),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Mouseenter")])])]),_v(" "),_c('h4',{staticClass:"no-index",attrs:{"id":"markdown"}},[_c('span',{staticClass:"anchor",attrs:{"id":"markdown"}}),_v("Markdown"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#markdown","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"scale","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_c('strong',[_v("Emoji header")]),_v(" 🚀")]),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_c('span',{staticClass:"underline"},[_v("emoji")]),_v(" content 🐱")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Hover")])])]),_v(" "),_c('h4',{staticClass:"no-index",attrs:{"id":"content-using-slot"}},[_c('span',{staticClass:"anchor",attrs:{"id":"content-using-slot"}}),_v("Content using slot"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#content-using-slot","onclick":"event.stopPropagation()"}})]),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"scale","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_c('strong',[_v("Emoji header")]),_v(" 🚀")]),_v(" "),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_c('div',[_v("\n This is a long content...\n ")])]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Hover")])]),_v(" "),_c('br'),_v(" "),_c('br'),_v(" "),_c('h4',{staticClass:"no-index",attrs:{"id":"wrap-text"}},[_c('span',{staticClass:"anchor",attrs:{"id":"wrap-text"}}),_v("Wrap Text"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#wrap-text","onclick":"event.stopPropagation()"}})]),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_v("false")]),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Nice!")]),_v("What do you say")])])],1)]),_v(" "),_c('p',[_c('strong',[_v("Using trigger for Popover:")]),_c('br')]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_v("More about "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pop:trigger_id\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(".\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pop:trigger_id\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This popover is triggered by a trigger\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v("This is the same "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pop:trigger_id\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" as last one.\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("More about "),_c('trigger',{attrs:{"for":"pop:trigger_id"}},[_v("trigger")]),_v(".\n"),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"id":"pop:trigger_id","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("This popover is triggered by a trigger")])]),_v(" "),_c('br'),_v("\nThis is the same "),_c('trigger',{attrs:{"for":"pop:trigger_id"}},[_v("trigger")]),_v(" as last one.")],1)])],1)]),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("More about triggers")])]},proxy:true}])},[_v(" "),_c('div',[_c('p',[_c('strong',[_c('strong',[_v("Triggers")])])]),_v(" "),_c('p',[_v("Trigger provides more flexibility in triggering contextual overlay via Tooltip, Popover or Modal.")]),_v(" "),_c('p',[_v("You could embed a Trigger within the text, and define the Tooltip, Popover or Modal at a separate location, which allows for a cleaner authoring flow.")]),_v(" "),_c('p',[_v("Specify the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(" attribute on the Tooltip, Popover or Modal component, and use the same "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(" in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("for")]),_v(" attribute of the Trigger to allow the Trigger to invoke the specific overlay elements.\nAdditionally, multiple Triggers could share the same overlay by providing them with the same "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(".\n"),_c('br')]),_v(" "),_c('p',[_c('strong',[_v("Trigger's "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("trigger")]),_v(" attribute (which defaults to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")]),_v(") is independent of the target's.")])]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("trigger")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")])]),_v(" "),_c('td',[_v("How the overlay view is triggered."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("click")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("focus")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("for")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("The id for the overlay view to be shown.")])]),_v(" "),_c('tr',[_c('td',[_v("placement")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("auto")])]),_v(" "),_c('td',[_v("How to position the Popover or Tooltip."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("auto")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("top")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("left")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("right")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bottom")]),_v(".")])])])])])])]),_c('p'),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("trigger")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")])]),_v(" "),_c('td',[_v("How the Popover is triggered."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("click")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("focus")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("header")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Popover header, supports inline markdown text.")])]),_v(" "),_c('tr',[_c('td',[_v("content")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Popover content, supports inline markdown text.")])]),_v(" "),_c('tr',[_c('td',[_v("placement")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("top")])]),_v(" "),_c('td',[_v("How to position the Popover."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("top")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("left")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("right")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bottom")]),_v(".")])])])])]),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("Hover over the "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pop:context-target\"")]),_v(">")]),_v("keyword"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" to see the popover.\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pop:context-target\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Popover header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"content\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("description :+1:\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("Hover over the "),_c('trigger',{attrs:{"for":"pop:context-target"}},[_v("keyword")]),_v(" to see the popover.")],1),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"id":"pop:context-target","placement":"top","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_v("Popover header")]),_v(" "),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_c('div',[_c('p',[_v("description 👍")])])])])])],1)])],1),_v(" "),_m(26),_v(" "),_c('box',[_c('div',[_c('p',[_v("Hover "),_c('trigger',{attrs:{"large":"","for":"modal:unused"}},[_v("here")]),_v(" to open a modal.")],1),_v(" "),_c('b-modal',{ref:"modal:unused",attrs:{"id":"modal:unused","ok-title":"OK","ok-only":"","size":"","modal-class":"mb-zoom"},scopedSlots:_u([{key:"modal-title",fn:function(){return [_v("Modal header")]},proxy:true}])},[_v("\n Modal content\n")])],1),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"modals-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"modals-2"}}),_v("Modals"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#modals-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Modals are to be used together with the "),_c('a',{attrs:{"href":"#trigger"}},[_v("Trigger")]),_v(" component for activation.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_v("More about "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:loremipsum\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(".\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**Modal header** :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:loremipsum\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n")]),_c('span',[_v(" magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n")]),_c('span',[_v(" consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n")]),_c('span',[_v(" Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v("This is the same "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:loremipsum\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" as last one.\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:centered\"")]),_v(">")]),_v("This is a trigger for a centered modal"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(".\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**Centered** :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:centered\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("center")]),_v(">")]),_v("\n")]),_c('span',[_v(" Centered\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:ok-text\"")]),_v(">")]),_v("This is a trigger for a modal with a custom OK button"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(".\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"OK button visible!\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:ok-text\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ok-text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Custom OK\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n")]),_c('span',[_v(" magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n")]),_c('span',[_v(" consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n")]),_c('span',[_v(" Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("More about "),_c('trigger',{attrs:{"for":"modal:loremipsum"}},[_v("trigger")]),_v(".")],1),_v(" "),_c('b-modal',{ref:"modal:loremipsum",attrs:{"id":"modal:loremipsum","hide-footer":"","size":"","modal-class":"mb-zoom"},scopedSlots:_u([{key:"modal-title",fn:function(){return [_c('strong',[_v("Modal header")]),_v(" 🚀")]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n")]),_v(" "),_c('br'),_v("\nThis is the same "),_c('trigger',{attrs:{"for":"modal:loremipsum"}},[_v("trigger")]),_v(" as last one.\n"),_c('p',[_c('trigger',{attrs:{"for":"modal:centered"}},[_v("This is a trigger for a centered modal")]),_v(".")],1),_v(" "),_c('b-modal',{ref:"modal:centered",attrs:{"id":"modal:centered","centered":"","hide-footer":"","size":"","modal-class":"mb-zoom"},scopedSlots:_u([{key:"modal-title",fn:function(){return [_c('strong',[_v("Centered")]),_v(" 🚀")]},proxy:true}])},[_v("\n Centered\n")]),_v(" "),_c('p',[_c('trigger',{attrs:{"for":"modal:ok-text"}},[_v("This is a trigger for a modal with a custom OK button")]),_v(".")],1),_v(" "),_c('b-modal',{ref:"modal:ok-text",attrs:{"id":"modal:ok-text","ok-title":"Custom OK","ok-only":"","size":"","modal-class":"mb-zoom"},scopedSlots:_u([{key:"modal-title",fn:function(){return [_v("OK button visible!")]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n")])],1)],1)]),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("More about triggers")])]},proxy:true}])},[_v(" "),_c('div',[_c('p',[_c('strong',[_c('strong',[_v("Triggers")])])]),_v(" "),_c('p',[_v("Trigger provides more flexibility in triggering contextual overlay via Tooltip, Popover or Modal.")]),_v(" "),_c('p',[_v("You could embed a Trigger within the text, and define the Tooltip, Popover or Modal at a separate location, which allows for a cleaner authoring flow.")]),_v(" "),_c('p',[_v("Specify the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(" attribute on the Tooltip, Popover or Modal component, and use the same "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(" in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("for")]),_v(" attribute of the Trigger to allow the Trigger to invoke the specific overlay elements.\nAdditionally, multiple Triggers could share the same overlay by providing them with the same "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(".\n"),_c('br')]),_v(" "),_c('p',[_c('strong',[_v("Trigger's "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("trigger")]),_v(" attribute (which defaults to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")]),_v(") is independent of the target's.")])]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("trigger")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")])]),_v(" "),_c('td',[_v("How the overlay view is triggered."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("click")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("focus")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("for")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("The id for the overlay view to be shown.")])]),_v(" "),_c('tr',[_c('td',[_v("placement")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("auto")])]),_v(" "),_c('td',[_v("How to position the Popover or Tooltip."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("auto")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("top")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("left")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("right")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bottom")]),_v(".")])])])])])])]),_c('p'),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("header"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Header of the Modal component. Supports inline markdown text.")])]),_v(" "),_c('tr',[_c('td',[_v("footer "),_c('hr',{staticStyle:{"margin-top":"0.2rem","margin-bottom":"0"}}),_v(" "),_c('small',[_v("modal-footer "),_c('br'),_v(" (deprecated)")])]),_v(" "),_c('td',[_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_v("Slot")])],1),_v(" "),_c('td',[_v("empty")]),_v(" "),_c('td',[_v("Specifying this will override the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("ok-text")]),_v(" attribute, and the OK button will not render.")])]),_v(" "),_c('tr',[_c('td',[_v("ok-text")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Text for the OK button.")])]),_v(" "),_c('tr',[_c('td',[_v("effect")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("zoom")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("zoom")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fade")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("id")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("Used by "),_c('a',{attrs:{"href":"#trigger"}},[_v("Trigger")]),_v(" to activate the Modal by id.large")])]),_v(" "),_c('tr',[_c('td',[_v("small")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Creates a "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/4.0/components/modal/#optional-sizes"}},[_v("small Modal")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("large")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Creates a "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/4.0/components/modal/#optional-sizes"}},[_v("large Modal")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("center")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Vertically centers the modal (in addition to the horizontal centering by default).")])]),_v(" "),_c('tr',[_c('td',[_v("backdrop")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("true")])]),_v(" "),_c('td',[_v("Enables closing the Modal by clicking on the backdrop.")])])])])]),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("Click "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trigger")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"click\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:unused\"")]),_v(">")]),_v("here"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" to open a modal.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Modal header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:unused\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Modal content\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("Hover "),_c('trigger',{attrs:{"large":"","for":"modal:unused"}},[_v("here")]),_v(" to open a modal.")],1),_v(" "),_c('b-modal',{ref:"modal:unused",attrs:{"id":"modal:unused","ok-title":"OK","ok-only":"","size":"","modal-class":"mb-zoom"},scopedSlots:_u([{key:"modal-title",fn:function(){return [_v("Modal header")]},proxy:true}])},[_v("\n Modal content\n")])],1)],1)])],1),_v(" "),_m(27),_v(" "),_c('box',[_c('div',[_c('dropdown',{attrs:{"type":"primary"},scopedSlots:_u([{key:"header",fn:function(){return [_v("Action")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])]),_v(" "),_c('li',{staticClass:"dropdown-divider",attrs:{"role":"separator"}}),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Separated link")])])]),_v(" "),_c('dropdown',{attrs:{"type":"info"},scopedSlots:_u([{key:"before",fn:function(){return [_c('button',{staticClass:"btn btn-info",attrs:{"type":"button"}},[_v("Segmented")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("...")])])]),_v(" "),_c('p'),_v(" "),_c('div',{staticClass:"btn-group d-flex",attrs:{"role":"group"}},[_c('a',{staticClass:"btn btn-danger w-100",attrs:{"href":"#dropdown","role":"button"}},[_v("Left")]),_v(" "),_c('dropdown',{staticClass:"w-100",scopedSlots:_u([{key:"button",fn:function(){return [_c('button',{staticClass:"btn btn-warning dropdown-toggle w-100",attrs:{"type":"button"}},[_v("\n Action\n "),_c('span',{staticClass:"caret"})])]},proxy:true},{key:"dropdown-menu",fn:function(){return [_c('ul',{staticClass:"dropdown-menu"},[_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])]),_v(" "),_c('li',{staticClass:"dropdown-divider",attrs:{"role":"separator"}}),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Separated link")])])])]},proxy:true}])}),_v(" "),_c('a',{staticClass:"btn btn-success w-100",attrs:{"href":"#dropdown","role":"button"}},[_v("Right")])],1)],1),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"dropdowns-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"dropdowns-2"}}),_v("Dropdowns"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#dropdowns-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("While the main use case for dropdowns is under navbars, they can also be used as top-level components.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*Action*\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Action"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Another action"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Something else here"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"separator\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-divider\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Separated link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"before\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-info\"")]),_v(">")]),_v("Segmented"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Right aligned list\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Something else here"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn-group d-flex mt-3\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"group\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-danger w-100\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(">")]),_v("Left"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"w-100\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-warning dropdown-toggle w-100\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Action\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"caret\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("ul")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-menu\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-menu\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Action"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Another action"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Something else here"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"separator\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-divider\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Separated link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-success w-100\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(">")]),_v("Right"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('dropdown',{attrs:{"type":"primary"},scopedSlots:_u([{key:"header",fn:function(){return [_c('em',[_v("Action")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])]),_v(" "),_c('li',{staticClass:"dropdown-divider",attrs:{"role":"separator"}}),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Separated link")])])]),_v(" "),_c('dropdown',{attrs:{"type":"info"},scopedSlots:_u([{key:"before",fn:function(){return [_c('button',{staticClass:"btn btn-info",attrs:{"type":"button"}},[_v("Segmented")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("...")])])]),_v(" "),_c('dropdown',{attrs:{"type":"primary","menu-align-right":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Right aligned list")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])])]),_v(" "),_c('div',{staticClass:"btn-group d-flex mt-3",attrs:{"role":"group"}},[_c('a',{staticClass:"btn btn-danger w-100",attrs:{"href":"#dropdown","role":"button"}},[_v("Left")]),_v(" "),_c('dropdown',{staticClass:"w-100",scopedSlots:_u([{key:"button",fn:function(){return [_c('button',{staticClass:"btn btn-warning dropdown-toggle w-100",attrs:{"type":"button"}},[_v("\n Action\n "),_c('span',{staticClass:"caret"})])]},proxy:true},{key:"dropdown-menu",fn:function(){return [_c('ul',{staticClass:"dropdown-menu"},[_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])]),_v(" "),_c('li',{staticClass:"dropdown-divider",attrs:{"role":"separator"}}),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Separated link")])])])]},proxy:true}])}),_v(" "),_c('a',{staticClass:"btn btn-success w-100",attrs:{"href":"#dropdown","role":"button"}},[_v("Right")])],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Dropdowns can also be nested within each other to create multi-level submenus.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*Multi-Level Dropdown*\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Item"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Another item"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*Submenu*\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Item"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Another item"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('dropdown',{attrs:{"type":"primary"},scopedSlots:_u([{key:"header",fn:function(){return [_c('em',[_v("Multi-Level Dropdown")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Item")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another item")])]),_v(" "),_c('dropdown',{scopedSlots:_u([{key:"header",fn:function(){return [_c('em',[_v("Submenu")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Item")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another item")])])])],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("disabled")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether Dropdown can be opened.")])]),_v(" "),_c('tr',[_c('td',[_v("menu-align-right")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether the dropdown list will be right-aligned.")])]),_v(" "),_c('tr',[_c('td',[_v("header"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Dropdown button header text. (Supports inline MarkDown syntax)")])]),_v(" "),_c('tr',[_c('td',[_v("type")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("primary")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("danger")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("info")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("warning")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("success")]),_v(".")])])])])]),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" You may refer to "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/4.0/components/buttons/"}},[_v("this documentation")]),_v(" regarding how you can use the "),_c('strong',[_v("Bootstrap buttons")]),_v(", and how to style them.")])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Action\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")])]),_v("Action"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")])]),_v("Another action"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"separator\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-divider\"")]),_v(">")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")])]),_v("Separated link"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('dropdown',{attrs:{"type":"primary"},scopedSlots:_u([{key:"header",fn:function(){return [_v("Action")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])]),_v(" "),_c('li',{staticClass:"dropdown-divider",attrs:{"role":"separator"}}),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Separated link")])])]),_v(" "),_c('dropdown',{attrs:{"type":"info"},scopedSlots:_u([{key:"before",fn:function(){return [_c('button',{staticClass:"btn btn-info",attrs:{"type":"button"}},[_v("Segmented")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("...")])])]),_v(" "),_c('p'),_v(" "),_c('div',{staticClass:"btn-group d-flex",attrs:{"role":"group"}},[_c('a',{staticClass:"btn btn-danger w-100",attrs:{"href":"#dropdown","role":"button"}},[_v("Left")]),_v(" "),_c('dropdown',{staticClass:"w-100",scopedSlots:_u([{key:"button",fn:function(){return [_c('button',{staticClass:"btn btn-warning dropdown-toggle w-100",attrs:{"type":"button"}},[_v("\n Action\n "),_c('span',{staticClass:"caret"})])]},proxy:true},{key:"dropdown-menu",fn:function(){return [_c('ul',{staticClass:"dropdown-menu"},[_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])]),_v(" "),_c('li',{staticClass:"dropdown-divider",attrs:{"role":"separator"}}),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Separated link")])])])]},proxy:true}])}),_v(" "),_c('a',{staticClass:"btn btn-success w-100",attrs:{"href":"#dropdown","role":"button"}},[_v("Right")])],1)],1)])])],1),_v(" "),_m(28),_v(" "),_c('box',[_c('div',[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback}})],1),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"search-bars-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"search-bars-2"}}),_v("Search Bars"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#search-bars-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("searchbar")]),_v(" component allows users to search all headings within any page on the site.")]),_v(" "),_c('span',{attrs:{"id":"body"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search (Right-aligned dropdown)\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])]),_c('p',[_v("To use the searchbar within a navbar, add the following markup to your file. The searchbar can be positioned using the slot attribute for the list. The following markup adds a searchbar to the right side of the navbar with appropriate styling.")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Enter a search term (eg. 'search bar') to see the search result dropdown.")]),_v(" "),_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback}}),_v(" "),_c('br'),_v(" "),_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search (Right-aligned dropdown)","on-hit":searchCallback,"menu-align-right":""}})],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("algolia")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether the searchbar should be connected to "),_c('a',{attrs:{"href":"/userGuide/usingPlugins.html#algolia-enabling-algolia-docsearch"}},[_v("Algolia DocSearch")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("data")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Array")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The local data source for suggestions. Expected to be a primitive array. To use MarkBind's search functionality, set this value to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"searchData\"")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("menu-align-right")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether the search bar's dropdown list will be right-aligned.")])]),_v(" "),_c('tr',[_c('td',[_v("on-hit")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Function")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("A callback function when you click or hit return on an item. To use MarkBind's search functionality, set this value to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"searchCallback\"")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("placeholder")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("The placeholder text shown when no keywords are entered in the search bar.")])])])])]),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Note: If you are using MarkBind's search functionality, then "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("enableSearch")]),_v(" "),_c('strong',[_v("must be set to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("true")]),_v(" in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")])]),_v(".")]),_v(" "),_c('p',[_v("See: "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#enable-search"}},[_v("User Guide: Site Configuration → enableSearch")]),_v(".")])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" Related topic: "),_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("User Guide: Making the Site Searchable")]),_v(".")])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" Related topic: "),_c('a',{attrs:{"href":"/userGuide/usingPlugins.html#algolia-enabling-algolia-docsearch"}},[_v("User Guide: Using Plugins → Algolia: Enabling Algolia DocSearch")]),_v(".")])]),_v(" "),_c('p')],1),_v(" "),_c('p'),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])]),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback}})],1)])])],1),_v(" "),_m(29),_v(" "),_c('box',[_c('div',[_c('navbar',{attrs:{"type":"primary"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1),_v(" "),_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1),_v(" "),_c('navbar',{attrs:{"type":"light"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1)],1),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"navbars"}},[_c('span',{staticClass:"anchor",attrs:{"id":"navbars"}}),_v("Navbars"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#navbars","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Navbar allows visitors of your website to navigate through pages easily.")])]),_v(" "),_c('p',[_c('strong',[_v("Navbars support link highlighting; link highlighting can be customised by specifying rules.")])]),_v(" "),_c('ul',[_c('li',[_v("Define "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default-highlight-on")]),_v(" in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" to specify fallback highlight rules.")]),_v(" "),_c('li',[_v("Define "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("data-highlight")]),_v(" in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" tags with the class "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("nav-link")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("dropdown-item")]),_v(" to specify individual highlight rules.")])]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('div',[_c('p',[_v("Note: "),_c('strong',[_v("Navbars")]),_v(" should be placed within a "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#headers"}},[_v("header file")]),_v(" to ensure that they are correctly positioned at the top of the page, above the "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#site-navigation-menus"}},[_v("site navigation")]),_v(" and "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#page-navigation-menus"}},[_v("page navigation")]),_v(" menus.")])])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Option"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Fork..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dark\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Option"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Fork..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"light\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Option"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Fork..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('navbar',{attrs:{"type":"primary"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1),_v(" "),_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1),_v(" "),_c('navbar',{attrs:{"type":"light"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("type")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("primary")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("primary")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("dark")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("light")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("none")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("default-highlight-on")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("sibling-or-child")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("sibling-or-child")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("sibling")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("child")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("exact")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("none")]),_v(". Specifies link highlight rules for navbars.")])])])])]),_c('box',{attrs:{"type":"tip"}},[_c('p',[_v("If you wish to further customize your navbar beyond the primary, dark, and light theme colors, specify the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"none\"")]),_v(" attribute and "),_c('a',{attrs:{"href":"#inserting-custom-classes-into-components"}},[_v("insert your own custom styles")]),_v(" or "),_c('trigger',{attrs:{"trigger":"click","for":"modal:built-in-bg"}},[_v("use built-in background styles")]),_v(" via the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("add-class")]),_v(" attribute.")],1)]),_v(" "),_c('b-modal',{ref:"modal:built-in-bg",attrs:{"id":"modal:built-in-bg","hide-footer":"","size":"","modal-class":"mb-zoom"},scopedSlots:_u([{key:"modal-title",fn:function(){return [_v("Built-in background styles")]},proxy:true}])},[_v(" "),_c('span',[_v("For instance, Bootstrap supports "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".bg-danger")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bg-info")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bg-primary")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bg-success")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bg-warning")]),_v(" as background colors.")]),_v(" "),_c('span',[_v("In "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{your-site}/_markbind/headers/header.md")]),_v(", you can change "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" to apply Bootstrap background styles.")])]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Navbar Link Highlighting")])])]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("head-bottom")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("link")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rel")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"stylesheet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/css/main.css\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("header")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fixed")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dark\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("img")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/images/logo-darkbackground.svg\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("height")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"20\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exact\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("HOME"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--ug\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"sibling-or-child\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("USER GUIDE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--dg\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"sibling-or-child\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/devGuide/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("DEVELOPER GUIDE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exact\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/showcase.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("SHOWCASE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exact\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/about.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("ABOUT"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("md")]),_v(">")]),_v(":fab-github:"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")])])]),_c('p',[_c('strong',[_c('strong',[_v("Highlight Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("child")])]),_v(" "),_c('td',[_v("Highlights link if URL in address bar is a child of the link. E.g "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("foo/bar")]),_v(" is a child of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("foo")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("sibling")])]),_v(" "),_c('td',[_v("Highlights link if URL in address bar is a sibling of the link. E.g "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("foo/bar")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("foo/bear")]),_v(" are siblings.")])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("sibling-or-child")])]),_v(" "),_c('td',[_v("Highlights link if URL in address bar is a sibling or child of the link.")])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("exact")])]),_v(" "),_c('td',[_v("Highlights link if URL in address bar exactly matches link.")])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("none")])]),_v(" "),_c('td',[_v("No highlighting.")])])])])]),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Option"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Fork..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('navbar',{attrs:{"type":"primary"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1),_v(" "),_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1),_v(" "),_c('navbar',{attrs:{"type":"light"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1)],1),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Mobile page and site navigation menus")])])]),_v(" "),_c('p',[_v("The navbar component also provides access to MarkBind's "),_c('a',{attrs:{"href":"/userGuide/components/navigation.html#site-navigation-menus"}},[_v("site navigation")]),_v(" and "),_c('a',{attrs:{"href":"/userGuide/components/navigation.html#page-navigation-menus"}},[_v("page navigation")]),_v(" menu "),_c('strong',[_v("components")]),_v(" if used in the page's "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#layouts"}},[_v("layout")]),_v(". No additional setup is required!")]),_v(" "),_c('p',[_v("If you are viewing the documentation on a larger device, resize the window to see what it looks like.")]),_v(" "),_c('p',[_v("Alternatively, if you want to display "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("e.g. adding an image to the site nav")]),_v("additional content")]),_v(" in these navigation menus, the navbar is also able to \"pull in\" any "),_c('strong',[_v("container element")]),_v(" with a html "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(" of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"site-nav\"")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"page-nav\"")]),_v(". You may refer to the "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#layouts"}},[_v("layouts")]),_v(" section for an example.")]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_c('p',[_v("The navbar component auto-detects if the MarkBind's navigation components or your element containers has any "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" tags in particular")]),_v("links")]),_v("."),_c('br'),_v("\nIf absent, the navigation buttons to open the menus are "),_c('em',[_v("automatically hidden")]),_v(".")])]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Mobile navigation menu button placement")])])]),_v(" "),_c('p',[_v("If you wish to alter the button placement on the navbar, you may use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" components in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lower-navbar")]),_v(" slot.")]),_v(" "),_c('p',[_v("By default, if the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lower-navbar")]),_v(" slot is not specified, the site and page navigation buttons are simply placed as such.")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"lower-navbar\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-menu-container\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("site-nav-button")]),_v(" />")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("page-nav-button")]),_v(" />")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])]),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Component")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("page-nav-button")])]),_v(" "),_c('td',[_v("Pulls any element with an identifier, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id=page-nav")]),_v(" into the menu. If no such element exists, it pulls any "),_c('a',{attrs:{"href":"/userGuide/components/navigation.html#page-navigation-menus"}},[_v("page navigation menu")]),_v(" used in the layout.")])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site-nav-button")])]),_v(" "),_c('td',[_v("Pulls any element with an identifier, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id=site-nav")]),_v(" into the menu. If no such element exists, it pulls all "),_c('a',{attrs:{"href":"/userGuide/components/navigation.html#site-navigation-menus"}},[_v("site navigation menu components")]),_v(" used in the layout.")])])])])]),_c('p',[_c('strong',[_c('strong',[_v("Styling the mobile page and site navigation menus")])])]),_v(" "),_c('p',[_v("You may also wish to style your navigation content differently on mobile view.\nBy default, MarkBind already provides some reasonable overrides for smaller screens, applied over any styles you might have for the mobile navigation content identified above.")]),_v(" "),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Css class attached to the root navigation element")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs css","heading":"Css class attached to the root navigation element"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-selector-class"}},[_v(".mb-mobile-nav")]),_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("display")]),_v(": block "),_c('span',{pre:true,attrs:{"class":"hljs-meta"}},[_v("!important")]),_v(";\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("margin")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("0")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-meta"}},[_v("!important")]),_v(";\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("border")]),_v(": none "),_c('span',{pre:true,attrs:{"class":"hljs-meta"}},[_v("!important")]),_v(";\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("padding")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("10px")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-meta"}},[_v("!important")]),_v(";\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("width")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("100%")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-meta"}},[_v("!important")]),_v(";\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("max-width")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("100%")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-meta"}},[_v("!important")]),_v(";\n")]),_c('span',[_v("}\n")])])])])]),_c('p',[_v("If you require greater customisation, you may simply compose the respective selectors with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".mb-mobile-nav")]),_v(" element.")]),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs css","heading":""}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-selector-id"}},[_v("#site-nav")]),_c('span',{pre:true,attrs:{"class":"hljs-selector-class"}},[_v(".mb-mobile-nav")]),_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("/* Be sure to add the !important css rule when overriding .mb-mobile-nav's properties! */")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("border")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("1px")]),_v(" solid black "),_c('span',{pre:true,attrs:{"class":"hljs-meta"}},[_v("!important")]),_v(";\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("/* For other properties, there is no need. */")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("color")]),_v(": red;\n")]),_c('span',[_v("}\n")])])]),_c('box',{attrs:{"type":"tip","seamless":""}},[_c('p',[_v("Refer to the "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("layouts")]),_v(" section to find out how to add custom css files to a page!")])])],1)])],1),_v(" "),_m(30),_v(" "),_c('box',[_c('div'),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"site-navigation-menus-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"site-navigation-menus-2"}}),_v("Site Navigation Menus"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#site-navigation-menus-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{attrs:{"id":"content"}},[_c('p',[_c('strong',[_v("A "),_c('em',[_v("Site Navigation Menu")]),_v(" ("),_c('mark',[_c('em',[_v("siteNav")]),_v(" for short")]),_v(") can be used to show a road map of the main pages of your site.")])]),_v(" "),_c('p',[_v("Steps to add a siteNav:")]),_v(" "),_c('ol',[_c('li',[_v("Format your siteNav as an unordered Markdown list")]),_v(" "),_c('li',[_v("Include it under a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" element.")]),_v(" "),_c('li',[_v("(Optional) To make siteNav accessible on smaller screens, you can use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" component in the "),_c('a',{attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("navbar")]),_v(".")])]),_v(" "),_c('div',{attrs:{"id":"short"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs"}},[_c('span',[_v("\n")]),_c('span',[_v("* [**Getting Started**](/userGuide/gettingStarted.html)\n")]),_c('span',[_v("* **Authoring Contents** :expanded:\n")]),_c('span',[_v(" * [Overview](/userGuide/authoringContents.html)\n")]),_c('span',[_v(" * [Adding Pages](/userGuide/addingPages.html)\n")]),_c('span',[_v(" * [MarkBind Syntax Overview](/userGuide/markBindSyntaxOverview.html)\n")]),_c('span',[_v(" * [Formatting Contents](/userGuide/formattingContents.html)\n")]),_c('span',[_v(" * [Using Components](/userGuide/usingComponents.html)\n")]),_c('span',[_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")])])])])])])],1)],1)],1)])]),_v(" "),_c('p',[_v("MarkBind has styles nested lists with additional padding and smaller text sizes up to "),_c('strong',[_v("4")]),_v(" nesting levels.\nBeyond that, you'd have to include your own styles.")]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Expanding menu items by default")])])]),_v(" "),_c('p',[_v("You can "),_c('strong',[_v("append the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(":expanded:")]),_v(" to a "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("a menu item with sub menu-items")]),_v("parent menu item")]),_v(" to make it expand by default.")]),_v(" In the example above, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("* Docs :expanded:")]),_v(" will make the menu item "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Docs")]),_v(" expand by default.")]),_v(" "),_c('p',[_v("A parent menu item that is also linked will not be collapsible "),_c('span',{staticClass:"dimmed"},[_v("e.g., the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Search")]),_v(" menu item in the above example")]),_v(".")])]),_v(" "),_c('div',{attrs:{"id":"examples"}})])])],1),_v(" "),_m(31),_v(" "),_c('box',[_c('div',[_c('p',[_v("You can see an example of a Page Navigation Bar "),_c('mark',[_v("on the right side")]),_v(" of "),_c('a',{attrs:{"target":"_blank","href":"/userGuide/formattingContents.html"}},[_v("this page")]),_v(".\n")])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"page-navigation-menus-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"page-navigation-menus-2"}}),_v("Page Navigation Menus"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#page-navigation-menus-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{attrs:{"id":"content"}},[_c('p',[_c('strong',[_v("A "),_c('em',[_v("Page Navigation Menu")]),_v(" ("),_c('mark',[_c('em',[_v("pageNav")]),_v(" for short")]),_v(") a list of the current page's headings.")]),_v(" Page navigation menus are only available for use in "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#layouts"}},[_v("layouts")]),_v(".")]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Adding a pageNav")])])]),_v(" "),_c('ol',[_c('li',[_c('p',[_c('strong',[_v("Specify the smallest heading level you want to be included")]),_v(" within the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" of a page with "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("The value "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default")]),_v(" will use "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("headingIndexingLevel")]),_v(" within "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(".")]),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"default\"")])]),_v(" or a "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("HTML defines six levels of headings, numbered from "),_c('br'),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("1 to 6")]),_v(".")]),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("heading level")])]),_v(".")]),_v(" "),_c('box',{attrs:{"type":"info","seamless":""}},[_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default")]),_v(" level uses the "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#headingindexinglevel"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("headingIndexingLevel")]),_v(" property")]),_v(" of your site configuration file.")])])],1),_v(" "),_c('li',[_c('p',[_c('strong',[_v("(Optional) You may also specify a page navigation title")]),_v(" within "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" that will be placed at the top of the page navigation menu.")])]),_v(" "),_c('li',[_c('p',[_c('strong',[_v("Position the page navigation menu")]),_v(" within your layout using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" component.")])]),_v(" "),_c('li',[_c('p',[_c('strong',[_v("(Optional) To make pageNav accessible on smaller screens, you can use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" component in the "),_c('a',{attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("navbar")]),_v(".")])])])]),_v(" "),_c('div',{staticClass:"indented",attrs:{"id":"short"}},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v("\nIn the page that you want to have page navigation, you may show only "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("

              ")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("

              ")]),_v(" headings in the pageNav, and set a custom pageNav title like so:")],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" pageNav: 2\n")]),_c('span',[_v(" pageNavTitle: \"Chapters of This Page\"\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])]),_c('p',[_v("Then, in your "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#layouts"}},[_v("layout file")]),_v(", use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" component to position the pageNav.")]),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('trigger',{attrs:{"for":"modal:page-nav-example"}},[_v("Example usage of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" component")])],1),_v(" "),_c('b-modal',{ref:"modal:page-nav-example",attrs:{"id":"modal:page-nav-example","hide-footer":"","size":"lg","modal-class":"mb-zoom"},scopedSlots:_u([{key:"modal-title",fn:function(){return [_v("Using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pageNav")]),_v(" variable in a layout")]},proxy:true}])},[_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("head-bottom")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("link")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rel")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"stylesheet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/css/main.css\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("header")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fixed")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dark\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("img")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/images/logo-darkbackground.svg\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("height")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"20\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exact\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("HOME"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--ug\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"sibling-or-child\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/userGuide/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("USER GUIDE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--dg\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"sibling-or-child\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/devGuide/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("DEVELOPER GUIDE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"flex-body\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("nav")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"site-nav\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fixed-header-padding\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"site-nav-top\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"font-weight-bold mb-2\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"font-size: 1.25rem;\"")]),_v(">")]),_v("User Guide"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-component slim-scroll\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("site-nav")]),_v(">")]),_v("\n")]),_c('span',[_v("* [**Getting Started**]({{baseUrl}}/userGuide/gettingStarted.html)\n")]),_c('span',[_v(" * **Authoring Contents** :expanded:\n")]),_c('span',[_v(" * [Overview]({{baseUrl}}/userGuide/authoringContents.html)\n")]),_c('span',[_v(" * [Adding Pages]({{baseUrl}}/userGuide/addingPages.html)\n")]),_c('span',[_v(" * [MarkBind Syntax Overview]({{baseUrl}}/userGuide/markBindSyntaxOverview.html)\n")]),_c('span',[_v(" * [Formatting Contents]({{baseUrl}}/userGuide/formattingContents.html)\n")]),_c('span',[_v(" * [Using Components]({{baseUrl}}/userGuide/usingComponents.html)\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"content-wrapper\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fixed-header-padding\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" {{ content }}\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("nav")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"page-nav\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fixed-header-padding\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-component slim-scroll\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("page-nav")]),_v(" />")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("footer")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text-center\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("[Generated by {{MarkBind}} on {{timestamp}}]"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("This site is powered by "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://www.netlify.com/\"")]),_v(">")]),_v("Netlify"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script-bottom")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"javascript"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" alert("),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'Hi!'")]),_v(")")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" ")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])])],1)]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("You can see an example of a Page Navigation Bar "),_c('mark',[_v("on the right side")]),_v(" of "),_c('a',{attrs:{"target":"_blank","href":"/userGuide/formattingContents.html"}},[_v("this page")]),_v(".\n")])]),_c('p')])])],1),_v(" "),_m(32),_v(" "),_c('box',[_c('div',[_c('div',[_c('quiz',[_c('question',{attrs:{"type":"mcq"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Which of these "),_c('strong',[_v("contradicts")]),_v(" the heuristics recommended when creating test cases with multiple inputs?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_v("\n How do you figure out which inputs are wrong? (or correct)\n ")])]},proxy:true}])},[_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("This is "),_c('strong',[_v("correct")]),_v(". We need to figure out if a positive test case works!")])]},proxy:true}])},[_v("\n Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n ")]),_v(" "),_c('q-option',[_v("\n It is ok to combine valid values for different inputs.\n ")]),_v(" "),_c('q-option',[_v("\n No more than one invalid test input should be in a given test case.\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('div',[_v("\n If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n correctly by the SUT.\n This is because most SUTs return an error message upon encountering the first invalid input.\n ")])]},proxy:true}])},[_v("\n All invalid test inputs must be tested together.\n \n ")])],1),_v(" "),_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Use your calculator! "),_c('span',{staticClass:"fas fa-calculator",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v("\n\n ##### Which of the following is true?\n\n "),_c('br'),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum")])]},proxy:true}])},[_v("\n 1 + 1 = 11\n ")]),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Division by zero is "),_c('strong',[_v("undefined")]),_v("!")])]},proxy:true}])},[_v("\n 1 / 0 = infinity\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""}},[_v("\n 11 / 11 = 1\n ")])],1),_v(" "),_c('question',{attrs:{"type":"text","keywords":"hawaii","threshold":"0.5"},scopedSlots:_u([{key:"answer",fn:function(){return [_c('p',[_v("It originated from Hawaii!")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Which country did the Hawaiian pizza originate from?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_v("\n\n Watch some pizza commercials! :tv:\n\n :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza:\n ")])]},proxy:true}])})],1)],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"questions-and-quizzes-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"questions-and-quizzes-2"}}),_v("Questions and Quizzes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#questions-and-quizzes-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',{staticClass:"mt-3"},[_v("Question and quiz components provide an easy way to test readers on the relevant content topic in the page.")]),_v(" "),_c('h4',{attrs:{"id":"introduction"}},[_c('span',{staticClass:"anchor",attrs:{"id":"introduction"}}),_v("Introduction"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#introduction","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Question components ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(") can be one of the following types: "),_c('strong',[_v("MCQ")]),_v(", "),_c('strong',[_v("Checkbox")]),_v(" or "),_c('strong',[_v("Text")]),_v(".")]),_v(" "),_c('p',[_v("In all cases, content directly inserted in between "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("...")]),_v(" will be inserted into the "),_c('strong',[_v("question body")]),_v(".")]),_v(" "),_c('p',[_v("You can also insert markdown into the "),_c('strong',[_v("header")]),_v(" or "),_c('strong',[_v("hint box")]),_v(", by using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("header")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hint")]),_v(" attributes respectively. Click the hint button below to see how the hint box turns out!")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Header and Hint syntax")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html","heading":"Header and Hint syntax"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"checkbox\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which of the following is correct?\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hint")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Think out of the box! :fas-box:\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("Adapted from [Daily Mail](https://www.dailymail.co.uk/femail/article-4702868/Can-pass-intelligence-test.html)\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Think out of the box! "),_c('span',{staticClass:"fas fa-box",attrs:{"aria-hidden":"true"}})])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Which of the following is correct?")])]},proxy:true}])},[_v(" "),_c('pic',{staticClass:"d-block mx-auto",attrs:{"src":"/images/math-question.jpg","alt":"math question image","height":"200"}},[_c('p',[_c('small',[_v("Adapted from "),_c('a',{attrs:{"href":"https://www.dailymail.co.uk/femail/article-4702868/Can-pass-intelligence-test.html"}},[_v("Daily Mail")])])])]),_c('p'),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Multiply the numbers on the left together and add the leftmost number!")])]},proxy:true}])},[_v("\n 96\n ")]),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Under normal circumstances, this would be correct.")])]},proxy:true}])},[_v("\n 19\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Simply add the running sum of the results as well!")])]},proxy:true}])},[_v("\n 40\n ")]),_v(" "),_c('q-option',[_v("\n 811\n ")])],1)],1)],1)]),_v(" "),_c('p',[_v("If you require more expressive formatting for your header or hint markup, you can use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("
              ")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("
              ")]),_v(" slots. Expand the panel below to see an example!")]),_v(" "),_c('panel',{attrs:{"type":"minimal"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Header and Hint example "),_c('strong',[_v("with slots")])])]},proxy:true}])},[_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Headers and Hints using slots")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html","heading":"Headers and Hints using slots"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"checkbox\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which of the following is true?\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hint")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Think out of the box! :fas-box:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"header\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("Which of the following is correct?"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("Challenge: Try to get all the answers on your first try! ⭐️ ⭐️"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/images/math-question.jpg\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"math question image\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("height")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"200\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"d-block mx-auto\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("Adapted from "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://www.dailymail.co.uk/femail/article-4702868/Can-pass-intelligence-test.html\"")]),_v(">")]),_v("Daily Mail"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("Think out of the box! "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("aria-hidden")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"true\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fas fa-box\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("Need another hint? "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Two of the answers are correct!\"")]),_v(">")]),_v("Hover over me!"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("aria-hidden")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"true\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fas fa-mouse-pointer\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('p',[_v("Which of the following is correct?")]),_v(" "),_c('p',[_v("Challenge: Try to get all the answers on your first try! ⭐️ ⭐️")])])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_c('p',[_v("Think out of the box! "),_c('span',{staticClass:"fas fa-box",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('p',[_v("Need another hint? "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("Two of the answers are correct!")]),_v("Hover over me!")]),_v(" "),_c('span',{staticClass:"fas fa-mouse-pointer",attrs:{"aria-hidden":"true"}})])])]},proxy:true}])},[_v(" "),_c('pic',{staticClass:"d-block mx-auto",attrs:{"src":"/images/math-question.jpg","alt":"math question image","height":"200"}},[_c('p',[_c('small',[_v("Adapted from "),_c('a',{attrs:{"href":"https://www.dailymail.co.uk/femail/article-4702868/Can-pass-intelligence-test.html"}},[_v("Daily Mail")])])])]),_c('p'),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Multiply the numbers on the left together and add the leftmost number!")])]},proxy:true}])},[_v("\n 96\n ")]),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Under normal circumstances, this would be correct.")])]},proxy:true}])},[_v("\n 19\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Simply add the running sum of the results as well!")])]},proxy:true}])},[_v("\n 40\n ")]),_v(" "),_c('q-option',[_v("\n 811\n ")])],1)],1)],1)])]),_v(" "),_c('box',{staticClass:"mt-3",attrs:{"type":"tip","seamless":""}},[_c('p',[_v("Placing the question into the header is entirely optional. You may also wish to include the question directly in the question body, omitting the header entirely.")])]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options and Slots common to all question types")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("type")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("The type of question. Supports "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mcq")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("checkbox")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("text")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("header"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("The markup to insert into the question header. The header is omitted if this is not provided.")])]),_v(" "),_c('tr',[_c('td',[_v("hint"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("The content to display in the hint box.")])])])])]),_c('h4',{staticClass:"mt-4 mb-3",attrs:{"id":"mcq-and-checkbox-questions"}},[_c('span',{staticClass:"anchor",attrs:{"id":"mcq-and-checkbox-questions"}}),_v("MCQ and Checkbox Questions"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#mcq-and-checkbox-questions","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("MCQ and checkbox questions are indicated with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"mcq\"")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"checkbox\"")]),_v(" attribute.")]),_v(" "),_c('p',[_v("In both instances, you can include the possible answers using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" component, placed anywhere inside the "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("if you wish, you could place it in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("header")]),_v(" mentioned above as well!")]),_v("question")]),_v(". To indicate the correct option(s), add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" attribute.")]),_v(" "),_c('p',[_v("Optionally, you can provide the reason for the particular option using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" attribute, or the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("
              ")]),_v(" slot for more expressive formatting, similar to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hint")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("header")]),_v(" options and slots.")]),_v(" "),_c('p',[_c('strong',[_v("MCQ Questions")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"mcq\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which of these **contradicts** the heuristics recommended when creating test cases with multiple inputs?\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This is **correct**. We need to figure out if a positive test case works!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" It is ok to combine valid values for different inputs.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" No more than one invalid test input should be in a given test case.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("correct")]),_v(">")]),_v("\n")]),_c('span',[_v(" All invalid test inputs must be tested together.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"reason\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n")]),_c('span',[_v(" correctly by the SUT.\n")]),_c('span',[_v(" This is because most SUTs return an error message upon encountering the first invalid input.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" How do you figure out which inputs are wrong? (or correct)\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"mcq"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Which of these "),_c('strong',[_v("contradicts")]),_v(" the heuristics recommended when creating test cases with multiple inputs?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_v("\n How do you figure out which inputs are wrong? (or correct)\n ")])]},proxy:true}])},[_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("This is "),_c('strong',[_v("correct")]),_v(". We need to figure out if a positive test case works!")])]},proxy:true}])},[_v("\n Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n ")]),_v(" "),_c('q-option',[_v("\n It is ok to combine valid values for different inputs.\n ")]),_v(" "),_c('q-option',[_v("\n No more than one invalid test input should be in a given test case.\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('div',[_v("\n If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n correctly by the SUT.\n This is because most SUTs return an error message upon encountering the first invalid input.\n ")])]},proxy:true}])},[_v("\n All invalid test inputs must be tested together.\n \n ")])],1)],1)],1)]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_v("MCQ questions can have multiple correct options!")]),_v(" "),_c('p',[_c('strong',[_v("Checkbox Questions")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"checkbox\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hint")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Use your calculator! :fas-calculator:\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" ##### Which of the following is true?\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" 1 + 1 = 11\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Division by zero is **undefined**!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" 1 / 0 = infinity\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("correct")]),_v(">")]),_v("\n")]),_c('span',[_v(" 11 / 11 = 1\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Use your calculator! "),_c('span',{staticClass:"fas fa-calculator",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v(" "),_c('h5',{attrs:{"id":"which-of-the-following-is-true"}},[_c('span',{staticClass:"anchor",attrs:{"id":"which-of-the-following-is-true"}}),_v("Which of the following is true?"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#which-of-the-following-is-true","onclick":"event.stopPropagation()"}})]),_v(" "),_c('br'),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum")])]},proxy:true}])},[_v("\n 1 + 1 = 11\n ")]),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Division by zero is "),_c('strong',[_v("undefined")]),_v("!")])]},proxy:true}])},[_v("\n 1 / 0 = infinity\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""}},[_v("\n 11 / 11 = 1\n ")])],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("q-option")]),_v(" Options and Slots")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("correct")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether this option (placed under either a MCQ or checkbox question) is correct. You may have multiple correct answers in either case.")])]),_v(" "),_c('tr',[_c('td',[_v("reason"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("The explanation markup to display for the option once the answer is checked.")])])])])]),_c('h4',{staticClass:"mt-4 mb-3",attrs:{"id":"text-questions"}},[_c('span',{staticClass:"anchor",attrs:{"id":"text-questions"}}),_v("Text Questions"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#text-questions","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Text questions are specified with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"text\"")]),_v(" attribute.")]),_v(" "),_c('p',[_v("Unlike MCQ and checkbox questions, answer checking is performed by providing keywords to check for in the user's answer through the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("keywords")]),_v(" attribute.\nIf no keywords are provided, the answer will always be marked as correct when placed in quizzes.")]),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_c('p',[_v("Keywords are validated by simply looking for the keyword as a pattern in the user's answer!\nThis works well for some\n"),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_v("When does validation work?")]),_v("cases\n"),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_c('span',[_v("\nWhen the keywords specified are rather long (eg. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("requirements")]),_v("), it reduces the chance that this keyword can be mistakenly validated.\n"),_c('br'),_c('br'),_v("\nIn contrast, something short and common like "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("take")]),_v(" which can easily be part of another word (eg. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mis-take-nly")]),_v(") would be mistakenly validated.\n")])])]),_v("\nand not others.")])]),_v(" "),_c('p',[_v("You can provide your answer in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("answer")]),_v(" attribute, or similarly, the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("
              ")]),_v(" slot for more expressive formatting.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which country did the Hawaiian pizza originate from?\"")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hawaii\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("threshold")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"0.5\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("answer")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"It originated from Hawaii!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" Watch some pizza commercials! :tv:\n")]),_c('span',[_v("\n")]),_c('span',[_v(" :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza:\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"text","keywords":"hawaii","threshold":"0.5"},scopedSlots:_u([{key:"answer",fn:function(){return [_c('p',[_v("It originated from Hawaii!")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Which country did the Hawaiian pizza originate from?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_c('p',[_v("Watch some pizza commercials! 📺")]),_v(" "),_c('p',[_v("🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕")])])]},proxy:true}])})],1)],1)]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_c('p',[_v("Since the validation is imperfect, the minimum proportion of keywords that need to be matched can also be changed using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("threshold")]),_v(" attribute.")]),_v(" "),_c('p',[_v("If you don't want to validate the answer at all, you may also omit the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("keywords")]),_v(" attribute entirely. Doing so also always marks the question as correct inside "),_c('a',{attrs:{"href":"#quizzes"}},[_v("quizzes")]),_v(".")])]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Text Question specific Options and Slots")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("keywords")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Comma delimited string of keywords or phrases to match the user's answer against.")])]),_v(" "),_c('tr',[_c('td',[_v("threshold")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Number")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0.5")])]),_v(" "),_c('td',[_v("Minimum proportion of keywords that have to be matched in the user's answer for the answer to be marked as correct.")])]),_v(" "),_c('tr',[_c('td',[_v("answer"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("The answer or explanation to display when the user clicks the check button.")])])])])]),_c('box',{attrs:{"type":"important"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Deprecation notes")])]},proxy:true}])},[_v(" "),_c('ul',[_c('li',[_v("The old "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("has-input")]),_v(" attributes translate to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"text\"")]),_v(", but will be deprecated in a future version.")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v("s without a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type")]),_v(" (or an unrecognised one) will always be marked correct when placed in quizzes.")])])]),_v(" "),_c('h4',{attrs:{"id":"quizzes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"quizzes"}}),_v("Quizzes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#quizzes","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can also build a series of questions out of multiple "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" components.")]),_v(" "),_c('p',[_v("Simply place the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" components you want to include into the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" component! No extra configuration is needed.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("quiz")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"mcq\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"checkbox\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('quiz',[_c('question',{attrs:{"type":"mcq"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Which of these "),_c('strong',[_v("contradicts")]),_v(" the heuristics recommended when creating test cases with multiple inputs?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_v("\n How do you figure out which inputs are wrong? (or correct)\n ")])]},proxy:true}])},[_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("This is "),_c('strong',[_v("correct")]),_v(". We need to figure out if a positive test case works!")])]},proxy:true}])},[_v("\n Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n ")]),_v(" "),_c('q-option',[_v("\n It is ok to combine valid values for different inputs.\n ")]),_v(" "),_c('q-option',[_v("\n No more than one invalid test input should be in a given test case.\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('div',[_v("\n If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n correctly by the SUT.\n This is because most SUTs return an error message upon encountering the first invalid input.\n ")])]},proxy:true}])},[_v("\n All invalid test inputs must be tested together.\n \n ")])],1),_v(" "),_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Use your calculator! "),_c('span',{staticClass:"fas fa-calculator",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v(" "),_c('h5',{attrs:{"id":"which-of-the-following-is-true-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"which-of-the-following-is-true-2"}}),_v("Which of the following is true?"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#which-of-the-following-is-true-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('br'),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum")])]},proxy:true}])},[_v("\n 1 + 1 = 11\n ")]),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Division by zero is "),_c('strong',[_v("undefined")]),_v("!")])]},proxy:true}])},[_v("\n 1 / 0 = infinity\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""}},[_v("\n 11 / 11 = 1\n ")])],1),_v(" "),_c('question',{attrs:{"type":"text","keywords":"hawaii","threshold":"0.5"},scopedSlots:_u([{key:"answer",fn:function(){return [_c('p',[_v("It originated from Hawaii!")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Which country did the Hawaiian pizza originate from?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_c('p',[_v("Watch some pizza commercials! 📺")]),_v(" "),_c('p',[_v("🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕")])])]},proxy:true}])})],1)],1)],1)]),_v(" "),_c('br'),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Quiz Options and Slots")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("intro")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Quiz intro markup above the question count.")])]),_v(" "),_c('tr',[_c('td',[_v("intro")]),_v(" "),_c('td',[_v("Slot")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Click start to begin")])]),_v(" "),_c('td',[_v("Quiz intro markup. Overrides the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("intro")]),_v(" attribute if both are present.")])])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("MCQ and Checkbox questions")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"MCQ and Checkbox questions","class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"mcq\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which of these **contradicts** the heuristics recommended when creating test cases with multiple inputs?\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This is **correct**. We need to figure out if a positive test case works!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" It is ok to combine valid values for different inputs.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" No more than one invalid test input should be in a given test case.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("correct")]),_v(">")]),_v("\n")]),_c('span',[_v(" All invalid test inputs must be tested together.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"reason\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n")]),_c('span',[_v(" correctly by the SUT.\n")]),_c('span',[_v(" This is because most SUTs return an error message upon encountering the first invalid input.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" How do you figure out which inputs are wrong? (or correct)\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")])])])])]),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Text questions")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Text questions","class":"hljs html"}},[_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which country did the Hawaiian pizza originate from?\"")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hawaii\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("threshold")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"0.5\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("answer")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"It originated from Hawaii!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" Watch some pizza commercials! :tv:\n")]),_c('span',[_v("\n")]),_c('span',[_v(" :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza:\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")])])])])]),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Quiz")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Quiz","class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("quiz")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"mcq\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"checkbox\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('div',[_c('quiz',[_c('question',{attrs:{"type":"mcq"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Which of these "),_c('strong',[_v("contradicts")]),_v(" the heuristics recommended when creating test cases with multiple inputs?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_v("\n How do you figure out which inputs are wrong? (or correct)\n ")])]},proxy:true}])},[_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("This is "),_c('strong',[_v("correct")]),_v(". We need to figure out if a positive test case works!")])]},proxy:true}])},[_v("\n Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n ")]),_v(" "),_c('q-option',[_v("\n It is ok to combine valid values for different inputs.\n ")]),_v(" "),_c('q-option',[_v("\n No more than one invalid test input should be in a given test case.\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('div',[_v("\n If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n correctly by the SUT.\n This is because most SUTs return an error message upon encountering the first invalid input.\n ")])]},proxy:true}])},[_v("\n All invalid test inputs must be tested together.\n \n ")])],1),_v(" "),_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Use your calculator! "),_c('span',{staticClass:"fas fa-calculator",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v("\n\n ##### Which of the following is true?\n\n "),_c('br'),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum")])]},proxy:true}])},[_v("\n 1 + 1 = 11\n ")]),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Division by zero is "),_c('strong',[_v("undefined")]),_v("!")])]},proxy:true}])},[_v("\n 1 / 0 = infinity\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""}},[_v("\n 11 / 11 = 1\n ")])],1),_v(" "),_c('question',{attrs:{"type":"text","keywords":"hawaii","threshold":"0.5"},scopedSlots:_u([{key:"answer",fn:function(){return [_c('p',[_v("It originated from Hawaii!")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Which country did the Hawaiian pizza originate from?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_v("\n\n Watch some pizza commercials! :tv:\n\n :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza:\n ")])]},proxy:true}])})],1)],1)])],1)])],1),_c('hr',{staticClass:"footnotes-sep"}),_v(" "),_c('section',{staticClass:"footnotes"},[_c('ol',{staticClass:"footnotes-list"},[_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"id":"pop:footnotefn-47-1","data-mb-component-type":"popover"}},[_m(33)]),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"id":"pop:footnotefn-47-2","data-mb-component-type":"popover"}},[_m(34)]),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"id":"pop:footnotefn-47-3","data-mb-component-type":"popover"}},[_m(35)]),_v(" "),_m(36),_v(" "),_m(37),_v(" "),_m(38)])]),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})],1),_v(" "),_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"})])],1),_v(" "),_m(39)])} +}; + var pageVueStaticRenderFns = [function anonymous( +) { +with(this){return _c('h1',{attrs:{"id":"reader-facing-features"}},[_c('span',{staticClass:"anchor",attrs:{"id":"reader-facing-features"}}),_v("Reader-Facing Features"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#reader-facing-features","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"headings"}},[_c('span',{staticClass:"anchor",attrs:{"id":"headings"}}),_v("Headings"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#headings","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"text-styles"}},[_c('span',{staticClass:"anchor",attrs:{"id":"text-styles"}}),_v("Text Styles"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#text-styles","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"blockquotes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"blockquotes"}}),_v("Blockquotes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#blockquotes","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"lists"}},[_c('span',{staticClass:"anchor",attrs:{"id":"lists"}}),_v("Lists"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#lists","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"code"}},[_c('span',{staticClass:"anchor",attrs:{"id":"code"}}),_v("Code"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#code","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"horizontal-rules"}},[_c('span',{staticClass:"anchor",attrs:{"id":"horizontal-rules"}}),_v("Horizontal Rules"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#horizontal-rules","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"links"}},[_c('span',{staticClass:"anchor",attrs:{"id":"links"}}),_v("Links"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#links","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"footnotes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"footnotes"}}),_v("Footnotes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#footnotes","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"images"}},[_c('span',{staticClass:"anchor",attrs:{"id":"images"}}),_v("Images"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#images","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"classes-attributes-and-amp-identifiers"}},[_c('span',{staticClass:"anchor",attrs:{"id":"classes-attributes-and-amp-identifiers"}}),_v("Classes, Attributes & Identifiers"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#classes-attributes-and-amp-identifiers","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"tables"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tables"}}),_v("Tables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tables","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"emoji"}},[_c('span',{staticClass:"anchor",attrs:{"id":"emoji"}}),_v("Emoji"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#emoji","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"icons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"icons"}}),_v("Icons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#icons","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"embeds"}},[_c('span',{staticClass:"anchor",attrs:{"id":"embeds"}}),_v("Embeds"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#embeds","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"dates"}},[_c('span',{staticClass:"anchor",attrs:{"id":"dates"}}),_v("Dates"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#dates","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"math-formulae"}},[_c('span',{staticClass:"anchor",attrs:{"id":"math-formulae"}}),_v("Math Formulae"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#math-formulae","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"badges"}},[_c('span',{staticClass:"anchor",attrs:{"id":"badges"}}),_v("Badges"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#badges","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"boxes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"boxes"}}),_v("Boxes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#boxes","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"panels"}},[_c('span',{staticClass:"anchor",attrs:{"id":"panels"}}),_v("Panels"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#panels","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"tabs"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tabs"}}),_v("Tabs"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tabs","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"pictures"}},[_c('span',{staticClass:"anchor",attrs:{"id":"pictures"}}),_v("Pictures"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#pictures","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"thumbnails"}},[_c('span',{staticClass:"anchor",attrs:{"id":"thumbnails"}}),_v("Thumbnails"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#thumbnails","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"diagrams"}},[_c('span',{staticClass:"anchor",attrs:{"id":"diagrams"}}),_v("Diagrams"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#diagrams","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"tooltips"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tooltips"}}),_v("Tooltips"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tooltips","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"popovers"}},[_c('span',{staticClass:"anchor",attrs:{"id":"popovers"}}),_v("Popovers"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#popovers","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"modals"}},[_c('span',{staticClass:"anchor",attrs:{"id":"modals"}}),_v("Modals"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#modals","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"dropdowns"}},[_c('span',{staticClass:"anchor",attrs:{"id":"dropdowns"}}),_v("Dropdowns"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#dropdowns","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"search-bars"}},[_c('span',{staticClass:"anchor",attrs:{"id":"search-bars"}}),_v("Search Bars"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#search-bars","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"nav-bars"}},[_c('span',{staticClass:"anchor",attrs:{"id":"nav-bars"}}),_v("Nav Bars"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#nav-bars","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"site-navigation-menus"}},[_c('span',{staticClass:"anchor",attrs:{"id":"site-navigation-menus"}}),_v("Site Navigation Menus"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#site-navigation-menus","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"page-navigation-menus"}},[_c('span',{staticClass:"anchor",attrs:{"id":"page-navigation-menus"}}),_v("Page Navigation Menus"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#page-navigation-menus","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"questions-and-quizzes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"questions-and-quizzes"}}),_v("Questions and Quizzes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#questions-and-quizzes","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('span',{attrs:{"data-mb-slot-name":"content"}},[_c('div',[_c('p',[_v("Here is the footnote. Footnotes will appear at the bottom of the page.")])])])} +},function anonymous( +) { +with(this){return _c('span',{attrs:{"data-mb-slot-name":"content"}},[_c('div',[_c('p',[_v("Here's one with multiple blocks.")]),_v(" "),_c('p',[_v("Subsequent paragraphs are indented to show that they\nbelong to the previous footnote.")])])])} +},function anonymous( +) { +with(this){return _c('span',{attrs:{"data-mb-slot-name":"content"}},[_c('div',[_c('p',[_v("Inlines notes are easier to write, since\nyou don't have to pick an identifier and move down to type the\nnote.")])])])} +},function anonymous( +) { +with(this){return _c('li',{staticClass:"footnote-item",attrs:{"id":"fn-47-1"}},[_c('p',[_v("Here is the footnote. Footnotes will appear at the bottom of the page.")])])} +},function anonymous( +) { +with(this){return _c('li',{staticClass:"footnote-item",attrs:{"id":"fn-47-2"}},[_c('p',[_v("Here's one with multiple blocks.")]),_v(" "),_c('p',[_v("Subsequent paragraphs are indented to show that they\nbelong to the previous footnote.")])])} +},function anonymous( +) { +with(this){return _c('li',{staticClass:"footnote-item",attrs:{"id":"fn-47-3"}},[_c('p',[_v("Inlines notes are easier to write, since\nyou don't have to pick an identifier and move down to type the\nnote.")])])} +},function anonymous( +) { +with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 3.1.1")]),_v(" on Sat, 22 Jan 2022, 16:49:34 UTC]")]),_c('br'),_v(" "),_c('small',[_v("This site is powered by "),_c('a',{attrs:{"href":"https://www.netlify.com/"}},[_v("Netlify")]),_v(".")])])])])} +}]; + \ No newline at end of file diff --git a/userGuide/reusingContents.html b/userGuide/reusingContents.html new file mode 100644 index 0000000..8e796cf --- /dev/null +++ b/userGuide/reusingContents.html @@ -0,0 +1,181 @@ + + + + + + + + MarkBind - User Guide: Reusing Contents + + + + + + + + + + + + + + + + +

              Reusing Contents

              User Guide → Reusing Contents

              Reusing Contents

              MarkBind is highly-optimized for content reuse. It offers several mechanisms to provide readers with many variations of the content while minimizing duplication at source file level. As a result, instead of creating a one-size-fits-all site, MarkBind can create a site in which readers can chart their own path of reading. +

              User Guide → Reusing Contents → Variables

              Variables

              Nunjucks variables are ideal for reusing small bits of code in multiple places; you can define a variable to represent the code bit in question and reuse it anywhere in the site by referring to the variable instead of duplicating the code bit. +

              MarkBind does not aim to alter the already robust variable features of nunjucks, but provides several extensions to it.

              Global Variables

              Global variables are to be defined in the _markbind/variables.md file. Each variable must have an name and the value can be any MarkBind-compliant code fragment. The name should not contain - and .. For example, search-option and search.options are not allowed.

              The variables declared here are available from anywhere in the code base.

              Example Here's how you can define two variables year and options:

              <variable name="year">2018</variable>
+
+<variable name="options">
+* yes
+* no
+* maybe
+</variable>
+

              To include a variable value in your code, give the variable id enclosed in Nunjucks' double curly braces syntax.

              Example The year was {{ year }}. The year was 2018.

              Global variables (_markbind/variables.md) will take precedence over any variables set via Nunjucks' tags (e.g. {% set %}).

              Built-in Global Variables

              MarkBind also provides a number of built-in variables.

              Variable Notes Example Output
              baseUrl Represents the root directory of the site on the server, as configured in your site configuration file.
              Used for specifying intra-site links.              		 If baseUrl is specified as userGuide/:

              <img src="{{baseUrl}}/images/logo.png" />              		 <img src="userGuide/images/logo.png" />
              timestamp The time stamp that indicates when the page was generated.

              The default values of "timeZone" and "locale" are "UTC" and "en-GB" respectively.              		 The following example showcases the use of the "Asia/Singapore" time zone.

              Page generated at: {{timestamp}}              		 Page generated at: Sat, 22 Jan 2022, 16:49:34 UTC
              MarkBind The MarkBind version in use, linked to the MarkBind website. Page generated by: {{MarkBind}} Page generated by: MarkBind 3.1.1

              Importing variables from other external file formats

              You can also source variables from external files using MarkBind's {% ext varName = "filepathToFile" %} Nunjucks extension. +This is useful if you have external datasets you want to display in your site!

              To do so, assign a root variable name (varName) to the file path from the similar to how you assign filepaths for other Nunjucks tagsroot directory of the site. You may then access the file's variables using dot varName.xx or array varName[i] syntax, depending on the file's contents.

                Importing from JSON files

                Example

                CODE:

                Displaying a student scoreboard stored as JSON
                {% ext studentScoreboard = "userGuide/syntax/extra/scoreboard.json" %}
+
+Student Number | Score | Rank
+:----- | :-------: | ----
+{% for student in studentScoreboard.students -%}
+{{ student.number }} | {{ student.score }} | {{ student.rank }}
+{% endfor %}
+
+<small>Last updated at {{ studentScoreboard.lastUpdated }}</small>
+

                Json file used in example

                OUTPUT:

                Student Number Score Rank
                A1234567X 87 / 100 1
                A1234123U 60 / 100 3
                A9876543L 76 / 100 2

                Last updated at 21 November, 2020

                Importing from CSV files

                Example

                CODE:

                Displaying a student scoreboard stored as CSV
                {% ext studentScoreboard = "userGuide/syntax/extra/scoreboard.csv" %}
+
+Student Number | Score | Rank
+:----- | :-------: | ----
+{% for student in studentScoreboard -%}
+{{ student.number }} | {{ student.score }} | {{ student.rank }}
+{% endfor %}
+

                CSV file used in example

                If you do not want to have a header row, you can specify it by appending a noHeader option at the end of the variable declaration. In this example, it should be {% ext studentScoreboard = "userGuide/syntax/extra/scoreboard.csv", noHeader %} . Elements have to be accessed using the [] operator (i.e. using student[0] to access student number instead of student.number).

                OUTPUT:

                Student Number Score Rank
                A1234567X 87 / 100 1
                A1234123U 60 / 100 3
                A9876543L 76 / 100 2

                Only .json and .csv files are supported for now.

                Global variables:

                _markbind/variables.md:

                <variable name="year">2018</span>
+

                The year was {{ year }}.

                User Guide → Reusing Contents → Includes

                Includes

                MarkBind has a powerful <include> mechanism which allows you to create documents by combining other content fragments. +

                You can use <include> tag to include another markdown or HTML document into the current document.

                Example Including text from a tip2.md in another file.

                Tip 1. ...
+<include src="tips/tip2.md" />
+Tip 3. ...
+

                You can <include> a fragment of a file by specifying the #fragment-id at the end of the src attribute value, provided the fragment is wrapped in a <div>/<span>/<seg> tag with the matching id.

                Example Including a fragment from a file:

                Some text
+<include src="docs/tips.md#tip-1" />
+Some other text
+

                docs/tips.md:

                ...
+<div id="tip-1" />
+  Tip 1. ...
+  ...
+</div>
+Tip 2. ...
+

                When setting the id of a fragment, be careful not to clash with heading anchor IDs auto-generated by MarkBind. For example, if you have a heading ## Some Useful Tips, MarkBind will auto-generate an ID some-useful-tips for that heading.

                The <include> tag works for any MarBind source file including the font matter section but it may not work in some special files such as the _markbind/variables.md.

                Attributes:

                • src: specify the source file path.
                • inline (optional): make the included result an inline element. (wrapped in <span> tag). e.g.,
                  The title is <include src="../docs/summary.md#title" inline /> while ...
+
                • optional (optional): include the file/fragment only if it exists i.e., there will be no error message if the file/fragment does not exist. e.g.,
                  <include src="UserStories.md" optional />
+
                • trim (optional): remove leading and trailing whitespace and newlines from the document before including.
                  <include src="UserStories.md#epic" trim />
+
                • omitFrontmatter (optional): omit the front matter of the file/fragment from being included (if any).
                  
+

                +The <include> mechanism can be used inside any MarkBind source file (even inside the front matter section) but it will not work inside some special files such as the _markbind/variables.md.

                <include> Inside an Included File

                Although the src attribute of an <include> is given relative to the current directory, it is converted to an absolute value before the i.e., the file containing the <include>host file is included from another file.

                Example Suppose you have a MarkBind project with the following file structure.

                C:/mySite/
+  ├── bookFiles/
+  |      ├── book.md
+  |      ├── chapter1.md
+  |      └── chapter2.md
+  └── reviewFiles/
+         └── review.md
+

                The book.md:

                # My Book
+<include src="chapter1.md" />
+<include src="chapter2.md" />
+

                The review.md:

                # My Review
+<include src="../bookFiles/book.md" />
+...
+

                The content of the chapter1.md and chapter2.md will be included in the review.md (via <include src="../bookFiles/book.md" />) although chapter1.md and chapter2.md are not in reviewFiles directory. i.e., <include src="chapter1.md" /> will be interpreted as <include src="c:/mySite/bookFiles/chapter1.md" />

                In other words, <include> interprets the reused code relative to the original location of the file, not the location in which it is reused.

                Specifying Variables in an <include>

                It is possible to include variables in an <include>.

                Example Specifying title and author variables in an <include> tag:

                <include src="article.md">
+  <variable name="title">My Title</variable>
+  <variable name="author">John Doe</variable>
+</include>
+

                In article.md:

                # {{ title }}<br>
+Author: {{ author }}
+

                These variables work the same way as variables in _markbind/variables.md, except that they only apply to the included file. They allow the included file to be reused as a template, for different source files using different variable values.

                You can also specify include variables within the <include> tag itself by adding a var- prefix.

                Example Specifying title and author variables inline:

                <include src="article.md" var-title="My Title" var-author="John Doe" />
+

                If the same variable is defined in a chain of <include>s (e.g. a.md includes b.md includes c.md...), variables defined in the top-most <include> will take precedence. Global variables (_markbind/variables.md) will take precedence over any <include> variables.

                Using Boilerplate Files

                If you find duplicating a code that needs to stay relative to the directory in which it usedboilerplate code fragment in multiple places of your code base, you can use a boilerplate file to avoid such duplication. Note that you cannot use a normal <include> in this case because the code included using a normal <include> stays relative to the original location while boilerplate code needs to be interpreted relative to the location it is being used.

                Example Suppose you have a MarkBind project with the following file structure.

                C:/mySite/
+  ├── chapter1/
+  |      ├── chapter.md
+  |      ├── text.md
+  |      └── exercises.md
+  ├── chapter2/
+  |      ├── chapter.md
+  |      ├── text.md
+  |      └── exercises.md
+  └── book.md
+

                The book.md:

                # My Book
+<include src="chapter1/chapter.md" />
+<include src="chapter2/chapter.md" />
+

                The chapter1/chapter.md:

                ## Text
+<include src="text.md" />
+## Exercises
+<include src="exercises.md" />
+

                The chapter2/chapter.md:

                ## Text
+<include src="text.md" />
+## Exercises
+<include src="exercises.md" />
+

                As you can see, both chapter.md files are exactly the same. If we were to use only one of the chapter.md files and <include> it twice in the book.md, we'll end up with the same chapter content duplicated twice, which is not what we want. In other words, chapter.md contains boilerplate code that needs to be interpreted relative to where it is applied, once relative to chapter1 directory and once relative to chapter2 directory.

                To use a code fragment as a boilerplate file,

                1. Put the code in a file inside the _markbind/boilerplates directory.
                2. <include> the file as if a copy of it exists in any directory you want it to applied, but add the boilerplate attribute to the <include> tag.

                Example Here's how you can use a boilerplate file to avoid duplicating the chapter.md:

                C:/mySite/
+  ├── _markbind/boilerplates/
+  |      └── chapter.md
+  ├── chapter1/
+  |      ├── text.md
+  |      └── exercises.md
+  ├── chapter2/
+  |      ├── text.md
+  |      └── exercises.md
+  └── book.md
+

                The book.md:

                # My Book
+<include src="chapter1/chapter.md" boilerplate />
+<include src="chapter2/chapter.md" boilerplate />
+

                The _markbind/boilerplates/chapter.md:

                ## Text
+<include src="text.md" />
+## Exercises
+<include src="exercises.md" />
+

                Consider the line <include src="chapter1/chapter.md" boilerplate />. Note how you can use src="chapter1/chapter.md" there is no such file. MarkBind will use the chapter.md file /_markbind/boilerplates/ but interpret it as if the file exist in chapter1 directory (i.e., interpret the chapter1.md code relative to the chapter1 directory.

                Similarly, <include src="chapter2/chapter.md" boilerplate /> interprets the chapter.md relative to the chapter2 directory.

                If you have many boilerplate files, you can organize them into directories inside the _markbind directory. When using such boilerplate files, you need to replace boilerplate attribute with boilerplate="<path to file relative to _markbind/boilerplates>".

                Example Suppose the chapter.md is places in a book directory:

                C:/mySite/
+  └── _markbind/boilerplates/
+         └── book/
+               └── chapter.md
+
+

                It needs to be used as follows:

                <include src="chapter1/chapter.md" boilerplate="book/chapter.md" />
+<include src="chapter2/chapter.md" boilerplate="book/chapter.md" />
+
                <include src="foo.md#bar" boilerplate inline trim>
+  <variable name="x">5</variable>
+</include>
+

                Reusing Contents Across Sites

                MarkBind supports reusing across sites. It allows you to include the pages you want from a sub-site in another main-site without having to change anything in the source files of the sub-site as long as the sub-site source files are inside the directory of the main site.

                Example Suppose you have a site textbook and you want to include some pages from it in another site course. Given below is how you can locate the sub-site textbook inside the root directory of the main-site course so that files from textbook can be reused in the course site.

                C:/course/
+  ├── textbook/
+  |      ├── index.md
+  |      ├── overview.md
+  |      └── site.json
+  ├── index.md
+  ├── reading.md
+  └── site.json
+

                reading.md (note how it reuses content from the sub-site textbook):

                # Week 1 Reading:
+<include src="textbook/overview.md" />
+

                +If you are using Git for version control, you can set up the sub-site repository as a Git sub-module of the main site repository.

                Creating Content Variations

                MarkBind can create sites that give more control to the reader. Given below are some mechanisms authors can use to create variations of content that gives more control to the reader in charting their own path through the content.

                Allowing users to remove some contents

                When the readers can remove an item from a page, they can create their own version of the page by removing items they don't want to see. This is especially useful when printing a page.

                To make an element closeable, use v-closeable.

                <div v-closeable>
+
+Optional video:
+
+@[youtube](v40b3ExbM0c)
+
+</div>
+

                This is how the content will appear. Note how you can hover over the content to access the ❌ button that can collapse the content.

                Optional video:

                Giving alternative contents

                You can use a Tabs component to give alternative versions of content, for example, giving a code snippet in different programming languages.

                Giving access to additional contents

                You can use following components to give readers an option to access additional content at their discretion.

                Organizing contents in alternative ways

                You can take advantage of MarkBinds feature for content reuse, you can organize content in alternative ways to cater for different readers, without having to duplicate content. For example, you can have different pages that organizes the same information alphabetically, chronologically, by difficulty, group information by topic, etc.

                Optimizing the Print View

                To hide minimized panels in the print view, add the following code to a CSS file used in your site.

                @media print {
+    .card-container > .morph {
+        display: none;
+    }
+}
+

                Hiding some info in the generated content

                To permanently hide a fragment from the reader:

                <span class="d-none">
+  content to hide ...
+</span>
+
+<panel header="..." add-class="d-none">
+  content to hide ...
+<panel>
+

                To hide a fragment in one specific page, 'mark' the elements using a class:

                <span class="extra">
+  content to hide ...
+</span>
+

                Then, in a page-specific CSS file,

                .extra {
+  display: none; /* 'block' or 'inline-block' if you want it to show */
+}
+

                Creating slight variations of content

                Tags are a good way to create multiple variations of a page within the same source file, such as to filter content for creating multiple different versions of the same page. See User Guide: Tweaking the Page Structure → Tags section for more information.

                Tweaking the Page Structure

                Working with Sites


                + + + diff --git a/userGuide/reusingContents.page-vue-render.js b/userGuide/reusingContents.page-vue-render.js new file mode 100644 index 0000000..24adb6f --- /dev/null +++ b/userGuide/reusingContents.page-vue-render.js @@ -0,0 +1,289 @@ + + var pageVueRenderFn = function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',[_c('header',{attrs:{"fixed":""}},[_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/index.html","title":"Home"}},[_c('img',{attrs:{"src":"/images/logo-darkbackground.svg","height":"20"}})])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('form',{staticClass:"navbar-form"},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback,"menu-align-right":""}})],1)])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/index.html"}},[_v("HOME")])]),_v(" "),_c('div',{attrs:{"tags":"environment--ug"}},[_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"sibling-or-child","href":"/userGuide/index.html"}},[_v("USER GUIDE")])])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/showcase.html"}},[_v("SHOWCASE")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/about.html"}},[_v("ABOUT")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_c('span',[_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}})])])])])],1)]),_v(" "),_c('div',{attrs:{"id":"flex-body"}},[_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"site-nav","tag-name":"nav","to":"site-nav"}},[_c('div',{staticClass:"site-nav-top"},[_c('div',{staticClass:"font-weight-bold mb-2",staticStyle:{"font-size":"1.25rem"}},[_v("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tipsAndTricks.html"}},[_v("Tips & Tricks")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/glossary.html"}},[_v("Glossary")])])])])])])],1)],1)]),_v(" "),_c('div',{staticClass:"fixed-header-padding",attrs:{"id":"content-wrapper"}},[_m(0),_v(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_c('p'),_v(" "),_c('div',[_m(4),_v(" "),_m(5),_v(" "),_m(6),_c('p'),_v(" "),_c('p',[_v("MarkBind does not aim to alter the already robust variable features of nunjucks, but provides several extensions to it.")]),_v(" "),_m(7),_v(" "),_m(8),_v(" "),_c('p',[_v("The variables declared here are available from anywhere in the code base.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Here's how you can define two variables "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("year")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("options")]),_v(":")],1),_v(" "),_m(9)]),_v(" "),_c('p',[_v("To include a variable value in your code, give the variable id enclosed in Nunjucks' double curly braces syntax.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("The year was {{ year }}.")]),_v(" "),_c('span',{staticClass:"fas fa-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" The year was 2018.")],1)]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Global variables ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/variables.md")]),_v(") will take precedence over any variables set via Nunjucks' tags (e.g. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{% set %}")]),_v(").")])]),_v(" "),_m(10),_v(" "),_c('p',[_v("MarkBind also provides a number of built-in variables.")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Variable")]),_v(" "),_c('th',[_v("Notes")]),_v(" "),_c('th',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])],1),_v(" "),_c('th',[_v("Output")])])]),_v(" "),_m(11)])]),_m(12),_v(" "),_m(13),_v(" "),_c('p',[_v("To do so, assign a root variable name ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("varName")]),_v(") to the file path from the "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("similar to how you assign filepaths for other Nunjucks tags")]),_v("root directory of the site")]),_v(". You may then access the file's variables using dot "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("varName.xx")]),_v(" or array "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("varName[i]")]),_v(" syntax, depending on the file's contents.")]),_v(" "),_c('tabs',[_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Importing from JSON files")]},proxy:true}])},[_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])],1),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Displaying a student scoreboard stored as JSON")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Displaying a student scoreboard stored as JSON","class":"hljs html"}},[_c('span',[_v("{% ext studentScoreboard = \"userGuide/syntax/extra/scoreboard.json\" %}\n")]),_c('span',[_v("\n")]),_c('span',[_v("Student Number | Score | Rank\n")]),_c('span',[_v(":----- | :-------: | ----\n")]),_c('span',[_v("{% for student in studentScoreboard.students -%}\n")]),_c('span',[_v("{{ student.number }} | {{ student.score }} | {{ student.rank }}\n")]),_c('span',[_v("{% endfor %}\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("Last updated at {{ studentScoreboard.lastUpdated }}"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])]),_c('panel',{attrs:{"type":"minimal"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Json file used in example")])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Json File")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Json File","class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"lastUpdated\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"21 November, 2020\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"students\"")]),_v(": [\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"number\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"A1234567X\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"score\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("87")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"rank\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("1")]),_v("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"number\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"A1234123U\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"score\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("60")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"rank\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("3")]),_v("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"number\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"A9876543L\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"score\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("76")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"rank\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("2")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" ]\n")]),_c('span',[_v("}\n")])])])])])]),_v(" "),_c('br')],1),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',{staticStyle:{"text-align":"left"}},[_v("Student Number")]),_v(" "),_c('th',{staticStyle:{"text-align":"center"}},[_v("Score")]),_v(" "),_c('th',[_v("Rank")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("A1234567X")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("87 / 100")]),_v(" "),_c('td',[_v("1")])]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("A1234123U")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("60 / 100")]),_v(" "),_c('td',[_v("3")])]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("A9876543L")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("76 / 100")]),_v(" "),_c('td',[_v("2")])])])])]),_c('p',[_c('small',[_v("Last updated at 21 November, 2020")])])])],1)]),_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Importing from CSV files")]},proxy:true}])},[_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])],1),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Displaying a student scoreboard stored as CSV")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Displaying a student scoreboard stored as CSV","class":"hljs html"}},[_c('span',[_v("{% ext studentScoreboard = \"userGuide/syntax/extra/scoreboard.csv\" %}\n")]),_c('span',[_v("\n")]),_c('span',[_v("Student Number | Score | Rank\n")]),_c('span',[_v(":----- | :-------: | ----\n")]),_c('span',[_v("{% for student in studentScoreboard -%}\n")]),_c('span',[_v("{{ student.number }} | {{ student.score }} | {{ student.rank }}\n")]),_c('span',[_v("{% endfor %}\n")])])])])]),_c('panel',{attrs:{"type":"minimal"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("CSV file used in example")])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("CSV File")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"CSV File","class":"hljs"}},[_c('span',[_v("number,score,rank\n")]),_c('span',[_v("A1234567X,87,1\n")]),_c('span',[_v("A1234123U,60,3\n")]),_c('span',[_v("A9876543L,76,2\n")])])])])])]),_v(" "),_c('br'),_v(" "),_c('box',{attrs:{"border-left-color":"#00B0F0"}},[_c('p',[_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-lightbulb",attrs:{"aria-hidden":"true"}})]),_v(" If you do not want to have a header row, you can specify it by appending a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("noHeader")]),_v(" option at the end of the variable declaration. In this example, it should be "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{% ext studentScoreboard = \"userGuide/syntax/extra/scoreboard.csv\", noHeader %}")]),_v(" . Elements have to be accessed using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("[]")]),_v(" operator (i.e. using "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("student[0]")]),_v(" to access student number instead of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("student.number")]),_v(").")])])],1),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',{staticStyle:{"text-align":"left"}},[_v("Student Number")]),_v(" "),_c('th',{staticStyle:{"text-align":"center"}},[_v("Score")]),_v(" "),_c('th',[_v("Rank")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("A1234567X")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("87 / 100")]),_v(" "),_c('td',[_v("1")])]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("A1234123U")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("60 / 100")]),_v(" "),_c('td',[_v("3")])]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("A9876543L")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("76 / 100")]),_v(" "),_c('td',[_v("2")])])])])])])],1)])],1),_v(" "),_c('box',{attrs:{"type":"info","seamless":""}},[_c('p',[_v("Only "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".json")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".csv")]),_v(" files are supported for now.")])]),_v(" "),_m(14)],1),_v(" "),_c('hr'),_v(" "),_c('div',[_m(15),_v(" "),_m(16),_v(" "),_m(17),_c('p'),_v(" "),_m(18),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Including text from a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tip2.md")]),_v(" in another file.")],1),_v(" "),_m(19)]),_v(" "),_m(20),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Including a fragment from a file:")],1),_v(" "),_m(21),_m(22),_v(" "),_m(23)]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("When setting the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(" of a fragment, be careful not to clash with heading anchor IDs auto-generated by MarkBind. For example, if you have a heading "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("## Some Useful Tips")]),_v(", MarkBind will auto-generate an ID "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("some-useful-tips")]),_v(" for that heading.")])]),_v(" "),_c('box',{attrs:{"border-left-color":"#00B0F0"}},[_c('p',[_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-lightbulb",attrs:{"aria-hidden":"true"}})]),_v(" The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" tag works for any MarBind source file including the "),_c('em',[_v("font matter")]),_v(" section but it may not work in some "),_c('em',[_v("special")]),_v(" files such as the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/variables.md")]),_v(".")])]),_v(" "),_m(24),_v(" "),_m(25),_v(" "),_c('div',[_c('box',{attrs:{"border-left-color":"#00B0F0"}},[_c('p',[_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-lightbulb",attrs:{"aria-hidden":"true"}})]),_v("\nThe "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" mechanism can be used inside any MarkBind source file (even inside the "),_c('em',[_v("front matter")]),_v(" section) but it will not work inside some "),_c('em',[_v("special")]),_v(" files such as the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/variables.md")]),_v(".")])])],1),_v(" "),_m(26),_v(" "),_c('p',[_c('strong',[_v("Although the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" attribute of an "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" is given "),_c('em',[_v("relative")]),_v(" to the current directory, it is converted to an "),_c('em',[_v("absolute")]),_v(" value "),_c('em',[_v("before")]),_v(" the "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_m(27),_v("host file")]),_v(" is included from another file.")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Suppose you have a MarkBind project with the following file structure.")],1),_v(" "),_m(28),_m(29),_v(" "),_m(30),_m(31),_v(" "),_m(32),_m(33)]),_v(" "),_m(34),_v(" "),_c('hr'),_v(" "),_m(35),_v(" "),_m(36),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Specifying "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("title")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("author")]),_v(" variables in an "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" tag:")],1),_v(" "),_m(37),_m(38),_v(" "),_m(39)]),_v(" "),_m(40),_v(" "),_m(41),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Specifying "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("title")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("author")]),_v(" variables inline:")],1),_v(" "),_m(42)]),_v(" "),_m(43),_v(" "),_m(44),_v(" "),_c('p',[_c('strong',[_v("If you find duplicating a "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("code that needs to stay relative to the directory in which it used")]),_c('em',[_v("boilerplate code")])]),_v(" fragment in multiple places of your code base, you can use a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boilerplate")]),_v(" file to avoid such duplication.")]),_v(" Note that you cannot use a normal "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" in this case because the code included using a normal "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" stays relative to the original location while boilerplate code needs to be interpreted relative to the location it is being used.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Suppose you have a MarkBind project with the following file structure.")],1),_v(" "),_m(45),_m(46),_v(" "),_m(47),_m(48),_v(" "),_m(49),_m(50),_v(" "),_m(51),_m(52)]),_v(" "),_c('p',[_v("To use a code fragment as a boilerplate file,")]),_v(" "),_m(53),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Here's how you can use a boilerplate file to avoid duplicating the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter.md")]),_v(":")],1),_v(" "),_m(54),_m(55),_v(" "),_m(56),_m(57),_v(" "),_m(58),_m(59),_v(" "),_m(60)]),_v(" "),_m(61),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Suppose the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter.md")]),_v(" is places in a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("book")]),_v(" directory:")],1),_v(" "),_m(62),_c('p',[_v("It needs to be used as follows:")]),_v(" "),_m(63)]),_v(" "),_m(64)],1),_v(" "),_c('hr'),_v(" "),_m(65),_v(" "),_m(66),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Suppose you have a site "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("textbook")]),_v(" and you want to include some pages from it in another site "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("course")]),_v(". Given below is how you can locate the sub-site "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("textbook")]),_v(" inside the root directory of the main-site "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("course")]),_v(" so that files from "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("textbook")]),_v(" can be reused in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("course")]),_v(" site.")],1),_v(" "),_m(67),_m(68),_v(" "),_m(69)]),_v(" "),_c('div',[_c('box',{attrs:{"border-left-color":"#00B0F0"}},[_c('p',[_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-lightbulb",attrs:{"aria-hidden":"true"}})]),_v("\nIf you are using Git for version control, you can set up the sub-site repository as a "),_c('a',{attrs:{"href":"https://git-scm.com/book/en/v2/Git-Tools-Submodules"}},[_v("Git sub-module")]),_v(" of the main site repository.")])])],1),_v(" "),_c('hr'),_v(" "),_m(70),_v(" "),_m(71),_v(" "),_m(72),_v(" "),_c('p',[_v("When the readers can remove an item from a page, they can create their own version of the page by removing items they don't want to see. This is especially useful when printing a page.")]),_v(" "),_m(73),_v(" "),_c('div',{staticClass:"indented"},[_m(74),_c('p',[_v("This is how the content will appear. Note how you can hover over the content to access the ❌ button that can collapse the content.")]),_v(" "),_c('div',{directives:[{name:"closeable",rawName:"v-closeable"}]},[_c('p',[_v("Optional video:")]),_v(" "),_m(75)])]),_v(" "),_m(76),_v(" "),_m(77),_v(" "),_m(78),_v(" "),_c('p',[_v("You can use following components to give readers an option to access additional content at their discretion.")]),_v(" "),_m(79),_v(" "),_m(80),_v(" "),_m(81),_v(" "),_m(82),_v(" "),_m(83),_v(" "),_m(84),_m(85),_v(" "),_c('p',[_v("To permanently hide a fragment from the reader:")]),_v(" "),_m(86),_m(87),_v(" "),_m(88),_c('p',[_v("Then, in a page-specific CSS file,")]),_v(" "),_m(89),_m(90),_v(" "),_m(91),_v(" "),_m(92),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})]),_v(" "),_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"},[_c('overlay-source',{staticClass:"nav nav-pills flex-column my-0 small no-flex-wrap",attrs:{"id":"mb-page-nav","tag-name":"nav","to":"mb-page-nav"}},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#reusing-contents"}},[_v("Reusing Contents‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#variables"}},[_v("Variables‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#global-variables"}},[_v("Global Variables‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#built-in-global-variables"}},[_v("Built-in Global Variables‎")])]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#importing-variables-from-other-external-file-formats"}},[_v("Importing variables from other external file formats‎")])]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#includes"}},[_v("Includes‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#using-boilerplate-files"}},[_v("Using Boilerplate Files‎")])]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#reusing-contents-across-sites"}},[_v("Reusing Contents Across Sites‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#creating-content-variations"}},[_v("Creating Content Variations‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#allowing-users-to-remove-some-contents"}},[_v("Allowing users to remove some contents‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#giving-alternative-contents"}},[_v("Giving alternative contents‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#giving-access-to-additional-contents"}},[_v("Giving access to additional contents‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#organizing-contents-in-alternative-ways"}},[_v("Organizing contents in alternative ways‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#optimizing-the-print-view"}},[_v("Optimizing the Print View‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#hiding-some-info-in-the-generated-content"}},[_v("Hiding some info in the generated content‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#creating-slight-variations-of-content"}},[_v("Creating slight variations of content‎")])])])])],1)])],1),_v(" "),_m(93)])} +}; + var pageVueStaticRenderFns = [function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}},[_v("Reusing Contents")])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_c('em',[_v("User Guide → Reusing Contents")])])])])} +},function anonymous( +) { +with(this){return _c('h1',{attrs:{"id":"reusing-contents"}},[_c('span',{staticClass:"anchor",attrs:{"id":"reusing-contents"}}),_v("Reusing Contents"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#reusing-contents","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p',[_c('strong',[_v("MarkBind is highly-optimized for content reuse")]),_v(". It offers several mechanisms to provide readers with many variations of the content while minimizing duplication at source file level. As a result, instead of creating a one-size-fits-all site, MarkBind can create a site in which readers can chart their own path of reading.\n")])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/reusingContents.html#variables"}},[_c('em',[_v("User Guide → Reusing Contents → Variables")])])])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"variables"}},[_c('span',{staticClass:"anchor",attrs:{"id":"variables"}}),_v("Variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#variables","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('span',{attrs:{"id":"overview"}},[_c('p',[_c('strong',[_v("Nunjucks "),_c('a',{attrs:{"href":"https://mozilla.github.io/nunjucks/templating.html#set"}},[_v("variables")]),_v(" are ideal for reusing small bits of code")]),_v(" in multiple places; you can define a variable to represent the code bit in question and reuse it anywhere in the site by referring to the variable instead of duplicating the code bit.\n")])])} +},function anonymous( +) { +with(this){return _c('h3',{attrs:{"id":"global-variables"}},[_c('span',{staticClass:"anchor",attrs:{"id":"global-variables"}}),_v("Global Variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#global-variables","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Global variables are to be defined in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/variables.md")]),_v(" file.")]),_v(" Each variable must have an "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("name")]),_v(" and the value can be any MarkBind-compliant code fragment. The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("name")]),_v(" should not contain "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".")]),_v(". For example, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("search-option")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("search.options")]),_v(" are not allowed.")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("variable")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"year\"")]),_v(">")]),_v("2018"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("variable")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"options\"")]),_v(">")]),_v("\n")]),_c('span',[_v("* yes\n")]),_c('span',[_v("* no\n")]),_c('span',[_v("* maybe\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"built-in-global-variables"}},[_c('span',{staticClass:"anchor",attrs:{"id":"built-in-global-variables"}}),_v("Built-in Global Variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#built-in-global-variables","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('tbody',[_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")])]),_v(" "),_c('td',[_v("Represents the root directory of the site on the server, as configured in your "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#baseurl"}},[_v("site configuration")]),_v(" file. "),_c('br'),_v(" Used for specifying "),_c('a',{attrs:{"href":"/userGuide/formattingContents.html#intra-site-links"}},[_v("intra-site links")]),_v(".")]),_v(" "),_c('td',[_v("If "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")]),_v(" is specified as "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("userGuide/")]),_v(":"),_c('br'),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")])])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("timestamp")])]),_v(" "),_c('td',[_v("The time stamp that indicates when the page was generated. "),_c('br'),_c('br'),_v(" The "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#timezone"}},[_v("default")]),_v(" values of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"timeZone\"")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"locale\"")]),_v(" are "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"UTC\"")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"en-GB\"")]),_v(" respectively.")]),_v(" "),_c('td',[_v("The following example showcases the use of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"Asia/Singapore\"")]),_v(" time zone."),_c('br'),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Page generated at: {{timestamp}}")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Page generated at: Sat, 22 Jan 2022, 16:49:34 UTC")])])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("MarkBind")])]),_v(" "),_c('td',[_v("The MarkBind version in use, linked to the MarkBind website.")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Page generated by: {{MarkBind}}")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Page generated by:")]),_v(" "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 3.1.1")])])])])} +},function anonymous( +) { +with(this){return _c('h3',{attrs:{"id":"importing-variables-from-other-external-file-formats"}},[_c('span',{staticClass:"anchor",attrs:{"id":"importing-variables-from-other-external-file-formats"}}),_v("Importing variables from other external file formats"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#importing-variables-from-other-external-file-formats","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("You can also source variables from external files using MarkBind's "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{% ext varName = \"filepathToFile\" %}")]),_v(" Nunjucks extension.\nThis is useful if you have external datasets you want to display in your site!")])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('p',[_v("Global variables:")]),_v(" "),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/variables.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("variable")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"year\"")]),_v(">")]),_v("2018"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])]),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("The year was {{ year }}.")])])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/reusingContents.html#includes"}},[_c('em',[_v("User Guide → Reusing Contents → Includes")])])])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"includes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"includes"}}),_v("Includes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#includes","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('span',{attrs:{"id":"overview"}},[_c('p',[_c('strong',[_v("MarkBind has a powerful "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" mechanism")]),_v(" which allows you to create documents by combining other content fragments.\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("You can use "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" tag to include another markdown or HTML document into the current document.")])])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("Tip 1. ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tips/tip2.md\"")]),_v(" />")]),_v("\n")]),_c('span',[_v("Tip 3. ...\n")])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("You can "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" a fragment of a file")]),_v(" by specifying the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("#fragment-id")]),_v(" at the end of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" attribute value, provided the fragment is wrapped in a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("
                ")]),_v("/"),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v("/"),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" tag with the matching "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("Some text\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"docs/tips.md#tip-1\"")]),_v(" />")]),_v("\n")]),_c('span',[_v("Some other text\n")])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("docs/tips.md")]),_v(":")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tip-1\"")]),_v(" />")]),_v("\n")]),_c('span',[_v(" Tip 1. ...\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("Tip 2. ...\n")])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Attributes:")])])} +},function anonymous( +) { +with(this){return _c('ul',[_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")])]),_v(": specify the source file path.")]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("inline")])]),_v(" (optional): make the included result an inline element. (wrapped in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" tag). e.g.,"),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("The title is "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../docs/summary.md#title\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("inline")]),_v(" />")]),_v(" while ...\n")])])])]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("optional")])]),_v(" (optional): include the file/fragment only if it exists i.e., there will be no error message if the file/fragment does not exist. e.g.,"),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"UserStories.md\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("optional")]),_v(" />")]),_v("\n")])])])]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("trim")])]),_v(" (optional): remove leading and trailing whitespace and newlines from the document before including."),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"UserStories.md#epic\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trim")]),_v(" />")]),_v("\n")])])])]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("omitFrontmatter")])]),_v(" (optional): omit the front matter of the file/fragment from being included (if any)."),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("\n")])])])])])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"include-inside-an-included-file"}},[_c('span',{staticClass:"anchor",attrs:{"id":"include-inside-an-included-file"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" Inside an Included File"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#include-inside-an-included-file","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("i.e., the file containing the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")])])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs"}},[_c('span',[_v("C:/mySite/\n")]),_c('span',[_v(" ├── bookFiles/\n")]),_c('span',[_v(" | ├── book.md\n")]),_c('span',[_v(" | ├── chapter1.md\n")]),_c('span',[_v(" | └── chapter2.md\n")]),_c('span',[_v(" └── reviewFiles/\n")]),_c('span',[_v(" └── review.md\n")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("book.md")]),_v(":")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("# My Book")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"chapter1.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"chapter2.md\"")]),_v(" />")])]),_v("\n")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("review.md")]),_v(":")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("# My Review")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../bookFiles/book.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_v("...\n")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("The content of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter1.md")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter2.md")]),_v(" will be included in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("review.md")]),_v(" (via "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(") although "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter1.md")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter2.md")]),_v(" are not in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("reviewFiles")]),_v(" directory. i.e., "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" will be interpreted as "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("In other words, "),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" interprets the reused code relative to the original location of the file, not the location in which it is reused.")])])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"specifying-variables-in-an-include"}},[_c('span',{staticClass:"anchor",attrs:{"id":"specifying-variables-in-an-include"}}),_v("Specifying Variables in an "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#specifying-variables-in-an-include","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("It is possible to include variables in an "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(".")])])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"article.md\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("variable")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"title\"")]),_v(">")]),_v("My Title"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("variable")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"author\"")]),_v(">")]),_v("John Doe"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("In "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("article.md")]),_v(":")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("# {{ title }}"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v("Author: {{ author }}\n")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("These variables work the same way as variables in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/variables.md")]),_v(", except that they only apply to the included file. They allow the included file to be reused as a template, for different source files using different variable values.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("You can also specify include variables within the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" tag itself by adding a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("var-")]),_v(" prefix.")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"article.md\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("var-title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"My Title\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("var-author")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"John Doe\"")]),_v(" />")]),_v("\n")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("If the same variable is defined in a chain of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v("s (e.g. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("a.md")]),_v(" includes "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("b.md")]),_v(" includes "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("c.md")]),_v("...), variables defined in the top-most "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" will take precedence. Global variables ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/variables.md")]),_v(") will take precedence over any "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" variables.")])} +},function anonymous( +) { +with(this){return _c('h3',{attrs:{"id":"using-boilerplate-files"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-boilerplate-files"}}),_v("Using Boilerplate Files"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-boilerplate-files","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs"}},[_c('span',[_v("C:/mySite/\n")]),_c('span',[_v(" ├── chapter1/\n")]),_c('span',[_v(" | ├── chapter.md\n")]),_c('span',[_v(" | ├── text.md\n")]),_c('span',[_v(" | └── exercises.md\n")]),_c('span',[_v(" ├── chapter2/\n")]),_c('span',[_v(" | ├── chapter.md\n")]),_c('span',[_v(" | ├── text.md\n")]),_c('span',[_v(" | └── exercises.md\n")]),_c('span',[_v(" └── book.md\n")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("book.md")]),_v(":")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("# My Book")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"chapter1/chapter.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"chapter2/chapter.md\"")]),_v(" />")])]),_v("\n")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter1/chapter.md")]),_v(":")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Text")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Exercises")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exercises.md\"")]),_v(" />")])]),_v("\n")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter2/chapter.md")]),_v(":")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Text")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Exercises")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exercises.md\"")]),_v(" />")])]),_v("\n")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("As you can see, both "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter.md")]),_v(" files are exactly the same. If we were to use only one of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter.md")]),_v(" files and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" it twice in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("book.md")]),_v(", we'll end up with the same chapter content duplicated twice, which is not what we want. In other words, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter.md")]),_v(" contains boilerplate code that needs to be interpreted relative to where it is applied, once relative to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter1")]),_v(" directory and once relative to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter2")]),_v(" directory.")])} +},function anonymous( +) { +with(this){return _c('ol',[_c('li',[_v("Put the code in a file inside the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/boilerplates")]),_v(" directory.")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" the file "),_c('em',[_v("as if")]),_v(" a copy of it exists in any directory you want it to applied, but add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boilerplate")]),_v(" attribute to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" tag.")])])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs"}},[_c('span',[_v("C:/mySite/\n")]),_c('span',[_v(" ├── _markbind/boilerplates/\n")]),_c('span',[_v(" | └── chapter.md\n")]),_c('span',[_v(" ├── chapter1/\n")]),_c('span',[_v(" | ├── text.md\n")]),_c('span',[_v(" | └── exercises.md\n")]),_c('span',[_v(" ├── chapter2/\n")]),_c('span',[_v(" | ├── text.md\n")]),_c('span',[_v(" | └── exercises.md\n")]),_c('span',[_v(" └── book.md\n")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("book.md")]),_v(":")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("# My Book")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"chapter1/chapter.md\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("boilerplate")]),_v(" />")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"chapter2/chapter.md\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("boilerplate")]),_v(" />")])]),_v("\n")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/boilerplates/chapter.md")]),_v(":")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Text")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Exercises")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exercises.md\"")]),_v(" />")])]),_v("\n")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("Consider the line "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(". Note how you can use "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src=\"chapter1/chapter.md\"")]),_v(" there is no such file. MarkBind will use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter.md")]),_v(" file "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("/_markbind/boilerplates/")]),_v(" but interpret it as if the file exist in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter1")]),_v(" directory (i.e., interpret the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter1.md")]),_v(" code relative to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter1")]),_v(" directory.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("Similarly, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" interprets the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter.md")]),_v(" relative to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter2")]),_v(" directory.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("If you have many boilerplate files, you can organize them into directories inside the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind")]),_v(" directory. When using such boilerplate files, you need to replace "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boilerplate")]),_v(" attribute with "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boilerplate=\"\"")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs"}},[_c('span',[_v("C:/mySite/\n")]),_c('span',[_v(" └── _markbind/boilerplates/\n")]),_c('span',[_v(" └── book/\n")]),_c('span',[_v(" └── chapter.md\n")]),_c('span',[_v("\n")])])])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"chapter1/chapter.md\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("boilerplate")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"book/chapter.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"chapter2/chapter.md\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("boilerplate")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"book/chapter.md\"")]),_v(" />")])]),_v("\n")])])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"foo.md#bar\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("boilerplate")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("inline")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trim")]),_v(">")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("variable")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"x\"")]),_v(">")])]),_v("5"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"reusing-contents-across-sites"}},[_c('span',{staticClass:"anchor",attrs:{"id":"reusing-contents-across-sites"}}),_v("Reusing Contents Across Sites"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#reusing-contents-across-sites","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("MarkBind supports reusing across sites.")]),_v(" It allows you to include the pages you want from a "),_c('em',[_v("sub-site")]),_v(" in another "),_c('em',[_v("main-site")]),_v(" without having to change anything in the source files of the "),_c('em',[_v("sub-site")]),_v(" as long as the sub-site source files are inside the directory of the "),_c('em',[_v("main site")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs"}},[_c('span',[_v("C:/course/\n")]),_c('span',[_v(" ├── textbook/\n")]),_c('span',[_v(" | ├── index.md\n")]),_c('span',[_v(" | ├── overview.md\n")]),_c('span',[_v(" | └── site.json\n")]),_c('span',[_v(" ├── index.md\n")]),_c('span',[_v(" ├── reading.md\n")]),_c('span',[_v(" └── site.json\n")])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("reading.md")]),_v(" (note how it reuses content from the sub-site "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("textbook")]),_v("):")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("# Week 1 Reading:")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"textbook/overview.md\"")]),_v(" />")])]),_v("\n")])])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"creating-content-variations"}},[_c('span',{staticClass:"anchor",attrs:{"id":"creating-content-variations"}}),_v("Creating Content Variations"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#creating-content-variations","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("MarkBind can create sites that give more control to the reader.")]),_v(" Given below are some mechanisms authors can use to create variations of content that gives more control to the reader in charting their own path through the content.")])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"allowing-users-to-remove-some-contents"}},[_c('span',{staticClass:"anchor",attrs:{"id":"allowing-users-to-remove-some-contents"}}),_v("Allowing users to remove some contents"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#allowing-users-to-remove-some-contents","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("To make an element closeable, use "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("v-closeable")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("v-closeable")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("Optional video:\n")]),_c('span',[_v("\n")]),_c('span',[_v("@[youtube](v40b3ExbM0c)\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"block-embed block-embed-service-youtube"},[_c('iframe',{attrs:{"type":"text/html","src":"//www.youtube.com/embed/v40b3ExbM0c","frameborder":"0","width":"640","height":"390","webkitallowfullscreen":"","mozallowfullscreen":"","allowfullscreen":""}})])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"giving-alternative-contents"}},[_c('span',{staticClass:"anchor",attrs:{"id":"giving-alternative-contents"}}),_v("Giving alternative contents"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#giving-alternative-contents","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("You can use a "),_c('a',{attrs:{"href":"/userGuide/components/presentation.html#tabs"}},[_c('em',[_v("Tabs")]),_v(" component")]),_v(" to give alternative versions of content, for example, giving a code snippet in different programming languages.")])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"giving-access-to-additional-contents"}},[_c('span',{staticClass:"anchor",attrs:{"id":"giving-access-to-additional-contents"}}),_v("Giving access to additional contents"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#giving-access-to-additional-contents","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('ul',[_c('li',[_c('a',{attrs:{"href":"/userGuide/components/popups.html#tooltip"}},[_v("Tooltips")]),_v(", "),_c('a',{attrs:{"href":"/userGuide/components/popups.html#popover"}},[_v("Popovers")]),_v(", "),_c('a',{attrs:{"href":"/userGuide/components/popups.html#modal"}},[_v("Modals")])]),_v(" "),_c('li',[_c('a',{attrs:{"href":"/userGuide/components/presentation.html#panels"}},[_v("Expandable Panels")])])])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"organizing-contents-in-alternative-ways"}},[_c('span',{staticClass:"anchor",attrs:{"id":"organizing-contents-in-alternative-ways"}}),_v("Organizing contents in alternative ways"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#organizing-contents-in-alternative-ways","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("You can take advantage of "),_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("MarkBinds feature for content reuse")]),_v(", you can organize content in alternative ways to cater for different readers, without having to duplicate content. For example, you can have different pages that organizes the same information alphabetically, chronologically, by difficulty, group information by topic, etc.")])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"optimizing-the-print-view"}},[_c('span',{staticClass:"anchor",attrs:{"id":"optimizing-the-print-view"}}),_v("Optimizing the Print View"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#optimizing-the-print-view","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("To "),_c('span',{staticClass:"keyword"},[_v("hide minimized panels in the "),_c('em',[_v("print view")])]),_v(", add the following code to a CSS file used in your site.")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs css"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("@media")]),_v(" print {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-selector-class"}},[_v(".card-container")]),_v(" > "),_c('span',{pre:true,attrs:{"class":"hljs-selector-class"}},[_v(".morph")]),_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("display")]),_v(": none;\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"hiding-some-info-in-the-generated-content"}},[_c('span',{staticClass:"anchor",attrs:{"id":"hiding-some-info-in-the-generated-content"}}),_v("Hiding some info in the generated content"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#hiding-some-info-in-the-generated-content","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"d-none\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" content to hide ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"...\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("add-class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"d-none\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" content to hide ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("To hide a fragment in one specific page, 'mark' the elements using a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("class")]),_v(":")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"extra\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" content to hide ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs css"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-selector-class"}},[_v(".extra")]),_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("display")]),_v(": none; "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("/* 'block' or 'inline-block' if you want it to show */")]),_v("\n")]),_c('span',[_v("}\n")])])])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"creating-slight-variations-of-content"}},[_c('span',{staticClass:"anchor",attrs:{"id":"creating-slight-variations-of-content"}}),_v("Creating slight variations of content"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#creating-slight-variations-of-content","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("Tags are a good way to create multiple variations of a page within the same source file, such as to filter content for creating multiple different versions of the same page. See "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#tags"}},[_c('em',[_v("User Guide: Tweaking the Page Structure → Tags")])]),_v(" section for more information.")])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-left"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Tweaking the Page Structure")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-right"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/workingWithSites.html"}},[_c('span',[_c('span',[_v("Working with Sites")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} +},function anonymous( +) { +with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 3.1.1")]),_v(" on Sat, 22 Jan 2022, 16:49:34 UTC]")]),_c('br'),_v(" "),_c('small',[_v("This site is powered by "),_c('a',{attrs:{"href":"https://www.netlify.com/"}},[_v("Netlify")]),_v(".")])])])])} +}]; + \ No newline at end of file diff --git a/userGuide/settingSiteProperties.html b/userGuide/settingSiteProperties.html new file mode 100644 index 0000000..57e340c --- /dev/null +++ b/userGuide/settingSiteProperties.html @@ -0,0 +1,32 @@ + + + + + + + + MarkBind - site.json File + + + + + + + + + + + + + + + + +

                Setting Site Properties

                User Guide → Setting Site Properties

                Setting Site Properties

                Setting site-wide properties of a MarkBind site is done by updating the site.json file found and the project root. For example, it can be used to set the deploy destination, themes to apply, plugins to use etc.

                While MarkBind uses site.json as the site config file by default, it is possible to specify a different config file when you build/serve/deploy a MarkBind site. This is particularly useful when you want to deploy slight variants of your site (e.g., one for users, one for developers).

                More info about the site.json file can be found in the panel below.

                Working with Sites

                Using Plugins


                + + + diff --git a/userGuide/settingSiteProperties.page-vue-render.js b/userGuide/settingSiteProperties.page-vue-render.js new file mode 100644 index 0000000..dae52e8 --- /dev/null +++ b/userGuide/settingSiteProperties.page-vue-render.js @@ -0,0 +1,28 @@ + + var pageVueRenderFn = function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',[_c('header',{attrs:{"fixed":""}},[_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/index.html","title":"Home"}},[_c('img',{attrs:{"src":"/images/logo-darkbackground.svg","height":"20"}})])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('form',{staticClass:"navbar-form"},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback,"menu-align-right":""}})],1)])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/index.html"}},[_v("HOME")])]),_v(" "),_c('div',{attrs:{"tags":"environment--ug"}},[_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"sibling-or-child","href":"/userGuide/index.html"}},[_v("USER GUIDE")])])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/showcase.html"}},[_v("SHOWCASE")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/about.html"}},[_v("ABOUT")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_c('span',[_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}})])])])])],1)]),_v(" "),_c('div',{attrs:{"id":"flex-body"}},[_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"site-nav","tag-name":"nav","to":"site-nav"}},[_c('div',{staticClass:"site-nav-top"},[_c('div',{staticClass:"font-weight-bold mb-2",staticStyle:{"font-size":"1.25rem"}},[_v("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tipsAndTricks.html"}},[_v("Tips & Tricks")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/glossary.html"}},[_v("Glossary")])])])])])])],1)],1)]),_v(" "),_c('div',{staticClass:"fixed-header-padding",attrs:{"id":"content-wrapper"}},[_m(0),_v(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_c('box',{attrs:{"type":"tip"}},[_c('p',[_v("While MarkBind uses "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" as the site config file by default, it is possible to specify a different config file when you build/serve/deploy a MarkBind site. This is particularly useful when you want to deploy slight variants of your site (e.g., one for users, one for developers).")])]),_v(" "),_m(4),_v(" "),_c('panel',{attrs:{"type":"seamless","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("References → "),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h1',{attrs:{"id":"site-json-file"}},[_c('span',{staticClass:"anchor",attrs:{"id":"site-json-file"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#site-json-file","onclick":"event.stopPropagation()"}})]),_v(" "),_c('span',{staticClass:"lead"},[_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" file "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("The directory that contains all the project files. It is also the directory in which the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" configuration file is located.")]),_v("root directory")]),_v(" is used to configure various aspects of a MarkBind website.\n")])]),_c('p'),_v(" "),_c('p',[_v("Here is a typical "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" file:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"baseUrl\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/myproduct\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"faviconPath\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"myfavicon.png\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"titlePrefix\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"FooBar Dev Docs\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"style\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"bootstrapTheme\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"bootswatch-cerulean\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"codeTheme\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"light\"")]),_v("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pages\"")]),_v(": [\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"src\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"index.md\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"title\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hello World\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"layout\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"normal\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"searchable\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"externalScripts\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://cdn.plot.ly/plotly-latest.min.js\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"frontmatter\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"header\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"header.md\"")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"glob\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"topics/**/*.md\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"globExclude\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"topics/*/appendix/*.md\"")]),_v("],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"layout\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"subtopic\"")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pagesExclude\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"subsite/**/*.md\"")]),_v("],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"externalScripts\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"deploy\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"message\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Site Update.\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"repo\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/myorg/myrepo.git\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"branch\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"gh-pages\"")]),_v("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"globalOverride\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"footer\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"my-footer.md\"")]),_v("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"ignore\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_site/*\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*.json\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*.md\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*.mbd\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\".git/*\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"plugins\"")]),_v(" : [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"filterTags\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pluginsContext\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"filterTags\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"tags\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tag1\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tag2\"")]),_v("]\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"headingIndexingLevel\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("4")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"intrasiteLinkValidation\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"enabled\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-literal"}},[_v("false")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])]),_c('h4',{attrs:{"id":"baseurl"}},[_c('span',{staticClass:"anchor",attrs:{"id":"baseurl"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#baseurl","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("The base url relative to your domain.")]),_v(" Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"\"")]),_v("(empty).")]),_v(" "),_c('div',[_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("If you are deploying to the site to GitHub pages, the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")]),_v(" setting in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" should be set to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"/\"")]),_v(" for the links in the deployed site to work correctly."),_c('br'),_v(" "),_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" If you are using Github Pages to host your deployed website at repo "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("myorg/myproduct")]),_v(" (i.e., the website is published at "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("https://myorg.github.io/myproduct")]),_v("), then your "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")]),_v(" should be "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"/myproduct\"")]),_v(".")],1)])],1),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Note: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")]),_v(" does not support "),_c('a',{attrs:{"href":"/userGuide/glossary.html#live-preview"}},[_v("live preview")]),_v(" as there is no use case for changing it in during "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind serve")]),_v(".")])]),_v(" "),_c('h4',{attrs:{"id":"faviconpath"}},[_c('span',{staticClass:"anchor",attrs:{"id":"faviconpath"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("faviconPath")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#faviconpath","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("The location of the favicon.")]),_v(" Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("favicon.ico")]),_v(".")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" If the favicon was recently changed, you may need to force-refresh the Browser to see the new image.")])])]),_v(" "),_c('h4',{attrs:{"id":"titleprefix"}},[_c('span',{staticClass:"anchor",attrs:{"id":"titleprefix"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("titlePrefix")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#titleprefix","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("The prefix for all page titles.")]),_v(" The separator "),_c('code',{pre:true},[_v("-")]),_v(" will be inserted by MarkBind.")]),_v(" "),_c('h4',{attrs:{"id":"style"}},[_c('span',{staticClass:"anchor",attrs:{"id":"style"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("style")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#style","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('em',[_v("(Optional)")]),_v(" "),_c('strong',[_v("The styling options to be applied to the site.")]),_v(" This includes:")]),_v(" "),_c('ul',[_c('li',[_c('p',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootstrapTheme")])]),_v(" "),_c('em',[_v("(Optional)")]),_v(" "),_c('strong',[_v("The theme for the generated site.")]),_v(" Uses the default Bootstrap theme if not specified. See "),_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("User Guide: Themes")]),_v(" for more details.")])]),_v(" "),_c('li',[_c('p',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeTheme")])]),_v(" [Optional. Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"dark\"")]),_v("]"),_c('br'),_v("\nThe theme used for fenced code blocks. Accepts either "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"light\"")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"dark\"")]),_v(".")])])]),_v(" "),_c('h4',{attrs:{"id":"pages"}},[_c('span',{staticClass:"anchor",attrs:{"id":"pages"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pages")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#pages","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("An array of pages to be rendered.")])]),_v(" "),_c('ul',[_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src/glob")])]),_v(" "),_c('ul',[_c('li',{staticClass:"my-1"},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" can be used to specify a single file, or an array of files."),_c('br'),_v(" "),_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px"}},[_v("Examples")])]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("docs/index.md")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("[ 'docs/index.md', 'docs/userGuide.md' ]")])],1),_v(" "),_c('li',{staticClass:"my-2"},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("glob")]),_v(" can be used alternatively to define a file pattern in the "),_c('a',{attrs:{"href":"https://en.wikipedia.org/wiki/Glob_(programming)"}},[_c('em',[_v("glob syntax")])]),_v(", or an array of such file patterns."),_c('br'),_v(" "),_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px"}},[_v("Examples")])]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("**/*.md")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("[ '**/*.md', '**/*.mbdf' ]")])],1)])]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("globExclude")])]),_v(": An array of file patterns to be excluded from rendering when using "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("glob")]),_v(", also defined in the glob syntax.")]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("title")])]),_v(": The page "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" for the generated web page. Titles specified here take priority over titles specified in the "),_c('a',{attrs:{"href":"/userGuide/addingPages.html#front-matter"}},[_v("front matter")]),_v(" of individual pages.")]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("layout")])]),_v(": The "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#page-layouts"}},[_v("layout")]),_v(" to be used by the page. Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default")]),_v(".")]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("searchable")])]),_v(": Specifies that the page(s) should be excluded from searching. Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("yes")]),_v(".")]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("externalScripts")])]),_v(": An array of external scripts to be referenced on the page. Scripts referenced will be run before the layout script.")]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("frontMatter")])]),_v(": Specifies properties to add to the front matter of a page or glob of pages. Overrides any existing properties if they have the same name, and overrides any front matter properties specified in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("globalOverride")]),_v(".")])]),_v(" "),_c('span',{attrs:{"id":"page-property-overriding"}},[_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Note: Page properties that are defined in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" for a particular page will override those defined in the front matter of the page.")])])],1),_v(" "),_c('span',{attrs:{"id":"page-glob-overriding"}},[_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Note: If multiple "),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")])]),_v(" (pages) or "),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("glob")])]),_v(" (globs) attributes match a file, MarkBind will merge properties from all entries. If there are conflicting properties, pages are given priority over globs. If there are multiple matching glob entries, the last entry is given priority.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Multiple entries matching "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("index.md")]),_v(":")],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pages\"")]),_v(": [\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"src\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"index.md\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"title\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hello World\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchable\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no\"")]),_v("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"glob\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*.md\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"layout\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"normal\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchable\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"yes\"")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v("}\n")])])]),_c('p',[_v("The following properties will apply to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("index.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"src\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"index.md\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"title\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hello World\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// Inherited from page")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"layout\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"normal\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// Inherited from glob")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchable\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// Page takes priority over glob")]),_v("\n")]),_c('span',[_v("}\n")])])])])])],1),_v(" "),_c('h4',{attrs:{"id":"pagesexclude"}},[_c('span',{staticClass:"anchor",attrs:{"id":"pagesexclude"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pagesExclude")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#pagesexclude","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("An array of file patterns to be excluded from rendering.")]),_v(" The exclusion pattern follows the glob syntax.")]),_v(" "),_c('p',[_v("This property is the global variant to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("globExclude")]),_v(" property and is functionally identical to it. If the two are used at once, the file patterns from both properties will be combined when excluding pages.")]),_v(" "),_c('h4',{attrs:{"id":"externalscripts"}},[_c('span',{staticClass:"anchor",attrs:{"id":"externalscripts"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("externalScripts")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#externalscripts","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("An array of external scripts to be referenced on all pages.")]),_v(" To reference an external script only on specific pages, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("externalScripts")]),_v(" should be specified in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pages")]),_v(" instead. Scripts referenced will be run before the layout script.")]),_v(" "),_c('h4',{attrs:{"id":"globaloverride"}},[_c('span',{staticClass:"anchor",attrs:{"id":"globaloverride"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("globalOverride")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#globaloverride","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Globally overrides properties in the front matter of all pages.")]),_v(" Any property included in the global override will automatically be merged with the front matter of every single page, and override them if the property exists.")]),_v(" "),_c('h4',{attrs:{"id":"ignore"}},[_c('span',{staticClass:"anchor",attrs:{"id":"ignore"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("ignore")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#ignore","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("An array of file patterns to be ignored when copying files to the generated site.")]),_v(" By default, MarkBind will copy all the files as assets of the generated site.")]),_v(" "),_c('p',[_v("The ignore pattern follows the "),_c('a',{attrs:{"href":"https://git-scm.com/docs/gitignore#_pattern_format"}},[_v("glob pattern used in .gitignore")]),_v(". For example, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("*.md")]),_v(" ignores all markdown source files.")]),_v(" "),_c('div',{attrs:{"id":"site-json-deploy"}},[_c('h4',{attrs:{"id":"deploy"}},[_c('span',{staticClass:"anchor",attrs:{"id":"deploy"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("deploy")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#deploy","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("The settings for "),_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("auto-deployment to Github pages")]),_v(".")])]),_v(" "),_c('ul',[_c('li',[_c('p',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("message")])]),_v(" [Optional. Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"Site Update.\"")]),_v("]"),_c('br'),_v("\nThe commit message used for the deployment commit.")])]),_v(" "),_c('li',[_c('p',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("repo")])]),_v(" [Optional. Default: the current working project's repo]"),_c('br'),_v("\nThe repo you want to deploy to."),_c('br'),_v("\nFormat: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"https://github.com/<org|username>/<repo>.git\"")]),_v(" ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"git@github.com:<org|username>/<repo>.git\"")]),_v(" if you use SSH)"),_c('br'),_v(" "),_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"https://github.com/myorg/myrepo.git\"")])],1)]),_v(" "),_c('li',[_c('p',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("branch")])]),_v(" [Optional. Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"gh-pages\"")]),_v("]"),_c('br'),_v("\nThe branch that will be deployed to in the remote repo.")])])])]),_v(" "),_c('h4',{attrs:{"id":"plugins-pluginscontext"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugins-pluginscontext"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("plugins")])]),_v(", "),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pluginsContext")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugins-pluginscontext","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("A list of plugins to load.")]),_v(" Plugins are user-defined extensions that can add custom features to MarkBind. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pluginsContext")]),_v(" contains settings to be applied to the loaded plugins. See "),_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("User Guide: Using Plugins")]),_v(" for more details.")]),_v(" "),_c('p',[_v("The example above uses tags as an example of configuring plugin settings, refer to the "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#filtertags-toggling-alternative-contents-in-a-page"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("filterTags")]),_v(" plugin")]),_v(" for more details.")]),_v(" "),_c('h4',{attrs:{"id":"headingindexinglevel"}},[_c('span',{staticClass:"anchor",attrs:{"id":"headingindexinglevel"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("headingIndexingLevel")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#headingindexinglevel","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("The level of headings to be indexed for searching.")]),_v(" Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("3")]),_v(" "),_c('span',{staticClass:"dimmed"},[_v("i.e., only headings of levels 1,2,3 will be indexed for searching")]),_v(".")]),_v(" "),_c('h4',{attrs:{"id":"enablesearch"}},[_c('span',{staticClass:"anchor",attrs:{"id":"enablesearch"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("enableSearch")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#enablesearch","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Specifies that the website should use MarkBind's search functionality.")]),_v(" Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("true")]),_v(". See "),_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("User Guide: Making the Site Searchable")]),_v(" for more details.")]),_v(" "),_c('h4',{attrs:{"id":"timezone"}},[_c('span',{staticClass:"anchor",attrs:{"id":"timezone"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("timeZone")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#timezone","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Time zone of the "),_c('a',{attrs:{"href":"/userGuide/reusingContents.html#built-in-global-variables"}},[_v("time stamp")]),_v(".")]),_v(" Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"UTC\"")]),_v(".")]),_v(" "),_c('panel',{attrs:{"type":"minimal"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Time Zone Options")])]},proxy:true}])},[_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs js"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Abidjan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Accra\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Algiers\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Bissau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Cairo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Casablanca\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Ceuta\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/El_Aaiun\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Johannesburg\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Juba\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Khartoum\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Lagos\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Maputo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Monrovia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Nairobi\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Ndjamena\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Sao_Tome\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Tripoli\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Tunis\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Windhoek\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Adak\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Anchorage\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Araguaina\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Buenos_Aires\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Catamarca\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Cordoba\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Jujuy\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/La_Rioja\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Mendoza\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Rio_Gallegos\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Salta\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/San_Juan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/San_Luis\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Tucuman\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Ushuaia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Asuncion\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Atikokan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Bahia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Bahia_Banderas\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Barbados\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Belem\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Belize\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Blanc-Sablon\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Boa_Vista\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Bogota\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Boise\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Cambridge_Bay\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Campo_Grande\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Cancun\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Caracas\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Cayenne\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Chicago\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Chihuahua\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Costa_Rica\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Creston\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Cuiaba\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Curacao\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Danmarkshavn\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Dawson\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Dawson_Creek\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Denver\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Detroit\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Edmonton\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Eirunepe\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/El_Salvador\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Fort_Nelson\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Fortaleza\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Glace_Bay\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Godthab\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Goose_Bay\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Grand_Turk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Guatemala\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Guayaquil\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Guyana\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Halifax\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Havana\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Hermosillo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Indianapolis\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Knox\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Marengo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Petersburg\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Tell_City\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Vevay\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Vincennes\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Winamac\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Inuvik\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Iqaluit\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Jamaica\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Juneau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Kentucky/Louisville\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Kentucky/Monticello\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/La_Paz\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Lima\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Los_Angeles\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Maceio\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Managua\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Manaus\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Martinique\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Matamoros\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Mazatlan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Menominee\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Merida\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Metlakatla\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Mexico_City\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Miquelon\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Moncton\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Monterrey\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Montevideo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Nassau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/New_York\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Nipigon\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Nome\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Noronha\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/North_Dakota/Beulah\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/North_Dakota/Center\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/North_Dakota/New_Salem\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Ojinaga\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Panama\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Pangnirtung\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Paramaribo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Phoenix\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Port-au-Prince\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Port_of_Spain\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Porto_Velho\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Puerto_Rico\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Punta_Arenas\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Rainy_River\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Rankin_Inlet\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Recife\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Regina\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Resolute\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Rio_Branco\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Santarem\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Santiago\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Santo_Domingo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Sao_Paulo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Scoresbysund\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Sitka\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/St_Johns\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Swift_Current\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Tegucigalpa\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Thule\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Thunder_Bay\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Tijuana\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Toronto\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Vancouver\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Whitehorse\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Winnipeg\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Yakutat\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Yellowknife\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Casey\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Davis\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/DumontDUrville\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Macquarie\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Mawson\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Palmer\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Rothera\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Syowa\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Troll\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Vostok\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Almaty\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Amman\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Anadyr\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Aqtau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Aqtobe\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Ashgabat\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Atyrau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Baghdad\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Baku\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Bangkok\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Barnaul\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Beirut\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Bishkek\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Brunei\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Chita\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Choibalsan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Colombo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Damascus\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Dhaka\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Dili\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Dubai\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Dushanbe\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Famagusta\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Gaza\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Hebron\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Ho_Chi_Minh\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Hong_Kong\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Hovd\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Irkutsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Jakarta\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Jayapura\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Jerusalem\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Kabul\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Kamchatka\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Karachi\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Kathmandu\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Khandyga\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Kolkata\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Krasnoyarsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Kuala_Lumpur\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Kuching\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Macau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Magadan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Makassar\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Manila\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Nicosia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Novokuznetsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Novosibirsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Omsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Oral\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Pontianak\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Pyongyang\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Qatar\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Qostanay\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Qyzylorda\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Riyadh\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Sakhalin\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Samarkand\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Seoul\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Shanghai\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Singapore\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Srednekolymsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Taipei\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Tashkent\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Tbilisi\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Tehran\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Thimphu\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Tokyo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Tomsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Ulaanbaatar\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Urumqi\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Ust-Nera\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Vladivostok\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Yakutsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Yangon\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Yekaterinburg\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Yerevan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Azores\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Bermuda\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Canary\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Cape_Verde\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Faroe\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Madeira\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Reykjavik\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/South_Georgia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Stanley\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Adelaide\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Brisbane\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Broken_Hill\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Currie\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Darwin\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Eucla\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Hobart\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Lindeman\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Lord_Howe\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Melbourne\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Perth\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Sydney\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Amsterdam\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Andorra\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Astrakhan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Athens\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Belgrade\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Berlin\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Brussels\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Bucharest\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Budapest\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Chisinau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Copenhagen\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Dublin\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Gibraltar\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Helsinki\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Istanbul\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Kaliningrad\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Kiev\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Kirov\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Lisbon\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/London\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Luxembourg\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Madrid\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Malta\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Minsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Monaco\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Moscow\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Oslo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Paris\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Prague\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Riga\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Rome\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Samara\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Saratov\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Simferopol\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Sofia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Stockholm\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Tallinn\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Tirane\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Ulyanovsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Uzhgorod\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Vienna\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Vilnius\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Volgograd\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Warsaw\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Zaporozhye\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Zurich\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Chagos\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Christmas\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Cocos\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Kerguelen\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Mahe\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Maldives\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Mauritius\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Reunion\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Apia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Auckland\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Bougainville\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Chatham\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Chuuk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Easter\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Efate\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Enderbury\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Fakaofo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Fiji\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Funafuti\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Galapagos\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Gambier\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Guadalcanal\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Guam\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Honolulu\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Kiritimati\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Kosrae\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Kwajalein\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Majuro\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Marquesas\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Nauru\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Niue\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Norfolk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Noumea\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Pago_Pago\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Palau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Pitcairn\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Pohnpei\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Port_Moresby\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Rarotonga\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Tahiti\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Tarawa\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Tongatapu\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Wake\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Wallis\"")]),_v("\n")])])]),_c('p',[_c('span',{staticClass:"dimmed"},[_c('sub',[_v("[source: "),_c('a',{attrs:{"href":"https://stackoverflow.com/a/54500197/5885921"}},[_v("https://stackoverflow.com/a/54500197/5885921")]),_v(" ]")])])])])]),_v(" "),_c('br'),_v(" "),_c('h4',{attrs:{"id":"locale"}},[_c('span',{staticClass:"anchor",attrs:{"id":"locale"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("locale")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#locale","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Language by locale used for the "),_c('a',{attrs:{"href":"/userGuide/reusingContents.html#built-in-global-variables"}},[_v("time stamp")]),_v(".")]),_v(" Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"en-GB\"")]),_v(" ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("English (United Kingdom)")]),_v("). "),_c('br'),_v("\nThe date format is thus - "),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<Day>, <Date> <Month> <Year>, <24-hour Time> <Time Zone Code>")]),_v(".")]),_v(" "),_c('panel',{attrs:{"type":"minimal"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Locale Options")])]},proxy:true}])},[_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs js"}},[_c('span',[_v("af_NA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Afrikaans (Namibia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("af_ZA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Afrikaans (South Africa)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("af")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Afrikaans\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ak_GH")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Akan (Ghana)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ak")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Akan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sq_AL")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Albanian (Albania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sq")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Albanian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("am_ET")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Amharic (Ethiopia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("am")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Amharic\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar_DZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Algeria)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar_BH")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Bahrain)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar_EG")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Egypt)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar_IQ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Iraq)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar_JO")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Jordan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar_KW")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Kuwait)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar_LB")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Lebanon)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar_LY")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Libya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar_MA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Morocco)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar_OM")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Oman)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar_QA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Qatar)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar_SA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Saudi Arabia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar_SD")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Sudan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar_SY")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Syria)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar_TN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Tunisia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar_AE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (United Arab Emirates)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar_YE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Yemen)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hy_AM")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Armenian (Armenia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hy")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Armenian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("as_IN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Assamese (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("as")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Assamese\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("asa_TZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asu (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("asa")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asu\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("az_Cyrl")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Azerbaijani (Cyrillic)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("az_Cyrl_AZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Azerbaijani (Cyrillic, Azerbaijan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("az_Latn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Azerbaijani (Latin)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("az_Latn_AZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Azerbaijani (Latin, Azerbaijan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("az")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Azerbaijani\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bm_ML")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bambara (Mali)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bm")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bambara\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("eu_ES")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Basque (Spain)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("eu")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Basque\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("be_BY")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Belarusian (Belarus)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("be")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Belarusian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bem_ZM")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bemba (Zambia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bem")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bemba\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bez_TZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bena (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bez")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bena\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bn_BD")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bengali (Bangladesh)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bn_IN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bengali (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bengali\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bs_BA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bosnian (Bosnia and Herzegovina)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bs")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bosnian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bg_BG")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bulgarian (Bulgaria)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bg")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bulgarian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("my_MM")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Burmese (Myanmar [Burma])\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("my")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Burmese\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("yue_Hant_HK")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Cantonese (Traditional, Hong Kong SAR China)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ca_ES")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Catalan (Spain)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ca")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Catalan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tzm_Latn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Central Morocco Tamazight (Latin)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tzm_Latn_MA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Central Morocco Tamazight (Latin, Morocco)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tzm")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Central Morocco Tamazight\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("chr_US")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Cherokee (United States)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("chr")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Cherokee\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("cgg_UG")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chiga (Uganda)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("cgg")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chiga\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("zh_Hans")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Simplified Han)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("zh_Hans_CN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Simplified Han, China)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("zh_Hans_HK")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Simplified Han, Hong Kong SAR China)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("zh_Hans_MO")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Simplified Han, Macau SAR China)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("zh_Hans_SG")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Simplified Han, Singapore)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("zh_Hant")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Traditional Han)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("zh_Hant_HK")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Traditional Han, Hong Kong SAR China)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("zh_Hant_MO")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Traditional Han, Macau SAR China)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("zh_Hant_TW")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Traditional Han, Taiwan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("zh")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kw_GB")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Cornish (United Kingdom)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kw")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Cornish\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hr_HR")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Croatian (Croatia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hr")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Croatian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("cs_CZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Czech (Czech Republic)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("cs")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Czech\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("da_DK")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Danish (Denmark)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("da")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Danish\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nl_BE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dutch (Belgium)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nl_NL")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dutch (Netherlands)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nl")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dutch\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ebu_KE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Embu (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ebu")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Embu\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_AS")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (American Samoa)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_AU")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Australia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_BE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Belgium)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_BZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Belize)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_BW")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Botswana)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_CA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Canada)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_GU")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Guam)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_HK")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Hong Kong SAR China)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_IN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_IE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Ireland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_IL")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Israel)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_JM")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Jamaica)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_MT")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Malta)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_MH")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Marshall Islands)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_MU")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Mauritius)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_NA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Namibia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_NZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (New Zealand)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_MP")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Northern Mariana Islands)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_PK")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Pakistan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_PH")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Philippines)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_SG")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Singapore)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_ZA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (South Africa)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_TT")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Trinidad and Tobago)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_UM")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (U.S. Minor Outlying Islands)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_VI")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (U.S. Virgin Islands)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_GB")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (United Kingdom)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_US")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (United States)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_ZW")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Zimbabwe)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("eo")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Esperanto\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("et_EE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Estonian (Estonia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("et")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Estonian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ee_GH")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ewe (Ghana)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ee_TG")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ewe (Togo)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ee")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ewe\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fo_FO")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Faroese (Faroe Islands)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fo")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Faroese\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fil_PH")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Filipino (Philippines)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fil")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Filipino\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fi_FI")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Finnish (Finland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fi")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Finnish\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_BE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Belgium)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_BJ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Benin)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_BF")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Burkina Faso)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_BI")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Burundi)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_CM")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Cameroon)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_CA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Canada)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_CF")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Central African Republic)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_TD")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Chad)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_KM")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Comoros)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_CG")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Congo - Brazzaville)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_CD")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Congo - Kinshasa)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_CI")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Côte d’Ivoire)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_DJ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Djibouti)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_GQ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Equatorial Guinea)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_FR")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (France)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_GA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Gabon)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_GP")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Guadeloupe)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_GN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Guinea)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_LU")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Luxembourg)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_MG")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Madagascar)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_ML")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Mali)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_MQ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Martinique)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_MC")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Monaco)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_NE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Niger)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_RW")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Rwanda)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_RE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Réunion)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_BL")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Saint Barthélemy)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_MF")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Saint Martin)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_SN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Senegal)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_CH")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Switzerland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_TG")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Togo)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ff_SN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Fulah (Senegal)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ff")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Fulah\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("gl_ES")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Galician (Spain)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("gl")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Galician\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("lg_UG")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ganda (Uganda)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("lg")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ganda\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ka_GE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Georgian (Georgia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ka")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Georgian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("de_AT")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German (Austria)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("de_BE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German (Belgium)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("de_DE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German (Germany)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("de_LI")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German (Liechtenstein)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("de_LU")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German (Luxembourg)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("de_CH")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German (Switzerland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("de")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("el_CY")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Greek (Cyprus)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("el_GR")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Greek (Greece)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("el")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Greek\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("gu_IN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Gujarati (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("gu")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Gujarati\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("guz_KE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Gusii (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("guz")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Gusii\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ha_Latn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hausa (Latin)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ha_Latn_GH")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hausa (Latin, Ghana)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ha_Latn_NE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hausa (Latin, Niger)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ha_Latn_NG")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hausa (Latin, Nigeria)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ha")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hausa\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("haw_US")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hawaiian (United States)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("haw")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hawaiian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("he_IL")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hebrew (Israel)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("he")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hebrew\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hi_IN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hindi (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hi")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hindi\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hu_HU")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hungarian (Hungary)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hu")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hungarian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("is_IS")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Icelandic (Iceland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("is")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Icelandic\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ig_NG")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Igbo (Nigeria)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ig")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Igbo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id_ID")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indonesian (Indonesia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indonesian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ga_IE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Irish (Ireland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ga")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Irish\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("it_IT")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Italian (Italy)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("it_CH")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Italian (Switzerland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("it")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Italian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ja_JP")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Japanese (Japan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ja")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Japanese\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kea_CV")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kabuverdianu (Cape Verde)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kea")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kabuverdianu\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kab_DZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kabyle (Algeria)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kab")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kabyle\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kl_GL")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kalaallisut (Greenland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kl")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kalaallisut\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kln_KE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kalenjin (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kln")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kalenjin\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kam_KE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kamba (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kam")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kamba\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kn_IN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kannada (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kannada\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kk_Cyrl")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kazakh (Cyrillic)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kk_Cyrl_KZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kazakh (Cyrillic, Kazakhstan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kk")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kazakh\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("km_KH")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Khmer (Cambodia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("km")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Khmer\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ki_KE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kikuyu (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ki")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kikuyu\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rw_RW")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kinyarwanda (Rwanda)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rw")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kinyarwanda\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kok_IN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Konkani (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kok")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Konkani\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ko_KR")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Korean (South Korea)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ko")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Korean\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("khq_ML")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Koyra Chiini (Mali)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("khq")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Koyra Chiini\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ses_ML")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Koyraboro Senni (Mali)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ses")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Koyraboro Senni\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("lag_TZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Langi (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("lag")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Langi\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("lv_LV")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Latvian (Latvia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("lv")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Latvian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("lt_LT")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lithuanian (Lithuania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("lt")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lithuanian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("luo_KE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Luo (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("luo")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Luo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("luy_KE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Luyia (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("luy")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Luyia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mk_MK")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Macedonian (Macedonia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mk")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Macedonian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("jmc_TZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Machame (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("jmc")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Machame\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kde_TZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Makonde (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kde")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Makonde\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mg_MG")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malagasy (Madagascar)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mg")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malagasy\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ms_BN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malay (Brunei)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ms_MY")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malay (Malaysia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ms")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malay\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ml_IN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malayalam (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ml")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malayalam\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mt_MT")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Maltese (Malta)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mt")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Maltese\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("gv_GB")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Manx (United Kingdom)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("gv")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Manx\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mr_IN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Marathi (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mr")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Marathi\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mas_KE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Masai (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mas_TZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Masai (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mas")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Masai\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mer_KE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Meru (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mer")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Meru\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mfe_MU")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Morisyen (Mauritius)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mfe")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Morisyen\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("naq_NA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nama (Namibia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("naq")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nama\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ne_IN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nepali (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ne_NP")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nepali (Nepal)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ne")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nepali\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nd_ZW")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"North Ndebele (Zimbabwe)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nd")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"North Ndebele\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nb_NO")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Norwegian Bokmål (Norway)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nb")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Norwegian Bokmål\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nn_NO")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Norwegian Nynorsk (Norway)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Norwegian Nynorsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nyn_UG")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nyankole (Uganda)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nyn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nyankole\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("or_IN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Oriya (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("or")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Oriya\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("om_ET")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Oromo (Ethiopia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("om_KE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Oromo (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("om")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Oromo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ps_AF")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pashto (Afghanistan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ps")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pashto\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fa_AF")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Persian (Afghanistan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fa_IR")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Persian (Iran)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fa")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Persian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("pl_PL")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Polish (Poland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("pl")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Polish\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("pt_BR")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Portuguese (Brazil)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("pt_GW")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Portuguese (Guinea-Bissau)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("pt_MZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Portuguese (Mozambique)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("pt_PT")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Portuguese (Portugal)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("pt")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Portuguese\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("pa_Arab")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Punjabi (Arabic)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("pa_Arab_PK")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Punjabi (Arabic, Pakistan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("pa_Guru")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Punjabi (Gurmukhi)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("pa_Guru_IN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Punjabi (Gurmukhi, India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("pa")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Punjabi\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ro_MD")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Romanian (Moldova)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ro_RO")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Romanian (Romania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ro")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Romanian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rm_CH")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Romansh (Switzerland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rm")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Romansh\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rof_TZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Rombo (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rof")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Rombo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ru_MD")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Russian (Moldova)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ru_RU")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Russian (Russia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ru_UA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Russian (Ukraine)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ru")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Russian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rwk_TZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Rwa (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rwk")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Rwa\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("saq_KE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Samburu (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("saq")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Samburu\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sg_CF")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sango (Central African Republic)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sg")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sango\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seh_MZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sena (Mozambique)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seh")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sena\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sr_Cyrl")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Cyrillic)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sr_Cyrl_BA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Cyrillic, Bosnia and Herzegovina)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sr_Cyrl_ME")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Cyrillic, Montenegro)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sr_Cyrl_RS")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Cyrillic, Serbia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sr_Latn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Latin)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sr_Latn_BA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Latin, Bosnia and Herzegovina)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sr_Latn_ME")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Latin, Montenegro)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sr_Latn_RS")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Latin, Serbia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sr")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sn_ZW")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Shona (Zimbabwe)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Shona\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ii_CN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sichuan Yi (China)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ii")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sichuan Yi\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("si_LK")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sinhala (Sri Lanka)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("si")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sinhala\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sk_SK")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Slovak (Slovakia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sk")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Slovak\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sl_SI")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Slovenian (Slovenia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sl")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Slovenian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("xog_UG")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Soga (Uganda)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("xog")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Soga\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("so_DJ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Somali (Djibouti)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("so_ET")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Somali (Ethiopia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("so_KE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Somali (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("so_SO")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Somali (Somalia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("so")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Somali\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_AR")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Argentina)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_BO")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Bolivia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_CL")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Chile)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_CO")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Colombia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_CR")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Costa Rica)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_DO")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Dominican Republic)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_EC")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Ecuador)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_SV")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (El Salvador)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_GQ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Equatorial Guinea)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_GT")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Guatemala)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_HN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Honduras)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_419")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Latin America)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_MX")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Mexico)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_NI")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Nicaragua)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_PA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Panama)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_PY")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Paraguay)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_PE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Peru)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_PR")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Puerto Rico)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_ES")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Spain)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_US")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (United States)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_UY")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Uruguay)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_VE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Venezuela)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sw_KE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swahili (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sw_TZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swahili (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sw")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swahili\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sv_FI")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swedish (Finland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sv_SE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swedish (Sweden)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sv")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swedish\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("gsw_CH")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swiss German (Switzerland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("gsw")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swiss German\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("shi_Latn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tachelhit (Latin)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("shi_Latn_MA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tachelhit (Latin, Morocco)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("shi_Tfng")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tachelhit (Tifinagh)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("shi_Tfng_MA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tachelhit (Tifinagh, Morocco)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("shi")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tachelhit\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("dav_KE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Taita (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("dav")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Taita\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ta_IN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tamil (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ta_LK")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tamil (Sri Lanka)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ta")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tamil\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("te_IN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Telugu (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("te")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Telugu\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("teo_KE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Teso (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("teo_UG")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Teso (Uganda)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("teo")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Teso\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("th_TH")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Thai (Thailand)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("th")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Thai\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bo_CN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tibetan (China)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bo_IN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tibetan (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bo")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tibetan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ti_ER")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tigrinya (Eritrea)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ti_ET")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tigrinya (Ethiopia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ti")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tigrinya\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("to_TO")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tonga (Tonga)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("to")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tonga\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tr_TR")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Turkish (Turkey)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tr")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Turkish\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uk_UA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ukrainian (Ukraine)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uk")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ukrainian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ur_IN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Urdu (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ur_PK")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Urdu (Pakistan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ur")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Urdu\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uz_Arab")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek (Arabic)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uz_Arab_AF")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek (Arabic, Afghanistan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uz_Cyrl")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek (Cyrillic)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uz_Cyrl_UZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek (Cyrillic, Uzbekistan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uz_Latn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek (Latin)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uz_Latn_UZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek (Latin, Uzbekistan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uz")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("vi_VN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Vietnamese (Vietnam)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("vi")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Vietnamese\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("vun_TZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Vunjo (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("vun")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Vunjo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("cy_GB")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Welsh (United Kingdom)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("cy")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Welsh\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("yo_NG")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Yoruba (Nigeria)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("yo")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Yoruba\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("zu_ZA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Zulu (South Africa)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("zu")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Zulu\"")]),_v("\n")])])]),_c('p',[_c('span',{staticClass:"dimmed"},[_c('sub',[_v("[source: "),_c('a',{attrs:{"href":"https://stackoverflow.com/a/28357857/5885921"}},[_v("https://stackoverflow.com/a/28357857/5885921")]),_v(" ]")])])])])]),_v(" "),_c('br'),_v(" "),_c('h4',{attrs:{"id":"intrasitelinkvalidation"}},[_c('span',{staticClass:"anchor",attrs:{"id":"intrasitelinkvalidation"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("intrasiteLinkValidation")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#intrasitelinkvalidation","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Toggle whether to validate intra-site links.")]),_v(" By default, MarkBind will validate all intra-site links and alert you of any potentially invalid ones.\nTo disable this validation "),_c('strong',[_v("entirely")]),_v(", you may add the following to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(":")]),_v(" "),_c('div',{attrs:{"id":"disable-global-intrasite-link-validation"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs js"}},[_c('span',[_v("...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"intrasiteLinkValidation\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"enabled\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-literal"}},[_v("false")]),_v("\n")]),_c('span',[_v("},\n")]),_c('span',[_v("...\n")])])])])],1)]),_v(" "),_m(5),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})],1),_v(" "),_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"})])],1),_v(" "),_m(6)])} +}; + var pageVueStaticRenderFns = [function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}},[_v("Setting Site Properties")])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_c('em',[_v("User Guide → Setting Site Properties")])])])])} +},function anonymous( +) { +with(this){return _c('h1',{attrs:{"id":"setting-site-properties"}},[_c('span',{staticClass:"anchor",attrs:{"id":"setting-site-properties"}}),_v("Setting Site Properties"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#setting-site-properties","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p',[_v("Setting site-wide properties of a MarkBind site is done by updating the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" file found and the project root. For example, it can be used to set the deploy destination, themes to apply, plugins to use etc.")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("More info about the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" file can be found in the panel below.")])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-left"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/workingWithSites.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Working with Sites")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-right"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/usingPlugins.html"}},[_c('span',[_c('span',[_v("Using Plugins")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} +},function anonymous( +) { +with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 3.1.1")]),_v(" on Sat, 22 Jan 2022, 16:49:34 UTC]")]),_c('br'),_v(" "),_c('small',[_v("This site is powered by "),_c('a',{attrs:{"href":"https://www.netlify.com/"}},[_v("Netlify")]),_v(".")])])])])} +}]; + \ No newline at end of file diff --git a/userGuide/siteJsonFile.html b/userGuide/siteJsonFile.html new file mode 100644 index 0000000..a34561a --- /dev/null +++ b/userGuide/siteJsonFile.html @@ -0,0 +1,124 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="generator" content="MarkBind 3.1.1"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>MarkBind - site.json File + + + + + + + + + + + + + + + + +

                site.json File

                The site.json file The directory that contains all the project files. It is also the directory in which the site.json configuration file is located.root directory is used to configure various aspects of a MarkBind website. +

                Here is a typical site.json file:

                {
+  "baseUrl": "/myproduct",
+  "faviconPath": "myfavicon.png",
+  "titlePrefix": "FooBar Dev Docs",
+  "style": {
+    "bootstrapTheme": "bootswatch-cerulean",
+    "codeTheme": "light"
+  },
+  "pages": [
+    {
+      "src": "index.md",
+      "title": "Hello World",
+      "layout": "normal",
+      "searchable": "no",
+      "externalScripts": [
+        "https://cdn.plot.ly/plotly-latest.min.js"
+      ],
+      "frontmatter": {
+        "header": "header.md"
+      }
+    },
+    {
+      "glob": "topics/**/*.md",
+      "globExclude": ["topics/*/appendix/*.md"],
+      "layout": "subtopic"
+    }
+  ],
+  "pagesExclude": ["subsite/**/*.md"],
+  "externalScripts": [
+    "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"
+  ],
+  "deploy": {
+    "message": "Site Update.",
+    "repo": "https://github.com/myorg/myrepo.git",
+    "branch": "gh-pages"
+  },
+  "globalOverride": {
+    "footer": "my-footer.md"
+  },
+  "ignore": [
+    "_site/*",
+    "*.json",
+    "*.md",
+    "*.mbd",
+    ".git/*"
+  ],
+  "plugins" : [
+    "filterTags"
+  ],
+  "pluginsContext" : {
+    "filterTags" : {
+      "tags": ["tag1", "tag2"]
+    }
+  },
+  "headingIndexingLevel": 4,
+  "intrasiteLinkValidation": {
+    "enabled": false
+  }
+}
+

                baseUrl

                The base url relative to your domain. Default: ""(empty).

                If you are deploying to the site to GitHub pages, the baseUrl setting in the site.json should be set to the "/<repositoryName>" for the links in the deployed site to work correctly.
                Example If you are using Github Pages to host your deployed website at repo myorg/myproduct (i.e., the website is published at https://myorg.github.io/myproduct), then your baseUrl should be "/myproduct".

                Note: baseUrl does not support live preview as there is no use case for changing it in during markbind serve.

                faviconPath

                The location of the favicon. Default: favicon.ico.

                If the favicon was recently changed, you may need to force-refresh the Browser to see the new image.

                titlePrefix

                The prefix for all page titles. The separator - will be inserted by MarkBind.

                style

                (Optional) The styling options to be applied to the site. This includes:

                • bootstrapTheme (Optional) The theme for the generated site. Uses the default Bootstrap theme if not specified. See User Guide: Themes for more details.

                • codeTheme [Optional. Default: "dark"]
                  +The theme used for fenced code blocks. Accepts either "light" or "dark".

                pages

                An array of pages to be rendered.

                • src/glob
                  • src can be used to specify a single file, or an array of files.
                    Examples docs/index.md or [ 'docs/index.md', 'docs/userGuide.md' ]
                  • glob can be used alternatively to define a file pattern in the glob syntax, or an array of such file patterns.
                    Examples **/*.md or [ '**/*.md', '**/*.mbdf' ]
                • globExclude: An array of file patterns to be excluded from rendering when using glob, also defined in the glob syntax.
                • title: The page <title> for the generated web page. Titles specified here take priority over titles specified in the front matter of individual pages.
                • layout: The layout to be used by the page. Default: default.
                • searchable: Specifies that the page(s) should be excluded from searching. Default: yes.
                • externalScripts: An array of external scripts to be referenced on the page. Scripts referenced will be run before the layout script.
                • frontMatter: Specifies properties to add to the front matter of a page or glob of pages. Overrides any existing properties if they have the same name, and overrides any front matter properties specified in globalOverride.

                Note: Page properties that are defined in site.json for a particular page will override those defined in the front matter of the page.

                Note: If multiple src (pages) or glob (globs) attributes match a file, MarkBind will merge properties from all entries. If there are conflicting properties, pages are given priority over globs. If there are multiple matching glob entries, the last entry is given priority.

                Example Multiple entries matching index.md:

                {
+  "pages": [
+    {
+      "src": "index.md",
+      "title": "Hello World",
+      "searchable": "no"
+    },
+    {
+      "glob": "*.md",
+      "layout": "normal",
+      "searchable": "yes"
+    }
+  ],
+}
+

                The following properties will apply to index.md:

                {
+  "src": "index.md",
+  "title": "Hello World",  // Inherited from page
+  "layout": "normal",      // Inherited from glob
+  "searchable": "no",      // Page takes priority over glob
+}
+

                pagesExclude

                An array of file patterns to be excluded from rendering. The exclusion pattern follows the glob syntax.

                This property is the global variant to the globExclude property and is functionally identical to it. If the two are used at once, the file patterns from both properties will be combined when excluding pages.

                externalScripts

                An array of external scripts to be referenced on all pages. To reference an external script only on specific pages, externalScripts should be specified in pages instead. Scripts referenced will be run before the layout script.

                globalOverride

                Globally overrides properties in the front matter of all pages. Any property included in the global override will automatically be merged with the front matter of every single page, and override them if the property exists.

                ignore

                An array of file patterns to be ignored when copying files to the generated site. By default, MarkBind will copy all the files as assets of the generated site.

                The ignore pattern follows the glob pattern used in .gitignore. For example, *.md ignores all markdown source files.

                deploy

                The settings for auto-deployment to Github pages.

                • message [Optional. Default: "Site Update."]
                  +The commit message used for the deployment commit.

                • repo [Optional. Default: the current working project's repo]
                  +The repo you want to deploy to.
                  +Format: "https://github.com/<org|username>/<repo>.git" ("git@github.com:<org|username>/<repo>.git" if you use SSH)
                  Example "https://github.com/myorg/myrepo.git"

                • branch [Optional. Default: "gh-pages"]
                  +The branch that will be deployed to in the remote repo.

                plugins, pluginsContext

                A list of plugins to load. Plugins are user-defined extensions that can add custom features to MarkBind. pluginsContext contains settings to be applied to the loaded plugins. See User Guide: Using Plugins for more details.

                The example above uses tags as an example of configuring plugin settings, refer to the filterTags plugin for more details.

                headingIndexingLevel

                The level of headings to be indexed for searching. Default: 3 i.e., only headings of levels 1,2,3 will be indexed for searching.

                enableSearch

                Specifies that the website should use MarkBind's search functionality. Default: true. See User Guide: Making the Site Searchable for more details.

                timeZone

                Time zone of the time stamp. Default: "UTC".

                Time Zone Options

                locale

                Language by locale used for the time stamp. Default: "en-GB" (English (United Kingdom)).
                +The date format is thus -
                <Day>, <Date> <Month> <Year>, <24-hour Time> <Time Zone Code>.

                Locale Options

                intrasiteLinkValidation

                Toggle whether to validate intra-site links. By default, MarkBind will validate all intra-site links and alert you of any potentially invalid ones. +To disable this validation entirely, you may add the following to site.json:

                + + + diff --git a/userGuide/siteJsonFile.page-vue-render.js b/userGuide/siteJsonFile.page-vue-render.js new file mode 100644 index 0000000..528b68d --- /dev/null +++ b/userGuide/siteJsonFile.page-vue-render.js @@ -0,0 +1,169 @@ + + var pageVueRenderFn = function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',[_c('header',{attrs:{"fixed":""}},[_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/index.html","title":"Home"}},[_c('img',{attrs:{"src":"/images/logo-darkbackground.svg","height":"20"}})])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('form',{staticClass:"navbar-form"},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback,"menu-align-right":""}})],1)])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/index.html"}},[_v("HOME")])]),_v(" "),_c('div',{attrs:{"tags":"environment--ug"}},[_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"sibling-or-child","href":"/userGuide/index.html"}},[_v("USER GUIDE")])])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/showcase.html"}},[_v("SHOWCASE")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/about.html"}},[_v("ABOUT")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_c('span',[_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}})])])])])],1)]),_v(" "),_c('div',{attrs:{"id":"flex-body"}},[_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"site-nav","tag-name":"nav","to":"site-nav"}},[_c('div',{staticClass:"site-nav-top"},[_c('div',{staticClass:"font-weight-bold mb-2",staticStyle:{"font-size":"1.25rem"}},[_v("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tipsAndTricks.html"}},[_v("Tips & Tricks")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/glossary.html"}},[_v("Glossary")])])])])])])],1)],1)]),_v(" "),_c('div',{staticClass:"fixed-header-padding",attrs:{"id":"content-wrapper"}},[_m(0),_v(" "),_c('span',{staticClass:"lead"},[_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" file "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_m(1),_v("root directory")]),_v(" is used to configure various aspects of a MarkBind website.\n")])]),_c('p'),_v(" "),_m(2),_v(" "),_m(3),_m(4),_v(" "),_m(5),_v(" "),_c('div',[_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("If you are deploying to the site to GitHub pages, the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")]),_v(" setting in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" should be set to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"/\"")]),_v(" for the links in the deployed site to work correctly."),_c('br'),_v(" "),_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" If you are using Github Pages to host your deployed website at repo "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("myorg/myproduct")]),_v(" (i.e., the website is published at "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("https://myorg.github.io/myproduct")]),_v("), then your "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")]),_v(" should be "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"/myproduct\"")]),_v(".")],1)])],1),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Note: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")]),_v(" does not support "),_c('a',{attrs:{"href":"/userGuide/glossary.html#live-preview"}},[_v("live preview")]),_v(" as there is no use case for changing it in during "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind serve")]),_v(".")])]),_v(" "),_m(6),_v(" "),_m(7),_v(" "),_m(8),_v(" "),_m(9),_v(" "),_m(10),_v(" "),_m(11),_v(" "),_m(12),_v(" "),_m(13),_v(" "),_m(14),_v(" "),_m(15),_v(" "),_c('ul',[_c('li',[_m(16),_v(" "),_c('ul',[_c('li',{staticClass:"my-1"},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" can be used to specify a single file, or an array of files."),_c('br'),_v(" "),_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px"}},[_v("Examples")])]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("docs/index.md")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("[ 'docs/index.md', 'docs/userGuide.md' ]")])],1),_v(" "),_c('li',{staticClass:"my-2"},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("glob")]),_v(" can be used alternatively to define a file pattern in the "),_m(17),_v(", or an array of such file patterns."),_c('br'),_v(" "),_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px"}},[_v("Examples")])]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("**/*.md")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("[ '**/*.md', '**/*.mbdf' ]")])],1)])]),_v(" "),_m(18),_v(" "),_m(19),_v(" "),_m(20),_v(" "),_m(21),_v(" "),_m(22),_v(" "),_m(23)]),_v(" "),_c('span',{attrs:{"id":"page-property-overriding"}},[_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Note: Page properties that are defined in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" for a particular page will override those defined in the front matter of the page.")])])],1),_v(" "),_c('span',{attrs:{"id":"page-glob-overriding"}},[_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Note: If multiple "),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")])]),_v(" (pages) or "),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("glob")])]),_v(" (globs) attributes match a file, MarkBind will merge properties from all entries. If there are conflicting properties, pages are given priority over globs. If there are multiple matching glob entries, the last entry is given priority.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Multiple entries matching "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("index.md")]),_v(":")],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pages\"")]),_v(": [\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"src\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"index.md\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"title\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hello World\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchable\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no\"")]),_v("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"glob\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*.md\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"layout\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"normal\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchable\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"yes\"")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v("}\n")])])]),_c('p',[_v("The following properties will apply to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("index.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"src\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"index.md\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"title\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hello World\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// Inherited from page")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"layout\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"normal\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// Inherited from glob")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchable\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// Page takes priority over glob")]),_v("\n")]),_c('span',[_v("}\n")])])])])])],1),_v(" "),_m(24),_v(" "),_m(25),_v(" "),_m(26),_v(" "),_m(27),_v(" "),_m(28),_v(" "),_m(29),_v(" "),_m(30),_v(" "),_m(31),_v(" "),_m(32),_v(" "),_m(33),_v(" "),_c('div',{attrs:{"id":"site-json-deploy"}},[_m(34),_v(" "),_m(35),_v(" "),_c('ul',[_m(36),_v(" "),_c('li',[_c('p',[_m(37),_v(" [Optional. Default: the current working project's repo]"),_c('br'),_v("\nThe repo you want to deploy to."),_c('br'),_v("\nFormat: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"https://github.com//.git\"")]),_v(" ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"git@github.com:/.git\"")]),_v(" if you use SSH)"),_c('br'),_v(" "),_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"https://github.com/myorg/myrepo.git\"")])],1)]),_v(" "),_m(38)])]),_v(" "),_m(39),_v(" "),_m(40),_v(" "),_m(41),_v(" "),_m(42),_v(" "),_m(43),_v(" "),_m(44),_v(" "),_m(45),_v(" "),_m(46),_v(" "),_m(47),_v(" "),_c('panel',{attrs:{"type":"minimal"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Time Zone Options")])]},proxy:true}])},[_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs js"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Abidjan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Accra\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Algiers\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Bissau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Cairo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Casablanca\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Ceuta\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/El_Aaiun\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Johannesburg\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Juba\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Khartoum\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Lagos\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Maputo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Monrovia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Nairobi\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Ndjamena\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Sao_Tome\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Tripoli\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Tunis\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Windhoek\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Adak\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Anchorage\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Araguaina\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Buenos_Aires\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Catamarca\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Cordoba\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Jujuy\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/La_Rioja\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Mendoza\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Rio_Gallegos\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Salta\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/San_Juan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/San_Luis\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Tucuman\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Ushuaia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Asuncion\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Atikokan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Bahia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Bahia_Banderas\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Barbados\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Belem\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Belize\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Blanc-Sablon\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Boa_Vista\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Bogota\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Boise\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Cambridge_Bay\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Campo_Grande\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Cancun\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Caracas\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Cayenne\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Chicago\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Chihuahua\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Costa_Rica\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Creston\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Cuiaba\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Curacao\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Danmarkshavn\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Dawson\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Dawson_Creek\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Denver\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Detroit\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Edmonton\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Eirunepe\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/El_Salvador\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Fort_Nelson\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Fortaleza\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Glace_Bay\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Godthab\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Goose_Bay\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Grand_Turk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Guatemala\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Guayaquil\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Guyana\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Halifax\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Havana\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Hermosillo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Indianapolis\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Knox\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Marengo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Petersburg\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Tell_City\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Vevay\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Vincennes\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Winamac\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Inuvik\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Iqaluit\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Jamaica\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Juneau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Kentucky/Louisville\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Kentucky/Monticello\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/La_Paz\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Lima\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Los_Angeles\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Maceio\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Managua\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Manaus\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Martinique\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Matamoros\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Mazatlan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Menominee\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Merida\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Metlakatla\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Mexico_City\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Miquelon\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Moncton\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Monterrey\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Montevideo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Nassau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/New_York\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Nipigon\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Nome\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Noronha\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/North_Dakota/Beulah\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/North_Dakota/Center\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/North_Dakota/New_Salem\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Ojinaga\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Panama\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Pangnirtung\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Paramaribo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Phoenix\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Port-au-Prince\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Port_of_Spain\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Porto_Velho\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Puerto_Rico\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Punta_Arenas\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Rainy_River\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Rankin_Inlet\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Recife\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Regina\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Resolute\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Rio_Branco\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Santarem\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Santiago\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Santo_Domingo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Sao_Paulo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Scoresbysund\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Sitka\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/St_Johns\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Swift_Current\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Tegucigalpa\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Thule\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Thunder_Bay\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Tijuana\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Toronto\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Vancouver\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Whitehorse\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Winnipeg\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Yakutat\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Yellowknife\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Casey\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Davis\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/DumontDUrville\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Macquarie\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Mawson\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Palmer\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Rothera\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Syowa\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Troll\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Vostok\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Almaty\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Amman\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Anadyr\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Aqtau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Aqtobe\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Ashgabat\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Atyrau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Baghdad\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Baku\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Bangkok\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Barnaul\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Beirut\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Bishkek\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Brunei\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Chita\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Choibalsan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Colombo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Damascus\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Dhaka\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Dili\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Dubai\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Dushanbe\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Famagusta\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Gaza\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Hebron\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Ho_Chi_Minh\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Hong_Kong\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Hovd\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Irkutsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Jakarta\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Jayapura\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Jerusalem\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Kabul\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Kamchatka\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Karachi\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Kathmandu\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Khandyga\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Kolkata\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Krasnoyarsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Kuala_Lumpur\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Kuching\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Macau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Magadan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Makassar\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Manila\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Nicosia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Novokuznetsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Novosibirsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Omsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Oral\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Pontianak\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Pyongyang\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Qatar\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Qostanay\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Qyzylorda\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Riyadh\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Sakhalin\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Samarkand\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Seoul\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Shanghai\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Singapore\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Srednekolymsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Taipei\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Tashkent\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Tbilisi\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Tehran\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Thimphu\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Tokyo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Tomsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Ulaanbaatar\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Urumqi\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Ust-Nera\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Vladivostok\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Yakutsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Yangon\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Yekaterinburg\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Yerevan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Azores\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Bermuda\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Canary\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Cape_Verde\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Faroe\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Madeira\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Reykjavik\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/South_Georgia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Stanley\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Adelaide\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Brisbane\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Broken_Hill\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Currie\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Darwin\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Eucla\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Hobart\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Lindeman\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Lord_Howe\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Melbourne\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Perth\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Sydney\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Amsterdam\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Andorra\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Astrakhan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Athens\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Belgrade\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Berlin\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Brussels\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Bucharest\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Budapest\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Chisinau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Copenhagen\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Dublin\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Gibraltar\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Helsinki\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Istanbul\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Kaliningrad\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Kiev\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Kirov\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Lisbon\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/London\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Luxembourg\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Madrid\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Malta\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Minsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Monaco\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Moscow\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Oslo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Paris\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Prague\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Riga\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Rome\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Samara\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Saratov\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Simferopol\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Sofia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Stockholm\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Tallinn\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Tirane\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Ulyanovsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Uzhgorod\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Vienna\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Vilnius\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Volgograd\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Warsaw\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Zaporozhye\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Zurich\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Chagos\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Christmas\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Cocos\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Kerguelen\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Mahe\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Maldives\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Mauritius\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Reunion\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Apia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Auckland\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Bougainville\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Chatham\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Chuuk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Easter\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Efate\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Enderbury\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Fakaofo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Fiji\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Funafuti\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Galapagos\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Gambier\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Guadalcanal\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Guam\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Honolulu\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Kiritimati\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Kosrae\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Kwajalein\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Majuro\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Marquesas\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Nauru\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Niue\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Norfolk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Noumea\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Pago_Pago\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Palau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Pitcairn\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Pohnpei\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Port_Moresby\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Rarotonga\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Tahiti\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Tarawa\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Tongatapu\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Wake\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Wallis\"")]),_v("\n")])])]),_c('p',[_c('span',{staticClass:"dimmed"},[_c('sub',[_v("[source: "),_c('a',{attrs:{"href":"https://stackoverflow.com/a/54500197/5885921"}},[_v("https://stackoverflow.com/a/54500197/5885921")]),_v(" ]")])])])])]),_v(" "),_c('br'),_v(" "),_m(48),_v(" "),_m(49),_v(" "),_c('panel',{attrs:{"type":"minimal"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Locale Options")])]},proxy:true}])},[_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs js"}},[_c('span',[_v("af_NA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Afrikaans (Namibia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("af_ZA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Afrikaans (South Africa)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("af")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Afrikaans\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ak_GH")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Akan (Ghana)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ak")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Akan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sq_AL")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Albanian (Albania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sq")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Albanian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("am_ET")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Amharic (Ethiopia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("am")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Amharic\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar_DZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Algeria)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar_BH")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Bahrain)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar_EG")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Egypt)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar_IQ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Iraq)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar_JO")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Jordan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar_KW")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Kuwait)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar_LB")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Lebanon)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar_LY")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Libya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar_MA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Morocco)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar_OM")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Oman)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar_QA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Qatar)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar_SA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Saudi Arabia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar_SD")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Sudan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar_SY")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Syria)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar_TN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Tunisia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar_AE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (United Arab Emirates)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar_YE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Yemen)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hy_AM")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Armenian (Armenia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hy")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Armenian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("as_IN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Assamese (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("as")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Assamese\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("asa_TZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asu (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("asa")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asu\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("az_Cyrl")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Azerbaijani (Cyrillic)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("az_Cyrl_AZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Azerbaijani (Cyrillic, Azerbaijan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("az_Latn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Azerbaijani (Latin)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("az_Latn_AZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Azerbaijani (Latin, Azerbaijan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("az")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Azerbaijani\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bm_ML")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bambara (Mali)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bm")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bambara\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("eu_ES")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Basque (Spain)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("eu")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Basque\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("be_BY")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Belarusian (Belarus)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("be")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Belarusian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bem_ZM")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bemba (Zambia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bem")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bemba\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bez_TZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bena (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bez")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bena\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bn_BD")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bengali (Bangladesh)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bn_IN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bengali (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bengali\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bs_BA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bosnian (Bosnia and Herzegovina)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bs")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bosnian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bg_BG")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bulgarian (Bulgaria)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bg")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bulgarian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("my_MM")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Burmese (Myanmar [Burma])\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("my")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Burmese\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("yue_Hant_HK")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Cantonese (Traditional, Hong Kong SAR China)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ca_ES")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Catalan (Spain)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ca")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Catalan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tzm_Latn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Central Morocco Tamazight (Latin)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tzm_Latn_MA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Central Morocco Tamazight (Latin, Morocco)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tzm")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Central Morocco Tamazight\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("chr_US")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Cherokee (United States)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("chr")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Cherokee\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("cgg_UG")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chiga (Uganda)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("cgg")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chiga\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("zh_Hans")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Simplified Han)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("zh_Hans_CN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Simplified Han, China)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("zh_Hans_HK")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Simplified Han, Hong Kong SAR China)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("zh_Hans_MO")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Simplified Han, Macau SAR China)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("zh_Hans_SG")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Simplified Han, Singapore)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("zh_Hant")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Traditional Han)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("zh_Hant_HK")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Traditional Han, Hong Kong SAR China)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("zh_Hant_MO")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Traditional Han, Macau SAR China)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("zh_Hant_TW")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Traditional Han, Taiwan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("zh")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kw_GB")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Cornish (United Kingdom)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kw")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Cornish\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hr_HR")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Croatian (Croatia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hr")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Croatian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("cs_CZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Czech (Czech Republic)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("cs")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Czech\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("da_DK")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Danish (Denmark)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("da")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Danish\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nl_BE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dutch (Belgium)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nl_NL")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dutch (Netherlands)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nl")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dutch\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ebu_KE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Embu (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ebu")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Embu\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_AS")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (American Samoa)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_AU")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Australia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_BE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Belgium)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_BZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Belize)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_BW")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Botswana)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_CA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Canada)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_GU")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Guam)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_HK")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Hong Kong SAR China)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_IN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_IE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Ireland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_IL")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Israel)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_JM")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Jamaica)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_MT")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Malta)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_MH")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Marshall Islands)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_MU")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Mauritius)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_NA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Namibia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_NZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (New Zealand)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_MP")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Northern Mariana Islands)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_PK")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Pakistan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_PH")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Philippines)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_SG")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Singapore)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_ZA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (South Africa)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_TT")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Trinidad and Tobago)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_UM")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (U.S. Minor Outlying Islands)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_VI")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (U.S. Virgin Islands)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_GB")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (United Kingdom)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_US")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (United States)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en_ZW")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Zimbabwe)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("eo")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Esperanto\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("et_EE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Estonian (Estonia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("et")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Estonian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ee_GH")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ewe (Ghana)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ee_TG")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ewe (Togo)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ee")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ewe\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fo_FO")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Faroese (Faroe Islands)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fo")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Faroese\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fil_PH")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Filipino (Philippines)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fil")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Filipino\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fi_FI")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Finnish (Finland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fi")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Finnish\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_BE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Belgium)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_BJ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Benin)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_BF")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Burkina Faso)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_BI")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Burundi)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_CM")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Cameroon)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_CA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Canada)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_CF")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Central African Republic)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_TD")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Chad)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_KM")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Comoros)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_CG")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Congo - Brazzaville)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_CD")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Congo - Kinshasa)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_CI")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Côte d’Ivoire)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_DJ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Djibouti)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_GQ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Equatorial Guinea)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_FR")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (France)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_GA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Gabon)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_GP")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Guadeloupe)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_GN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Guinea)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_LU")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Luxembourg)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_MG")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Madagascar)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_ML")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Mali)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_MQ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Martinique)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_MC")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Monaco)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_NE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Niger)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_RW")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Rwanda)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_RE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Réunion)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_BL")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Saint Barthélemy)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_MF")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Saint Martin)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_SN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Senegal)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_CH")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Switzerland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr_TG")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Togo)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ff_SN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Fulah (Senegal)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ff")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Fulah\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("gl_ES")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Galician (Spain)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("gl")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Galician\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("lg_UG")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ganda (Uganda)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("lg")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ganda\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ka_GE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Georgian (Georgia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ka")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Georgian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("de_AT")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German (Austria)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("de_BE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German (Belgium)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("de_DE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German (Germany)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("de_LI")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German (Liechtenstein)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("de_LU")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German (Luxembourg)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("de_CH")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German (Switzerland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("de")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("el_CY")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Greek (Cyprus)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("el_GR")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Greek (Greece)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("el")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Greek\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("gu_IN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Gujarati (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("gu")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Gujarati\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("guz_KE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Gusii (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("guz")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Gusii\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ha_Latn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hausa (Latin)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ha_Latn_GH")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hausa (Latin, Ghana)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ha_Latn_NE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hausa (Latin, Niger)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ha_Latn_NG")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hausa (Latin, Nigeria)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ha")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hausa\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("haw_US")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hawaiian (United States)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("haw")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hawaiian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("he_IL")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hebrew (Israel)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("he")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hebrew\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hi_IN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hindi (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hi")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hindi\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hu_HU")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hungarian (Hungary)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hu")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hungarian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("is_IS")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Icelandic (Iceland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("is")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Icelandic\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ig_NG")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Igbo (Nigeria)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ig")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Igbo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id_ID")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indonesian (Indonesia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indonesian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ga_IE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Irish (Ireland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ga")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Irish\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("it_IT")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Italian (Italy)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("it_CH")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Italian (Switzerland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("it")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Italian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ja_JP")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Japanese (Japan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ja")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Japanese\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kea_CV")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kabuverdianu (Cape Verde)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kea")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kabuverdianu\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kab_DZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kabyle (Algeria)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kab")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kabyle\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kl_GL")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kalaallisut (Greenland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kl")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kalaallisut\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kln_KE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kalenjin (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kln")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kalenjin\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kam_KE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kamba (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kam")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kamba\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kn_IN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kannada (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kannada\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kk_Cyrl")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kazakh (Cyrillic)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kk_Cyrl_KZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kazakh (Cyrillic, Kazakhstan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kk")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kazakh\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("km_KH")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Khmer (Cambodia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("km")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Khmer\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ki_KE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kikuyu (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ki")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kikuyu\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rw_RW")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kinyarwanda (Rwanda)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rw")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kinyarwanda\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kok_IN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Konkani (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kok")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Konkani\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ko_KR")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Korean (South Korea)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ko")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Korean\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("khq_ML")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Koyra Chiini (Mali)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("khq")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Koyra Chiini\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ses_ML")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Koyraboro Senni (Mali)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ses")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Koyraboro Senni\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("lag_TZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Langi (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("lag")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Langi\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("lv_LV")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Latvian (Latvia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("lv")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Latvian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("lt_LT")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lithuanian (Lithuania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("lt")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lithuanian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("luo_KE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Luo (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("luo")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Luo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("luy_KE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Luyia (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("luy")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Luyia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mk_MK")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Macedonian (Macedonia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mk")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Macedonian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("jmc_TZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Machame (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("jmc")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Machame\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kde_TZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Makonde (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kde")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Makonde\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mg_MG")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malagasy (Madagascar)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mg")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malagasy\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ms_BN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malay (Brunei)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ms_MY")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malay (Malaysia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ms")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malay\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ml_IN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malayalam (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ml")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malayalam\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mt_MT")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Maltese (Malta)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mt")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Maltese\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("gv_GB")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Manx (United Kingdom)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("gv")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Manx\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mr_IN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Marathi (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mr")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Marathi\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mas_KE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Masai (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mas_TZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Masai (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mas")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Masai\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mer_KE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Meru (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mer")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Meru\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mfe_MU")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Morisyen (Mauritius)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mfe")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Morisyen\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("naq_NA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nama (Namibia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("naq")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nama\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ne_IN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nepali (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ne_NP")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nepali (Nepal)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ne")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nepali\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nd_ZW")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"North Ndebele (Zimbabwe)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nd")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"North Ndebele\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nb_NO")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Norwegian Bokmål (Norway)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nb")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Norwegian Bokmål\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nn_NO")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Norwegian Nynorsk (Norway)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Norwegian Nynorsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nyn_UG")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nyankole (Uganda)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nyn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nyankole\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("or_IN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Oriya (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("or")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Oriya\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("om_ET")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Oromo (Ethiopia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("om_KE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Oromo (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("om")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Oromo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ps_AF")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pashto (Afghanistan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ps")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pashto\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fa_AF")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Persian (Afghanistan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fa_IR")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Persian (Iran)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fa")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Persian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("pl_PL")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Polish (Poland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("pl")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Polish\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("pt_BR")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Portuguese (Brazil)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("pt_GW")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Portuguese (Guinea-Bissau)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("pt_MZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Portuguese (Mozambique)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("pt_PT")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Portuguese (Portugal)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("pt")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Portuguese\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("pa_Arab")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Punjabi (Arabic)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("pa_Arab_PK")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Punjabi (Arabic, Pakistan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("pa_Guru")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Punjabi (Gurmukhi)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("pa_Guru_IN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Punjabi (Gurmukhi, India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("pa")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Punjabi\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ro_MD")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Romanian (Moldova)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ro_RO")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Romanian (Romania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ro")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Romanian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rm_CH")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Romansh (Switzerland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rm")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Romansh\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rof_TZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Rombo (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rof")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Rombo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ru_MD")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Russian (Moldova)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ru_RU")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Russian (Russia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ru_UA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Russian (Ukraine)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ru")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Russian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rwk_TZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Rwa (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rwk")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Rwa\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("saq_KE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Samburu (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("saq")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Samburu\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sg_CF")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sango (Central African Republic)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sg")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sango\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seh_MZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sena (Mozambique)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seh")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sena\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sr_Cyrl")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Cyrillic)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sr_Cyrl_BA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Cyrillic, Bosnia and Herzegovina)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sr_Cyrl_ME")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Cyrillic, Montenegro)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sr_Cyrl_RS")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Cyrillic, Serbia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sr_Latn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Latin)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sr_Latn_BA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Latin, Bosnia and Herzegovina)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sr_Latn_ME")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Latin, Montenegro)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sr_Latn_RS")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Latin, Serbia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sr")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sn_ZW")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Shona (Zimbabwe)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Shona\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ii_CN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sichuan Yi (China)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ii")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sichuan Yi\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("si_LK")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sinhala (Sri Lanka)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("si")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sinhala\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sk_SK")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Slovak (Slovakia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sk")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Slovak\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sl_SI")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Slovenian (Slovenia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sl")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Slovenian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("xog_UG")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Soga (Uganda)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("xog")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Soga\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("so_DJ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Somali (Djibouti)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("so_ET")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Somali (Ethiopia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("so_KE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Somali (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("so_SO")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Somali (Somalia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("so")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Somali\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_AR")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Argentina)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_BO")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Bolivia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_CL")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Chile)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_CO")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Colombia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_CR")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Costa Rica)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_DO")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Dominican Republic)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_EC")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Ecuador)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_SV")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (El Salvador)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_GQ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Equatorial Guinea)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_GT")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Guatemala)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_HN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Honduras)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_419")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Latin America)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_MX")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Mexico)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_NI")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Nicaragua)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_PA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Panama)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_PY")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Paraguay)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_PE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Peru)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_PR")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Puerto Rico)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_ES")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Spain)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_US")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (United States)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_UY")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Uruguay)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es_VE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Venezuela)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sw_KE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swahili (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sw_TZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swahili (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sw")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swahili\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sv_FI")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swedish (Finland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sv_SE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swedish (Sweden)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sv")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swedish\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("gsw_CH")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swiss German (Switzerland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("gsw")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swiss German\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("shi_Latn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tachelhit (Latin)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("shi_Latn_MA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tachelhit (Latin, Morocco)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("shi_Tfng")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tachelhit (Tifinagh)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("shi_Tfng_MA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tachelhit (Tifinagh, Morocco)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("shi")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tachelhit\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("dav_KE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Taita (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("dav")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Taita\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ta_IN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tamil (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ta_LK")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tamil (Sri Lanka)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ta")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tamil\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("te_IN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Telugu (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("te")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Telugu\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("teo_KE")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Teso (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("teo_UG")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Teso (Uganda)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("teo")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Teso\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("th_TH")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Thai (Thailand)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("th")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Thai\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bo_CN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tibetan (China)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bo_IN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tibetan (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bo")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tibetan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ti_ER")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tigrinya (Eritrea)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ti_ET")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tigrinya (Ethiopia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ti")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tigrinya\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("to_TO")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tonga (Tonga)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("to")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tonga\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tr_TR")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Turkish (Turkey)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tr")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Turkish\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uk_UA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ukrainian (Ukraine)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uk")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ukrainian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ur_IN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Urdu (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ur_PK")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Urdu (Pakistan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ur")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Urdu\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uz_Arab")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek (Arabic)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uz_Arab_AF")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek (Arabic, Afghanistan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uz_Cyrl")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek (Cyrillic)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uz_Cyrl_UZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek (Cyrillic, Uzbekistan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uz_Latn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek (Latin)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uz_Latn_UZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek (Latin, Uzbekistan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uz")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("vi_VN")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Vietnamese (Vietnam)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("vi")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Vietnamese\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("vun_TZ")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Vunjo (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("vun")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Vunjo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("cy_GB")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Welsh (United Kingdom)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("cy")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Welsh\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("yo_NG")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Yoruba (Nigeria)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("yo")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Yoruba\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("zu_ZA")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Zulu (South Africa)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("zu")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Zulu\"")]),_v("\n")])])]),_c('p',[_c('span',{staticClass:"dimmed"},[_c('sub',[_v("[source: "),_c('a',{attrs:{"href":"https://stackoverflow.com/a/28357857/5885921"}},[_v("https://stackoverflow.com/a/28357857/5885921")]),_v(" ]")])])])])]),_v(" "),_c('br'),_v(" "),_m(50),_v(" "),_m(51),_v(" "),_m(52),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})],1),_v(" "),_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"})])],1),_v(" "),_m(53)])} +}; + var pageVueStaticRenderFns = [function anonymous( +) { +with(this){return _c('h1',{attrs:{"id":"site-json-file"}},[_c('span',{staticClass:"anchor",attrs:{"id":"site-json-file"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#site-json-file","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("The directory that contains all the project files. It is also the directory in which the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" configuration file is located.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("Here is a typical "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" file:")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"baseUrl\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/myproduct\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"faviconPath\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"myfavicon.png\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"titlePrefix\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"FooBar Dev Docs\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"style\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"bootstrapTheme\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"bootswatch-cerulean\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"codeTheme\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"light\"")]),_v("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pages\"")]),_v(": [\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"src\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"index.md\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"title\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hello World\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"layout\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"normal\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"searchable\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"externalScripts\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://cdn.plot.ly/plotly-latest.min.js\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"frontmatter\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"header\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"header.md\"")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"glob\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"topics/**/*.md\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"globExclude\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"topics/*/appendix/*.md\"")]),_v("],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"layout\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"subtopic\"")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pagesExclude\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"subsite/**/*.md\"")]),_v("],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"externalScripts\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"deploy\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"message\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Site Update.\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"repo\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/myorg/myrepo.git\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"branch\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"gh-pages\"")]),_v("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"globalOverride\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"footer\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"my-footer.md\"")]),_v("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"ignore\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_site/*\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*.json\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*.md\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*.mbd\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\".git/*\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"plugins\"")]),_v(" : [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"filterTags\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pluginsContext\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"filterTags\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"tags\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tag1\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tag2\"")]),_v("]\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"headingIndexingLevel\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("4")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"intrasiteLinkValidation\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"enabled\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-literal"}},[_v("false")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"baseurl"}},[_c('span',{staticClass:"anchor",attrs:{"id":"baseurl"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#baseurl","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("The base url relative to your domain.")]),_v(" Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"\"")]),_v("(empty).")])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"faviconpath"}},[_c('span',{staticClass:"anchor",attrs:{"id":"faviconpath"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("faviconPath")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#faviconpath","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("The location of the favicon.")]),_v(" Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("favicon.ico")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" If the favicon was recently changed, you may need to force-refresh the Browser to see the new image.")])])])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"titleprefix"}},[_c('span',{staticClass:"anchor",attrs:{"id":"titleprefix"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("titlePrefix")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#titleprefix","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("The prefix for all page titles.")]),_v(" The separator "),_c('code',{pre:true},[_v("-")]),_v(" will be inserted by MarkBind.")])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"style"}},[_c('span',{staticClass:"anchor",attrs:{"id":"style"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("style")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#style","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('em',[_v("(Optional)")]),_v(" "),_c('strong',[_v("The styling options to be applied to the site.")]),_v(" This includes:")])} +},function anonymous( +) { +with(this){return _c('ul',[_c('li',[_c('p',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootstrapTheme")])]),_v(" "),_c('em',[_v("(Optional)")]),_v(" "),_c('strong',[_v("The theme for the generated site.")]),_v(" Uses the default Bootstrap theme if not specified. See "),_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("User Guide: Themes")]),_v(" for more details.")])]),_v(" "),_c('li',[_c('p',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeTheme")])]),_v(" [Optional. Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"dark\"")]),_v("]"),_c('br'),_v("\nThe theme used for fenced code blocks. Accepts either "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"light\"")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"dark\"")]),_v(".")])])])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"pages"}},[_c('span',{staticClass:"anchor",attrs:{"id":"pages"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pages")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#pages","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("An array of pages to be rendered.")])])} +},function anonymous( +) { +with(this){return _c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src/glob")])])} +},function anonymous( +) { +with(this){return _c('a',{attrs:{"href":"https://en.wikipedia.org/wiki/Glob_(programming)"}},[_c('em',[_v("glob syntax")])])} +},function anonymous( +) { +with(this){return _c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("globExclude")])]),_v(": An array of file patterns to be excluded from rendering when using "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("glob")]),_v(", also defined in the glob syntax.")])} +},function anonymous( +) { +with(this){return _c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("title")])]),_v(": The page "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" for the generated web page. Titles specified here take priority over titles specified in the "),_c('a',{attrs:{"href":"/userGuide/addingPages.html#front-matter"}},[_v("front matter")]),_v(" of individual pages.")])} +},function anonymous( +) { +with(this){return _c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("layout")])]),_v(": The "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#page-layouts"}},[_v("layout")]),_v(" to be used by the page. Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("searchable")])]),_v(": Specifies that the page(s) should be excluded from searching. Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("yes")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("externalScripts")])]),_v(": An array of external scripts to be referenced on the page. Scripts referenced will be run before the layout script.")])} +},function anonymous( +) { +with(this){return _c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("frontMatter")])]),_v(": Specifies properties to add to the front matter of a page or glob of pages. Overrides any existing properties if they have the same name, and overrides any front matter properties specified in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("globalOverride")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"pagesexclude"}},[_c('span',{staticClass:"anchor",attrs:{"id":"pagesexclude"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pagesExclude")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#pagesexclude","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("An array of file patterns to be excluded from rendering.")]),_v(" The exclusion pattern follows the glob syntax.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("This property is the global variant to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("globExclude")]),_v(" property and is functionally identical to it. If the two are used at once, the file patterns from both properties will be combined when excluding pages.")])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"externalscripts"}},[_c('span',{staticClass:"anchor",attrs:{"id":"externalscripts"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("externalScripts")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#externalscripts","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("An array of external scripts to be referenced on all pages.")]),_v(" To reference an external script only on specific pages, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("externalScripts")]),_v(" should be specified in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pages")]),_v(" instead. Scripts referenced will be run before the layout script.")])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"globaloverride"}},[_c('span',{staticClass:"anchor",attrs:{"id":"globaloverride"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("globalOverride")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#globaloverride","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Globally overrides properties in the front matter of all pages.")]),_v(" Any property included in the global override will automatically be merged with the front matter of every single page, and override them if the property exists.")])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"ignore"}},[_c('span',{staticClass:"anchor",attrs:{"id":"ignore"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("ignore")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#ignore","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("An array of file patterns to be ignored when copying files to the generated site.")]),_v(" By default, MarkBind will copy all the files as assets of the generated site.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("The ignore pattern follows the "),_c('a',{attrs:{"href":"https://git-scm.com/docs/gitignore#_pattern_format"}},[_v("glob pattern used in .gitignore")]),_v(". For example, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("*.md")]),_v(" ignores all markdown source files.")])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"deploy"}},[_c('span',{staticClass:"anchor",attrs:{"id":"deploy"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("deploy")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#deploy","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("The settings for "),_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("auto-deployment to Github pages")]),_v(".")])])} +},function anonymous( +) { +with(this){return _c('li',[_c('p',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("message")])]),_v(" [Optional. Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"Site Update.\"")]),_v("]"),_c('br'),_v("\nThe commit message used for the deployment commit.")])])} +},function anonymous( +) { +with(this){return _c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("repo")])])} +},function anonymous( +) { +with(this){return _c('li',[_c('p',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("branch")])]),_v(" [Optional. Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"gh-pages\"")]),_v("]"),_c('br'),_v("\nThe branch that will be deployed to in the remote repo.")])])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"plugins-pluginscontext"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugins-pluginscontext"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("plugins")])]),_v(", "),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pluginsContext")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugins-pluginscontext","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("A list of plugins to load.")]),_v(" Plugins are user-defined extensions that can add custom features to MarkBind. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pluginsContext")]),_v(" contains settings to be applied to the loaded plugins. See "),_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("User Guide: Using Plugins")]),_v(" for more details.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("The example above uses tags as an example of configuring plugin settings, refer to the "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#filtertags-toggling-alternative-contents-in-a-page"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("filterTags")]),_v(" plugin")]),_v(" for more details.")])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"headingindexinglevel"}},[_c('span',{staticClass:"anchor",attrs:{"id":"headingindexinglevel"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("headingIndexingLevel")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#headingindexinglevel","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("The level of headings to be indexed for searching.")]),_v(" Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("3")]),_v(" "),_c('span',{staticClass:"dimmed"},[_v("i.e., only headings of levels 1,2,3 will be indexed for searching")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"enablesearch"}},[_c('span',{staticClass:"anchor",attrs:{"id":"enablesearch"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("enableSearch")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#enablesearch","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Specifies that the website should use MarkBind's search functionality.")]),_v(" Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("true")]),_v(". See "),_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("User Guide: Making the Site Searchable")]),_v(" for more details.")])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"timezone"}},[_c('span',{staticClass:"anchor",attrs:{"id":"timezone"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("timeZone")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#timezone","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Time zone of the "),_c('a',{attrs:{"href":"/userGuide/reusingContents.html#built-in-global-variables"}},[_v("time stamp")]),_v(".")]),_v(" Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"UTC\"")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"locale"}},[_c('span',{staticClass:"anchor",attrs:{"id":"locale"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("locale")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#locale","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Language by locale used for the "),_c('a',{attrs:{"href":"/userGuide/reusingContents.html#built-in-global-variables"}},[_v("time stamp")]),_v(".")]),_v(" Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"en-GB\"")]),_v(" ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("English (United Kingdom)")]),_v("). "),_c('br'),_v("\nThe date format is thus - "),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<Day>, <Date> <Month> <Year>, <24-hour Time> <Time Zone Code>")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"intrasitelinkvalidation"}},[_c('span',{staticClass:"anchor",attrs:{"id":"intrasitelinkvalidation"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("intrasiteLinkValidation")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#intrasitelinkvalidation","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Toggle whether to validate intra-site links.")]),_v(" By default, MarkBind will validate all intra-site links and alert you of any potentially invalid ones.\nTo disable this validation "),_c('strong',[_v("entirely")]),_v(", you may add the following to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(":")])} +},function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"disable-global-intrasite-link-validation"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs js"}},[_c('span',[_v("...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"intrasiteLinkValidation\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"enabled\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-literal"}},[_v("false")]),_v("\n")]),_c('span',[_v("},\n")]),_c('span',[_v("...\n")])])])])} +},function anonymous( +) { +with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 3.1.1")]),_v(" on Sat, 22 Jan 2022, 16:49:34 UTC]")]),_c('br'),_v(" "),_c('small',[_v("This site is powered by "),_c('a',{attrs:{"href":"https://www.netlify.com/"}},[_v("Netlify")]),_v(".")])])])])} +}]; + \ No newline at end of file diff --git a/userGuide/syntaxCheatSheet.html b/userGuide/syntaxCheatSheet.html new file mode 100644 index 0000000..7ade563 --- /dev/null +++ b/userGuide/syntaxCheatSheet.html @@ -0,0 +1,256 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="generator" content="MarkBind 3.1.1"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>MarkBind - User Guide: Syntax Cheat Sheet + + + + + + + + + + + + + + + + +

                Syntax Cheat Sheet

                Classes, Attributes & Identifiers 
                add a space before '{' for block level markdown {.class-name attribute="value" attribute=value #id}
+
+don't add a space for **inline**{.text-danger} markdown
+

                For a more detailed guide, see: https://www.npmjs.com/package/markdown-it-attrs

                Badges 
                <span class="badge badge-primary">Primary</span>
+<span class="badge badge-pill badge-success">Success</span>
+<button type="button" class="btn btn-primary">
+  Difficulty Level <span class="badge badge-light">4</span>
+</button>
+
                Blockquotes 
                > Blockquote, first paragraph
+>
+> Second paragraph
+>> Nested blockquote
+
                Boxes 
                <box type="warning">
+  warning
+</box>
+
                Code 
                ```xml
+<foo>
+  <bar type="name">goo</bar>
+</foo>
+```
+
                `<bar type="name">goo</bar>`{.xml}
+
                Dates
                {{ "2019-08-12" | date("DD.MM.YYYY", 10) }} ``

                22.08.2019 +

                Diagrams 
                <puml width=300>
+@startuml
+alice -> bob ++ : hello
+bob -> bob ++ : self call
+@enduml
+</puml>
+
                Dropdowns 
                <dropdown header="Action" type="primary">
+  <li><a href="#dropdown" class="dropdown-item">Action</a></li>
+  <li><a href="#dropdown" class="dropdown-item">Another action</a></li>
+  <li role="separator" class="dropdown-divider"></li>
+  <li><a href="#dropdown" class="dropdown-item">Separated link</a></li>
+</dropdown>
+
                Embeds 
                @[youtube](v40b3ExbM0c)
+@[youtube](http://www.youtube.com/watch?v=v40b3ExbM0c)
+@[youtube](http://youtu.be/v40b3ExbM0c)
+
+@[powerpoint](https://onedrive.live.com/embed?cid=A5AF047C4CAD67AB&resid=A5AF047C4CAD67AB%212070&authkey=&em=2)
+
                Emoji 
                :+1: :exclamation: :x: :construction:
+
                Footnotes 
                **Normal footnotes:**
+Here is a footnote reference,[^1] and another.[^longnote]
+
+[^1]: Here is the footnote. Footnotes will appear at the bottom of the page.
+
+[^longnote]: Here's one with multiple blocks.
+    Subsequent paragraphs are indented to show that they
+belong to the previous footnote.
+
                Front Matter 
                <frontmatter>
+  title: Binary Search Tree
+  pageNav: 2
+</frontmatter>
+
                Headings 
                ### Heading level 3
+...
+###### Heading level 6
+
                Horizontal Rules 
                *****
+-----
+______________
+
                Icons

                :glyphicon-hand-right: :fab-github: :fas-home:

                Images 
                ![alt text here](https://markbind.org/images/logo-lightbackground.png "title here")
+
                Includes 
                <include src="foo.md#bar" boilerplate inline trim>
+  <variable name="x">5</variable>
+</include>
+
                Keywords 
                <span class="keyword d-none">regress</span>
+
                Line Breaks 
                This is the second sentence.<br>
+This should be on a new line.
+
                Links 
                MarkBind home is at [here](https://markbind.org).
+
+MarkBind home is at [here][1].
+
+[1]: https://markbind.org
+
                Lists 
                1. Item 1
+   1. Sub item 1.1
+   1. Sub item 1.2
+* Item 2
+  * item 2.1
+- [ ] Item 3
+- [x] Item 4
+- ( ) Item 5
+
                Math Formulae 
                
+Solve the following simultaneous equations:
+
+\[ 3x + y = 11 \] (1)
+
+\[\frac{2x}{3} + \frac{2y}{3} = 8\] (2)
+
+Euler's equation \( e^{i\pi}+1=0 \) is a beautiful equation.
+
+
                Modals 
                Click <trigger trigger="click" for="modal:unused">here</trigger> to open a modal.
+<modal header="Modal header" id="modal:unused">
+    Modal content
+</modal>
+
                Nav Bars 
                <navbar type="primary">
+  <!-- Brand as slot -->
+  <a slot="brand" href="/" title="Home" class="navbar-brand">MarkBind</a>
+  <li><a href="/userGuide/components/navigation.html#navbars" class="nav-link">Highlighted Link</a></li>
+  <!-- You can use dropdown component -->
+  <dropdown header="Dropdown" class="nav-link">
+    <li><a href="#navbars" class="dropdown-item">Option</a></li>
+  </dropdown>
+  <!-- For right positioning use slot -->
+  <li slot="right">
+    <a href="https://github.com/MarkBind/markbind" target="_blank" class="nav-link">Fork...</a>
+  </li>
+</navbar>
+
                Page Navigation Menus

                Example +In the page that you want to have page navigation, you may show only <h1> and <h2> headings in the pageNav, and set a custom pageNav title like so:

                <frontmatter>
+  pageNav: 2
+  pageNavTitle: "Chapters of This Page"
+</frontmatter>
+

                Then, in your layout file, use the <page-nav /> component to position the pageNav.

                Example Example usage of the <page-nav /> component

                Panels 
                <panel header="primary type panel" type="primary" >
+  ...
+</panel>
+
                Paragraphs 
                This is the first paragraph.
+
+This is another paragraph. This is the second sentence.
+
                Pictures 
                <pic src="https://markbind.org/images/logo-lightbackground.png" width="300" alt="Logo">
+  MarkBind Logo
+</pic>
+
                Popovers 
                Hover over the <trigger for="pop:context-target">keyword</trigger> to see the popover.
+
+<popover id="pop:context-target" header="Popover header" placement="top">
+<div slot="content">
+
+description :+1:
+
+</div>
+</popover>
+
                Questions and Quizzes
                MCQ and Checkbox questions
                <!-- use type="checkbox" for checkbox questions -->
+
+<question type="mcq" header="Which of these **contradicts** the heuristics recommended when creating test cases with multiple inputs?">
+  <!-- Insert the reason for the option using the reason attribute -->
+  <q-option reason="This is **correct**. We need to figure out if a positive test case works!">
+    Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.
+  </q-option>
+  <q-option>
+    It is ok to combine valid values for different inputs.
+  </q-option>
+  <q-option>
+    No more than one invalid test input should be in a given test case.
+  </q-option>
+  <!-- Use the 'correct' attribute to indicate an option as correct. -->
+  <q-option correct>
+    All invalid test inputs must be tested together.
+    <!-- Optionally, you may use a reason slot instead of a reason attribute. -->
+    <div slot="reason">
+    If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled
+    correctly by the SUT.
+    This is because most SUTs return an error message upon encountering the first invalid input.
+    </div>
+  </q-option>
+  <div slot="hint">
+  How do you figure out which inputs are wrong? (or correct)
+  </div>
+</question>
+
+
                Text questions
                
+<question type="text" header="Which country did the Hawaiian pizza originate from?"
+          keywords="hawaii" threshold="0.5" answer="It originated from Hawaii!">
+  <div slot="hint">
+
+  Watch some pizza commercials! :tv:
+
+  :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza:
+  </div>
+</question>
+
+
                Quiz
                <quiz>
+  <question type="mcq">...</question>
+  <question type="checkbox">...</question>
+  <question type="text">...</question>
+</quiz>
+
                Search Bars 
                <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right></searchbar>
+
                <li slot="right">
+  <form class="navbar-form">
+    <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback"></searchbar>
+  </form>
+</li>
+
                Site Navigation Menus

                CODE:

                <site-nav>
+* [**Getting Started**](/userGuide/gettingStarted.html)
+* **Authoring Contents** :expanded:
+  * [Overview](/userGuide/authoringContents.html)
+  * [Adding Pages](/userGuide/addingPages.html)
+  * [MarkBind Syntax Overview](/userGuide/markBindSyntaxOverview.html)
+  * [Formatting Contents](/userGuide/formattingContents.html)
+  * [Using Components](/userGuide/usingComponents.html)
+</site-nav>
+

                OUTPUT:

                Tables 
                Animal | Trainable?| Price | Remarks
+:----- | :-------: | ----: | ----
+Ants   | no        | 5     |
+Bees   | no        | 20    |
+Cats|yes|100|
+
                Tabs 
                <tabs>
+  <tab header="First tab">
+    Content of the first tab
+  </tab>
+  <tab header="Second tab">
+    Contents of the second tab
+  </tab>
+  <tab-group header="Third tab group :tv:">
+    <tab header="Stars :star:">
+      Some stuff about stars ...
+    </tab>
+    <tab header="Moon">
+      Some stuff about the moon ...
+    </tab>
+  </tab-group>
+</tabs>
+
                Tags 
                <p tags="language--java advanced">System.out.println("Hello world");</p>
+<p tags="language--C# basic">Console.WriteLine("Hello world");</p>
+
                <frontmatter>
+  title: "Hello World"
+  tags: ["language--java"]
+</frontmatter>
+
                Text Styles 
                **Bold**, _Italic_, ___Bold and Italic___, `Inline Code`
+~~Strike through~~, ****Super Bold****, !!Underline!!, ==Highlight==, %%Dim%%, ++Large++, --Small--, Super^script^, Sub~script~
+
                Thumbnails 
                <thumb circle src="https://markbind.org/images/logo-lightbackground.png" size="100"/>
+
                Tooltips 
                Hover <tooltip content="An explanation, **supports simple Markdown**">here</tooltip> to see a tooltip.
+
                Variables

                Global variables:

                _markbind/variables.md:

                <variable name="year">2018</span>
+

                The year was {{ year }}.

                  Here is the footnote. Footnotes will appear at the bottom of the page.

                  Here's one with multiple blocks.

                  Subsequent paragraphs are indented to show that they +belong to the previous footnote.

                  Inlines notes are easier to write, since +you don't have to pick an identifier and move down to type the +note.

                1. Here is the footnote. Footnotes will appear at the bottom of the page.

                2. Here's one with multiple blocks.

                  Subsequent paragraphs are indented to show that they +belong to the previous footnote.

                3. Inlines notes are easier to write, since +you don't have to pick an identifier and move down to type the +note.

                + + + diff --git a/userGuide/syntaxCheatSheet.page-vue-render.js b/userGuide/syntaxCheatSheet.page-vue-render.js new file mode 100644 index 0000000..b86d5bc --- /dev/null +++ b/userGuide/syntaxCheatSheet.page-vue-render.js @@ -0,0 +1,31 @@ + + var pageVueRenderFn = function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',[_c('header',{attrs:{"fixed":""}},[_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/index.html","title":"Home"}},[_c('img',{attrs:{"src":"/images/logo-darkbackground.svg","height":"20"}})])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('form',{staticClass:"navbar-form"},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback,"menu-align-right":""}})],1)])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/index.html"}},[_v("HOME")])]),_v(" "),_c('div',{attrs:{"tags":"environment--ug"}},[_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"sibling-or-child","href":"/userGuide/index.html"}},[_v("USER GUIDE")])])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/showcase.html"}},[_v("SHOWCASE")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/about.html"}},[_v("ABOUT")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_c('span',[_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}})])])])])],1)]),_v(" "),_c('div',{attrs:{"id":"flex-body"}},[_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"site-nav","tag-name":"nav","to":"site-nav"}},[_c('div',{staticClass:"site-nav-top"},[_c('div',{staticClass:"font-weight-bold mb-2",staticStyle:{"font-size":"1.25rem"}},[_v("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tipsAndTricks.html"}},[_v("Tips & Tricks")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/glossary.html"}},[_v("Glossary")])])])])])])],1)],1)]),_v(" "),_c('div',{staticClass:"fixed-header-padding",attrs:{"id":"content-wrapper"}},[_m(0),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Classes, Attributes & Identifiers")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("add a space before '{' for block level markdown {.class-name attribute=\"value\" attribute=value #id}\n")]),_c('span',[_v("\n")]),_c('span',[_v("don't add a space for **inline**{.text-danger} markdown\n")])])]),_c('p',[_c('small',[_v("For a more detailed guide, see: "),_c('a',{attrs:{"href":"https://www.npmjs.com/package/markdown-it-attrs"}},[_v("https://www.npmjs.com/package/markdown-it-attrs")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"classes-attributes-and-amp-identifiers"}},[_c('span',{staticClass:"anchor",attrs:{"id":"classes-attributes-and-amp-identifiers"}}),_v("Classes, Attributes & Identifiers"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#classes-attributes-and-amp-identifiers","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Most markdown syntax above this section supports adding classes, attributes and identifiers\nusing "),_c('a',{attrs:{"href":"https://pandoc.org/MANUAL.html"}},[_v("pandoc")]),_v(" syntax without the need for a wrapper html element.")]),_v(" "),_c('p',[_v("The syntax is "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{.class-name attribute=\"value\" attribute=value #id}")]),_v(", which is placed at different locations depending\non the type of markdown.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("Apply classes, attributes, identifiers to block level markdown (eg. paragraphs, headings)\n")]),_c('span',[_v("by leaving a space before '{' {.text-success #attribute-example}\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("#### heading {.text-info}")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.border-danger}\n")]),_c('span',[_v("\n")]),_c('span',[_v("Apply the same to inline markdown (eg. bold text) by\n")]),_c('span',[_v("omitting the "),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**space**")]),_v("{.text-primary .bg-light header=\"attributes example\"}\n")]),_c('span',[_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',{staticClass:"text-success",attrs:{"id":"attribute-example"}},[_v("Apply classes, attributes, identifiers to block level markdown (eg. paragraphs, headings)\nby leaving a space before '{'")]),_v(" "),_c('h4',{staticClass:"text-info",attrs:{"id":"heading"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading"}}),_v("heading"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading","onclick":"event.stopPropagation()"}})]),_v(" "),_c('hr',{staticClass:"border-danger"}),_v(" "),_c('p',[_v("Apply the same to inline markdown (eg. bold text) by\nomitting the "),_c('strong',{staticClass:"text-primary bg-light",attrs:{"header":"attributes example"}},[_v("space")])])])],1)]),_v(" "),_c('p',{staticClass:"mb-4"},[_v("Some other types of markdown have "),_c('strong',[_v("different placements")]),_v(" of the curly group "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{...}")]),_v(".")]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Unordered and Ordered lists")])])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Apply to the list item itself like so {.text-success #list-item-id}\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Curly groups after newlines apply to the closest nested list {.text-danger}\n")]),_c('span',[_v("{.bg-light}\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Curly groups two lines after the last line apply to the top most list\n")]),_c('span',[_v("\n")]),_c('span',[_v("{.alert-info}\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ul',{staticClass:"alert-info"},[_c('li',{staticClass:"text-success",attrs:{"id":"list-item-id"}},[_v("Apply to the list item itself like so\n"),_c('ul',{staticClass:"bg-light"},[_c('li',{staticClass:"text-danger"},[_v("Curly groups after newlines apply to the closest nested list")])])]),_v(" "),_c('li',[_v("Curly groups two lines after the last line apply to the top most list")])])])],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Fenced code blocks")])])]),_v(" "),_c('p',[_v("Refer to the above "),_c('a',{attrs:{"href":"/userGuide/formattingContents.html#line-numbering"}},[_v("section")]),_v("!")]),_v(" "),_c('p',[_c('small',[_v("For a more detailed guide, see: "),_c('a',{attrs:{"href":"https://www.npmjs.com/package/markdown-it-attrs"}},[_v("https://www.npmjs.com/package/markdown-it-attrs")])])]),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_v("\nFormatting features listed above this section support this syntax for attributes, classes and identifiers.\nThose below this section do not.\n")]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("add a space before '{' for block level markdown {.class-name attribute=\"value\" attribute=value #id}\n")]),_c('span',[_v("\n")]),_c('span',[_v("don't add a space for **inline**{.text-danger} markdown\n")])])]),_c('p',[_c('small',[_v("For a more detailed guide, see: "),_c('a',{attrs:{"href":"https://www.npmjs.com/package/markdown-it-attrs"}},[_v("https://www.npmjs.com/package/markdown-it-attrs")])])])]),_c('p'),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('div',[_v("\n* Apply to the list item itself like so {.text-success #list-item-id}\n * Curly groups after newlines apply to the closest nested list {.text-danger}\n{.bg-light}\n* Curly groups two lines after the last line apply to the top most list\n\n{.alert-info}\n")])])],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Badges")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-primary\"")]),_v(">")])]),_v("Primary"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-pill badge-success\"")]),_v(">")])]),_v("Success"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-primary\"")]),_v(">")])]),_v("\n")]),_c('span',[_v(" Difficulty Level "),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-light\"")]),_v(">")])]),_v("4"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"badges"}},[_c('span',{staticClass:"anchor",attrs:{"id":"badges"}}),_v("Badges"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#badges","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_v("Normal:\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-primary\"")]),_v(">")]),_v("Primary"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-secondary\"")]),_v(">")]),_v("Secondary"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-success\"")]),_v(">")]),_v("Success"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-danger\"")]),_v(">")]),_v("Danger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-warning\"")]),_v(">")]),_v("Warning"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-info\"")]),_v(">")]),_v("Info"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-light\"")]),_v(">")]),_v("Light"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-dark\"")]),_v(">")]),_v("Dark"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("Pills:\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-pill badge-primary\"")]),_v(">")]),_v("Primary"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-pill badge-secondary\"")]),_v(">")]),_v("Secondary"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-pill badge-success\"")]),_v(">")]),_v("Success"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-pill badge-danger\"")]),_v(">")]),_v("Danger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-pill badge-warning\"")]),_v(">")]),_v("Warning"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-pill badge-info\"")]),_v(">")]),_v("Info"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-pill badge-light\"")]),_v(">")]),_v("Light"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-pill badge-dark\"")]),_v(">")]),_v("Dark"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Normal:\n"),_c('span',{staticClass:"badge badge-primary"},[_v("Primary")]),_v(" "),_c('span',{staticClass:"badge badge-secondary"},[_v("Secondary")]),_v(" "),_c('span',{staticClass:"badge badge-success"},[_v("Success")]),_v(" "),_c('span',{staticClass:"badge badge-danger"},[_v("Danger")]),_v(" "),_c('span',{staticClass:"badge badge-warning"},[_v("Warning")]),_v(" "),_c('span',{staticClass:"badge badge-info"},[_v("Info")]),_v(" "),_c('span',{staticClass:"badge badge-light"},[_v("Light")]),_v(" "),_c('span',{staticClass:"badge badge-dark"},[_v("Dark")]),_v(" "),_c('br'),_v("Pills:\n"),_c('span',{staticClass:"badge badge-pill badge-primary"},[_v("Primary")]),_v(" "),_c('span',{staticClass:"badge badge-pill badge-secondary"},[_v("Secondary")]),_v(" "),_c('span',{staticClass:"badge badge-pill badge-success"},[_v("Success")]),_v(" "),_c('span',{staticClass:"badge badge-pill badge-danger"},[_v("Danger")]),_v(" "),_c('span',{staticClass:"badge badge-pill badge-warning"},[_v("Warning")]),_v(" "),_c('span',{staticClass:"badge badge-pill badge-info"},[_v("Info")]),_v(" "),_c('span',{staticClass:"badge badge-pill badge-light"},[_v("Light")]),_v(" "),_c('span',{staticClass:"badge badge-pill badge-dark"},[_v("Dark")])])])],1)]),_v(" "),_c('p',[_v("You can use Badges in combination with headings, buttons, links, etc.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_v("Links:\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-primary\"")]),_v(">")]),_v("Primary"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-pill badge-warning\"")]),_v(">")]),_v("Warning"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("Buttons:\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Difficulty Level "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-light\"")]),_v(">")]),_v("4"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("Headings:\n")]),_c('span',[_v("\n")]),_c('span',[_v("### Feature X "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-danger\"")]),_v(">")]),_v("beta"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" {.no-index}\n")]),_c('span',[_v("##### Feature Y "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-pill badge-success\"")]),_v(">")]),_v("stable"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" {.no-index}\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Links:\n"),_c('a',{staticClass:"badge badge-primary",attrs:{"href":"#"}},[_v("Primary")]),_v(" "),_c('a',{staticClass:"badge badge-pill badge-warning",attrs:{"href":"#"}},[_v("Warning")])]),_v(" "),_c('p',[_v("Buttons:\n"),_c('button',{staticClass:"btn btn-primary",attrs:{"type":"button"}},[_v("\nDifficulty Level "),_c('span',{staticClass:"badge badge-light"},[_v("4")])])]),_v(" "),_c('p',[_v("Headings:")]),_v(" "),_c('h3',{staticClass:"no-index",attrs:{"id":"feature-x-beta"}},[_c('span',{staticClass:"anchor",attrs:{"id":"feature-x-beta"}}),_v("Feature X "),_c('span',{staticClass:"badge badge-danger"},[_v("beta")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#feature-x-beta","onclick":"event.stopPropagation()"}})]),_v(" "),_c('h5',{staticClass:"no-index",attrs:{"id":"feature-y-stable"}},[_c('span',{staticClass:"anchor",attrs:{"id":"feature-y-stable"}}),_v("Feature Y "),_c('span',{staticClass:"badge badge-pill badge-success"},[_v("stable")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#feature-y-stable","onclick":"event.stopPropagation()"}})])])],1)]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" You can refer to "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/4.2/components/badge/"}},[_v("Bootstrap documentation")]),_v(" to find more information about Badges.")])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-primary\"")]),_v(">")])]),_v("Primary"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-pill badge-success\"")]),_v(">")])]),_v("Success"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-primary\"")]),_v(">")])]),_v("\n")]),_c('span',[_v(" Difficulty Level "),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge badge-light\"")]),_v(">")])]),_v("4"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_c('span',{staticClass:"badge badge-primary"},[_v("Primary")]),_v(" "),_c('span',{staticClass:"badge badge-pill badge-success"},[_v("Success")]),_v(" "),_c('button',{staticClass:"btn btn-primary",attrs:{"type":"button"}},[_v("\nDifficulty Level "),_c('span',{staticClass:"badge badge-light"},[_v("4")])])]),_v(" "),_c('h5',{staticClass:"no-index",attrs:{"id":"feature-y-stable-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"feature-y-stable-2"}}),_v("Feature Y "),_c('span',{staticClass:"badge badge-pill badge-warning"},[_v("stable")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#feature-y-stable-2","onclick":"event.stopPropagation()"}})])])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Blockquotes")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("> Blockquote, first paragraph\n")]),_c('span',[_v(">\n")]),_c('span',[_v("> Second paragraph\n")]),_c('span',[_v(">> Nested blockquote\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"blockquotes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"blockquotes"}}),_v("Blockquotes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#blockquotes","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs"}},[_c('span',[_v("Normal text\n")]),_c('span',[_v("> Blockquote, first paragraph\n")]),_c('span',[_v(">\n")]),_c('span',[_v("> Second paragraph\n")]),_c('span',[_v(">> Nested quoteblock\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Normal text")]),_v(" "),_c('blockquote',[_c('p',[_v("Blockquote, first paragraph")]),_v(" "),_c('p',[_v("Second paragraph")]),_v(" "),_c('blockquote',[_c('p',[_v("Nested quoteblock")])])])])],1)]),_v(" "),_c('p',[_v("Alternatively, you can use "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("
                ")]),_v(" tags:")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("Normal text\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("blockquote")]),_v(">")])]),_v("\n")]),_c('span',[_v("Blockquote, first paragraph\n")]),_c('span',[_v("\n")]),_c('span',[_v("Second paragraph\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("blockquote")]),_v(">")])]),_v("\n")]),_c('span',[_v("Nested blockquote\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Normal text")]),_v(" "),_c('blockquote',[_v("\nBlockquote, first paragraph\n"),_c('p',[_v("Second paragraph")]),_v(" "),_c('blockquote',[_v("\nNested blockquote\n")])])])],1)]),_v(" "),_c('p',[_c('small',[_v("More info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/basic-syntax#blockquotes-1"}},[_v("https://www.markdownguide.org/basic-syntax#blockquotes-1")])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("> Blockquote, first paragraph\n")]),_c('span',[_v(">\n")]),_c('span',[_v("> Second paragraph\n")]),_c('span',[_v(">> Nested blockquote\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('blockquote',[_c('p',[_v("Blockquote, first paragraph")]),_v(" "),_c('p',[_v("Second paragraph")]),_v(" "),_c('blockquote',[_c('p',[_v("Nested blockquote\n")])])])]),_c('p')])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Boxes")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" warning\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"boxes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"boxes"}}),_v("Boxes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#boxes","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Boxes come with different built-in types.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("\n")]),_c('span',[_v(" default\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" info\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" warning\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" success\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"important\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" important\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"wrong\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" wrong\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tip\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" tip\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" definition\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("dismissible")]),_v(">")]),_v("\n")]),_c('span',[_v(" dismissible info\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#### Header :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon-size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"2x\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"You can use **markdown** here! :pizza:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("dismissible")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',[_v("\n default\n")]),_v(" "),_c('box',{attrs:{"type":"info"}},[_v("\n info\n")]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_v("\n warning\n")]),_v(" "),_c('box',{attrs:{"type":"success"}},[_v("\n success\n")]),_v(" "),_c('box',{attrs:{"type":"important"}},[_v("\n important\n")]),_v(" "),_c('box',{attrs:{"type":"wrong"}},[_v("\n wrong\n")]),_v(" "),_c('box',{attrs:{"type":"tip"}},[_v("\n tip\n")]),_v(" "),_c('box',{attrs:{"type":"definition"}},[_v("\n definition\n")]),_v(" "),_c('box',{attrs:{"type":"info","dismissible":""}},[_v("\n dismissible info\n")]),_v(" "),_c('box',{attrs:{"type":"success","icon-size":"2x"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h4',{attrs:{"id":"header"}},[_c('span',{staticClass:"anchor",attrs:{"id":"header"}}),_v("Header 🚀"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#header","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('p',[_v("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.")]),_v(" "),_c('box',{attrs:{"type":"warning","dismissible":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("You can use "),_c('strong',[_v("markdown")]),_v(" here! 🍕")])]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n ")])],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("The built in types can be colored.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("\n")]),_c('span',[_v(" default\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" primary\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"secondary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" secondary\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" success\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"danger\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" danger\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" warning\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" info\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"light\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dark\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" dark\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',[_v("\n default\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"primary"}},[_v("\n primary\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"secondary"}},[_v("\n secondary\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"success"}},[_v("\n success\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"danger"}},[_v("\n danger\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"warning"}},[_v("\n warning\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"info"}},[_v("\n info\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"light"}},[_v("\n light\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"dark"}},[_v("\n dark\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Markbind also supports a light color scheme for boxes")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" default light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" info light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" warning light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" success light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"important\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" important light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"wrong\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" wrong light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tip\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" tip light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" definition light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"##### Header markdown :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" definition light with header markdown\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',{attrs:{"light":""}},[_v("\n default light\n")]),_v(" "),_c('box',{attrs:{"type":"info","light":""}},[_v("\n info light\n")]),_v(" "),_c('box',{attrs:{"type":"warning","light":""}},[_v("\n warning light\n")]),_v(" "),_c('box',{attrs:{"type":"success","light":""}},[_v("\n success light\n")]),_v(" "),_c('box',{attrs:{"type":"important","light":""}},[_v("\n important light\n")]),_v(" "),_c('box',{attrs:{"type":"wrong","light":""}},[_v("\n wrong light\n")]),_v(" "),_c('box',{attrs:{"type":"tip","light":""}},[_v("\n tip light\n")]),_v(" "),_c('box',{attrs:{"type":"definition","light":""}},[_v("\n definition light\n")]),_v(" "),_c('box',{attrs:{"type":"definition","light":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('h5',{attrs:{"id":"header-markdown"}},[_c('span',{staticClass:"anchor",attrs:{"id":"header-markdown"}}),_v("Header markdown 🚀"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#header-markdown","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v("\n definition light with header markdown\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("MarkBind also supports a seamless style of boxes")])]),_v(" "),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("As "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("light")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("seamless")]),_v(" are mutually exclusive styles, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("light")]),_v(" takes priority over "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("seamless")]),_v(".")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" default seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" info seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" warning seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" success seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"important\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" important seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"wrong\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" wrong seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tip\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" tip seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("dismissible")]),_v(">")]),_v("\n")]),_c('span',[_v(" dismissible definition seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"##### Header markdown :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" success seamless with header markdown\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',{attrs:{"seamless":""}},[_v("\n default seamless\n")]),_v(" "),_c('box',{attrs:{"type":"info","seamless":""}},[_v("\n info seamless\n")]),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_v("\n warning seamless\n")]),_v(" "),_c('box',{attrs:{"type":"success","seamless":""}},[_v("\n success seamless\n")]),_v(" "),_c('box',{attrs:{"type":"important","seamless":""}},[_v("\n important seamless\n")]),_v(" "),_c('box',{attrs:{"type":"wrong","seamless":""}},[_v("\n wrong seamless\n")]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_v("\n tip seamless\n")]),_v(" "),_c('box',{attrs:{"type":"definition","seamless":"","dismissible":""}},[_v("\n dismissible definition seamless\n")]),_v(" "),_c('box',{attrs:{"type":"definition","seamless":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('h5',{attrs:{"id":"header-markdown-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"header-markdown-2"}}),_v("Header markdown 🚀"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#header-markdown-2","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v("\n success seamless with header markdown\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("You can further customize the Box's appearance.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("background-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#ffca6a\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("border-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"grey\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("border-left-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#8b5a01\"")]),_v(">")]),_v("\n")]),_c('span',[_v("default type, styled as an orange box with a brown left border\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"red\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":rocket:\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("info, with a custom markdown rocket icon and `red` colored text.\n")]),_c('span',[_v("\n")]),_c('span',[_v("You can use any inline markdown in the `icon` property.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',{attrs:{"background-color":"#ffca6a","border-color":"grey","border-left-color":"#8b5a01"}},[_v("\ndefault type, styled as an orange box with a brown left border\n")]),_v(" "),_c('box',{attrs:{"type":"info","color":"red"},scopedSlots:_u([{key:"icon",fn:function(){return [_v("🚀")]},proxy:true}])},[_v(" "),_c('p',[_v("info, with a custom markdown rocket icon and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("red")]),_v(" colored text.")]),_v(" "),_c('p',[_v("You can use any inline markdown in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("icon")]),_v(" property.")])])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("You can remove the background, icon and borders of preset styles.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-icon")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-background")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" success box without a tick icon and backgound\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-border")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" definition type box, light style without border\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',{attrs:{"no-icon":"","no-background":"","type":"success"}},[_v("\n success box without a tick icon and backgound\n")]),_v(" "),_c('box',{attrs:{"no-border":"","type":"definition","light":""}},[_v("\n definition type box, light style without border\n")])],1)],1)]),_v(" "),_c('box',{attrs:{"type":"info","seamless":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Note")])]},proxy:true}])},[_v(" "),_c('p',[_v("Custom styles "),_c('strong',[_v("(")]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("background-color")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("border-color")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("border-left-color")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("icon")]),_v(" "),_c('strong',[_v(")")]),_v(" as introduced in the previous section, takes precedence over the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-background")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-border")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-icon")]),_v(" attributes.")])]),_v(" "),_c('p',[_c('strong',[_v("You can also use icons, resize them and change their color accordingly.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-camera:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-camera:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon-size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"2x\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-camera:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon-size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"3x\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-camera:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"red\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon-size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"3x\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',{attrs:{"type":"success"},scopedSlots:_u([{key:"icon",fn:function(){return [_c('span',{staticClass:"fas fa-camera",attrs:{"aria-hidden":"true"}})]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit\n")]),_v(" "),_c('box',{attrs:{"type":"warning","icon-size":"2x"},scopedSlots:_u([{key:"icon",fn:function(){return [_c('span',{staticClass:"fas fa-camera",attrs:{"aria-hidden":"true"}})]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n")]),_v(" "),_c('box',{attrs:{"type":"definition","icon-size":"3x"},scopedSlots:_u([{key:"icon",fn:function(){return [_c('span',{staticClass:"fas fa-camera",attrs:{"aria-hidden":"true"}})]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n")]),_v(" "),_c('box',{attrs:{"type":"info","icon-color":"red","icon-size":"3x"},scopedSlots:_u([{key:"icon",fn:function(){return [_c('span',{staticClass:"fas fa-camera",attrs:{"aria-hidden":"true"}})]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("background-color")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',[_v("border-color")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',[_v("border-left-color")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Overrides border-color for the left border.")])]),_v(" "),_c('tr',[_c('td',[_v("color")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Color of the text.")])]),_v(" "),_c('tr',[_c('td',[_v("dismissible")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Adds a button to close the box to the top right corner.")])]),_v(" "),_c('tr',[_c('td',[_v("icon"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Inline MarkDown text of the icon displayed on the left.")])]),_v(" "),_c('tr',[_c('td',[_v("icon-size")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Resizes the icon. Supports integer-scaling of the icon dimensions e.g. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("2x")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("3x")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("4x")]),_v(", etc.")])]),_v(" "),_c('tr',[_c('td',[_v("icon-color")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Color of the icon.")])]),_v(" "),_c('tr',[_c('td',[_v("header"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Markdown text of the box header.")])]),_v(" "),_c('tr',[_c('td',[_v("type")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("info")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("warning")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("success")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("important")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("wrong")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tip")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("definition")]),_v(", or empty for default.")])]),_v(" "),_c('tr',[_c('td',[_v("theme")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("primary")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("secondary")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("success")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("danger")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("warning")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tip")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("light")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("dark")]),_v(" or empty for default.")])]),_v(" "),_c('tr',[_c('td',[_v("light")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Uses a light color scheme for the box.")])]),_v(" "),_c('tr',[_c('td',[_v("seamless")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Uses a seamless style for the box. If "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("light")]),_v(" is specified, this style will not be activated.")])]),_v(" "),_c('tr',[_c('td',[_v("no-border")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Removes border, except if styled by "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("border-color")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("border-left-color")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("no-backgound")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Removes background, except if styled by "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("backgound-color")]),_v(" option.")])]),_v(" "),_c('tr',[_c('td',[_v("no-icon")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Removes icon, except if icon is displayed via "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("icon")]),_v(" option.")])])])])]),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" warning\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('box',[_v("\n default\n")]),_v(" "),_c('box',{attrs:{"type":"info"}},[_v("\n info\n")]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_v("\n warning\n")]),_v(" "),_c('box',{attrs:{"type":"success"}},[_v("\n success\n")]),_v(" "),_c('box',{attrs:{"type":"important"}},[_v("\n important\n")]),_v(" "),_c('box',{attrs:{"type":"wrong"}},[_v("\n wrong\n")]),_v(" "),_c('box',{attrs:{"type":"tip"}},[_v("\n tip\n")]),_v(" "),_c('box',{attrs:{"type":"definition"}},[_v("\n definition\n")])],1)],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Code")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("```xml\n")]),_c('span',[_v("\n")]),_c('span',[_v(" goo\n")]),_c('span',[_v("\n")]),_c('span',[_v("```\n")])])]),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("`goo`{.xml}\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"code"}},[_c('span',{staticClass:"anchor",attrs:{"id":"code"}}),_v("Code"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#code","onclick":"event.stopPropagation()"}})]),_v(" "),_c('h4',{attrs:{"id":"themes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"themes"}}),_v("Themes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#themes","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("MarkBind can present formatted code blocks, be it fenced or inline, with either "),_c('strong',[_v("light")]),_v(" or "),_c('strong',[_v("dark")]),_v(" themes. The default is dark.")]),_v(" "),_c('p',[_v("Refer "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#style"}},[_v("here")]),_v(" for configuring MarkBind to use a specific theme for the code blocks.")]),_v(" "),_c('h4',{attrs:{"id":"fenced-code"}},[_c('span',{staticClass:"anchor",attrs:{"id":"fenced-code"}}),_v("Fenced Code"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#fenced-code","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("MarkBind provides several features, some of which are added on top of the existing functionality of Markdown's "),_c('em',[_v("fenced code blocks")]),_v(".")]),_v(" "),_c('p',[_c('small',[_v("More info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/extended-syntax#fenced-code-blocks"}},[_v("https://www.markdownguide.org/extended-syntax#fenced-code-blocks")])])]),_v(" "),_c('p',[_v("Features:")]),_v(" "),_c('ul',[_c('li',[_v("Syntax coloring")]),_v(" "),_c('li',[_v("Line numbering")]),_v(" "),_c('li',[_v("Line highlighting")]),_v(" "),_c('li',[_v("Code block headers")])]),_v(" "),_c('h5',{attrs:{"id":"syntax-coloring"}},[_c('span',{staticClass:"anchor",attrs:{"id":"syntax-coloring"}}),_v("Syntax coloring"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#syntax-coloring","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("To enable syntax coloring, specify a language next to the backticks before the fenced code block.")]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```xml")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" goo")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])],1)])]),_v(" "),_c('h5',{attrs:{"id":"line-numbering"}},[_c('span',{staticClass:"anchor",attrs:{"id":"line-numbering"}}),_v("Line numbering"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#line-numbering","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Line numbers are provided by default. To hide line numbers, add the class "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-line-numbers")]),_v(" to the code block as below")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```xml {.no-line-numbers}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" goo")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])],1)]),_v(" "),_c('p',[_v("You can have your line numbers start with a value other than "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("1")]),_v(" with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start-from")]),_v(" attribute.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```js {start-from=6}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("function add(a, b) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return a + b;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pre',[_c('code',{pre:true,attrs:{"style":"counter-reset: line 5;","class":"hljs js"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("function")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("add")]),_v("("),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("a, b")]),_v(") ")]),_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" a + b;\n")]),_c('span',[_v("}\n")])])])])],1)]),_v(" "),_c('h5',{attrs:{"id":"line-highlighting"}},[_c('span',{staticClass:"anchor",attrs:{"id":"line-highlighting"}}),_v("Line highlighting"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#line-highlighting","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("highlight-lines")]),_v(" attribute to add highlighting to your code block. Refer to the example code block\nbelow for a visual demonstration of all the possible ways of highlighting a code block.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```java {highlight-lines=\"1[:],3['Inventory'],4['It\\'s designed'],5,6[8:18],8[0::2],12[:]-14,16-18,20[12:]-22,24[1::]-26\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("import java.util.List;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("// Inventory is a class that stores inventory items in a list.")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("// It's designed as a thin wrapper on the List interface.")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("public class Inventory {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" private List items;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public int getItemCount(){")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.size();")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public bool isEmpty() {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.isEmpty();")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public Item getItem(idx: int) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.get(idx);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public void addItem(item: Item) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.add(item);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public void removeItem(item: Item) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.remove(item);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs java"}},[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("import")]),_v(" java.util.List;\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_c('span',[_v("// "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("Inventory")]),_v(" is a class that stores inventory items in a list.")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_c('span',[_v("// "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("It's designed")]),_v(" as a thin wrapper on the List interface.")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-class"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("class")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("Inventory")]),_v(" ")]),_v("{")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("private")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("List")]),_v(" items;\n")])]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword highlighted"}},[_v("public")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")]),_c('span',{pre:true,attrs:{"class":"hljs-keyword highlighted"}},[_v("int")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("getItemCount")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("()")])]),_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.size();\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" bool "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("isEmpty")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("()")]),_v(" ")]),_v("{\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.isEmpty();\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" }\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" Item "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("getItem")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("(idx: "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("int")]),_v(")")]),_v(" ")]),_v("{")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.get(idx);")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("}")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("void")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title highlighted"}},[_v("addItem")]),_c('span',{pre:true,attrs:{"class":"hljs-params highlighted"}},[_v("(item: Item)")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")])]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("{")]),_v("\n")])]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.add(item);")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("}")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword highlighted"}},[_v("void")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")]),_c('span',{pre:true,attrs:{"class":"hljs-title highlighted"}},[_v("removeItem")]),_c('span',{pre:true,attrs:{"class":"hljs-params highlighted"}},[_v("(item: Item)")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")])]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("{")]),_v("\n")])]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.remove(item);")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("}")]),_v("\n")]),_c('span',[_v("}\n")])])])])],1)]),_v(" "),_c('p',[_v("The value of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("highlight-lines")]),_v(" is composed of "),_c('em',[_v("highlight rules")]),_v(", separated by commas.\nThese rules dictate where and how MarkBind should highlight your code block.")]),_v(" "),_c('p',[_v("You can specify the highlight rules in many different ways, each is detailed as follows:")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Format")]),_v(" "),_c('th',[_v("Example")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_c('strong',[_v("Full text highlight")]),_c('br'),_v("Highlights the entirety of the text portion of the line")]),_v(" "),_c('td',[_v("The line numbers as-is (subject to the starting line number set in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start-from")]),_v(").")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("3")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("5")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Substring highlight")]),_c('br'),_v("Highlights "),_c('em',[_v("all")]),_v(" occurrences of a substring in the line")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineNumber[part]")]),_c('br'),_c('br'),_c('em',[_v("Limitations")]),_v(": "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("part")]),_v(" must be wrapped in quotes. If "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("part")]),_v(" contains a quote, escape it with a backslash ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\\")]),_v(").")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("3['Inventory']")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("4['It\\'s designed']")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Character-bounded highlight")]),_c('br'),_v("Highlights a specific range of characters in the line")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineNumber[start:end]")]),_v(", highlights from character position "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start")]),_v(" up to (but not including) "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("end")]),_v("."),_c('br'),_c('br'),_v("Character positions start from "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0")]),_v(" as the first non-whitespace character, upwards."),_c('br'),_c('br'),_v("Omit either "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start")]),_v("/"),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("end")]),_v(" to highlight from the start / up to the end, respectively.")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("19[1:5]")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("30[10:]")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("35[:20]")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Word-bounded highlight")]),_c('br'),_v("Highlights a specific range of words in the line")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineNumber[start::end]")]),_v(", highlights from word position "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start")]),_v(" up to (but not including) "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("end")]),_v("."),_c('br'),_c('br'),_v("Word positions start from "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0")]),_v(" as the first word (sequence of non-whitespace characters), upwards."),_c('br'),_c('br'),_v("Omit either "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start")]),_v("/"),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("end")]),_v(" to highlight from the start / up to the end, respectively.")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("5[2::4]")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("9[1::]")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("11[::5]")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Full line highlight")]),_c('br'),_v("Highlights the entirety of the line")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineNumber[:]")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("7[:]")])])])])])]),_c('p',[_v("Not only a single line, MarkBind is also capable of highlighting ranges of lines in various ways. In general, the syntax\nfor range highlighting consists of two single line highlight rules as listed above joined by a dash ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v(").")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Format")]),_v(" "),_c('th',[_v("Example")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_c('strong',[_v("Ranged full text highlight")]),_c('br'),_v("Highlights from the first non-whitespace character to the last non-whitespace character")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart-lineEnd")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("2-4")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Ranged full line highlight")]),_c('br'),_v("Like ranged full text highlight, but highlights the entirety of the lines")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart[:]-lineEnd")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart-lineEnd[:]")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("1[:]-5")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("10-12[:]")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Ranged character-bounded highlight")]),_c('br'),_v("Highlights the text portion of the lines within the range, but starts/ends at an arbitrary character")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart[start:]-lineEnd")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart-lineEnd[:end]")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("3[2:]-7")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("4-9[:17]")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Ranged word-bounded highlight")]),_c('br'),_v("Like ranged character-bounded highlight, but starts/ends at an arbitrary word")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart[start::]-lineEnd")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart-lineEnd[::end]")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("16[1::]-20")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("22-24[::3]")])])])])])]),_c('h5',{attrs:{"id":"heading-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-2"}}),_v("Heading"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("To add a heading, add the attribute "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("heading")]),_v(" with the heading text as the value, as shown below.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```xml {heading=\"Heading title\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" goo")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Heading title")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Heading title","class":"hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])])])],1)]),_v(" "),_c('p',[_v("Headings support inline Markdown, except for "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Inline Code")]),_v(" and "),_c('span',{staticClass:"dimmed"},[_v("Dim")]),_v(" text styles.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```{heading=\"**Bold**, _Italic_, ___Bold and Italic___, ~~Strike through~~, ****Super Bold****, !!Underline!!, ==Highlight==, :+1: :exclamation: :x: :construction:
                We support page breaks\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading inline-markdown-heading"},[_c('span',[_c('strong',[_v("Bold")]),_v(", "),_c('em',[_v("Italic")]),_v(", "),_c('em',[_c('strong',[_v("Bold and Italic")])]),_v(", "),_c('s',[_v("Strike through")]),_v(", "),_c('strong',[_c('strong',[_v("Super Bold")])]),_v(", "),_c('span',{staticClass:"underline"},[_v("Underline")]),_v(", "),_c('mark',[_v("Highlight")]),_v(", 👍 ❗️ ❌ 🚧"),_c('br'),_v("We support page breaks")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"**Bold**, _Italic_, ___Bold and Italic___, ~~Strike through~~, ****Super Bold****, !!Underline!!, ==Highlight==, :+1: :exclamation: :x: :construction:
                We support page breaks","class":"hljs"}},[_c('span',[_v("\n")])])])])])])],1)]),_v(" "),_c('h5',{attrs:{"id":"using-multiple-features"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-multiple-features"}}),_v("Using multiple features"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-multiple-features","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can also use multiple features together, as shown below.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```xml {highlight-lines=\"2\" heading=\"Heading title\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" goo")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Heading title")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Heading title","class":"hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])])])],1)]),_v(" "),_c('h5',{attrs:{"id":"copy-button"}},[_c('span',{staticClass:"anchor",attrs:{"id":"copy-button"}}),_v("Copy button"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#copy-button","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("A "),_c('em',[_v("copy")]),_v(" button can be added to code blocks using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockCopyButtons")]),_v(" plugin:")]),_v(" "),_c('panel',{attrs:{"type":"seamless","popup-url":"usingPlugins.html#plugin-codeblockcopybuttons"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("User Guide: Using Plugins → Plugin: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockCopyButtons")])])])]},proxy:true}])},[_v(" "),_c('div',[_c('h3',{attrs:{"id":"plugin-codeblockcopybuttons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugin-codeblockcopybuttons"}}),_v("Plugin: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockCopyButtons")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-codeblockcopybuttons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("This plugin adds a "),_c('em',[_v("copy")]),_v(" button to fenced code blocks so that readers can copy the code easily.")]),_v(" "),_c('p',[_v("To enable it, simply add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockCopyButtons")]),_v(" to your site's plugins.")]),_v(" "),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugins\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"codeBlockCopyButtons\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v("}\n")])])])])]),_c('p',[_v("This is what it'll look like once added:")]),_v(" "),_c('pic',{attrs:{"src":"/images/copyCode.png","width":"750","alt":"copyCode"}})],1)]),_v(" "),_c('br'),_v(" "),_c('h5',{attrs:{"id":"wrap-text-button"}},[_c('span',{staticClass:"anchor",attrs:{"id":"wrap-text-button"}}),_v("Wrap text button"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#wrap-text-button","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("A "),_c('em',[_v("wrap text")]),_v(" button can be added to code blocks using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockWrapButtons")]),_v(" plugin:")]),_v(" "),_c('panel',{attrs:{"type":"seamless","popup-url":"usingPlugins.html#plugin-codeblockwrapbuttons"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("User Guide: Using Plugins → Plugin: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockWrapButtons")])])])]},proxy:true}])},[_v(" "),_c('div',[_c('h3',{attrs:{"id":"plugin-codeblockwrapbuttons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugin-codeblockwrapbuttons"}}),_v("Plugin: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockWrapButtons")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-codeblockwrapbuttons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("This plugin adds a "),_c('em',[_v("wrap text")]),_v(" button to fenced code blocks so that readers can read long lines of code without scrolling sideways.")]),_v(" "),_c('p',[_v("To enable it, simply add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockWrapButtons")]),_v(" to your site's plugins.")]),_v(" "),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugins\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"codeBlockWrapButtons\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v("}\n")])])])])]),_c('p',[_v("This is what it'll look like once added:")]),_v(" "),_c('pic',{attrs:{"src":"/images/wrapCodeOff.png","width":"750","alt":"wrapCodeOff"}}),_v(" "),_c('p',[_v("Clicking the "),_c('em',[_v("wrap text")]),_v(" button will result in the following:")]),_v(" "),_c('pic',{attrs:{"src":"/images/wrapCodeOn.png","width":"750","alt":"wrapCodeOn"}}),_v(" "),_c('p',[_v("In case a single long word is encountered, it will be split across multiple lines similar to the following:")]),_v(" "),_c('pic',{attrs:{"src":"/images/wrapCodeOnWordBreak.png","width":"750","alt":"wrapCodeOnWordBreak"}})],1)]),_v(" "),_c('br'),_v(" "),_c('h4',{attrs:{"id":"inline-code"}},[_c('span',{staticClass:"anchor",attrs:{"id":"inline-code"}}),_v("Inline Code"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#inline-code","onclick":"event.stopPropagation()"}})]),_v(" "),_c('h5',{attrs:{"id":"syntax-coloring-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"syntax-coloring-2"}}),_v("Syntax coloring"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#syntax-coloring-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("MarkBind can apply syntax-coloring on inline code too.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs"}},[_c('span',[_v("Consider the xml code `goo`{.xml},
                \n")]),_c('span',[_v("or the java code `public static void main(String[] args)`{.java}.\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Consider the xml code "),_c('code',{pre:true,attrs:{"class":"hljs inline xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v(","),_c('br'),_v("\nor the java code "),_c('code',{pre:true,attrs:{"class":"hljs inline java"}},[_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("static")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("void")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("main")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("(String[] args)")])])]),_v(".")])])],1)]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("```xml\n")]),_c('span',[_v("\n")]),_c('span',[_v(" goo\n")]),_c('span',[_v("\n")]),_c('span',[_v("```\n")])])]),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("`goo`{.xml}\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])]),_c('p',[_v("Syntax coloring for inline code: "),_c('code',{pre:true,attrs:{"class":"hljs inline xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v(" too!")])])],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Dates")])]),_v(" "),_c('div',[_c('box',[_c('span',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ \"2019-08-12\" | date(\"DD.MM.YYYY\", 10) }}")]),_v(" ``"),_c('br')])]),_v(" "),_c('p',[_v("22.08.2019\n")])],1)])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"dates"}},[_c('span',{staticClass:"anchor",attrs:{"id":"dates"}}),_v("Dates"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#dates","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Markbind supports date formatting and simple calculations")]),_v(" as a Nunjucks "),_c('a',{attrs:{"href":"https://mozilla.github.io/nunjucks/templating.html#filters"}},[_v("filter")]),_v(".")]),_v(" "),_c('p',[_c('strong',[_v("Syntax:")]),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("{ baseDate | date(format, daysToAdd) }}")])]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('p',[_v("20 days after 1st Jan 2020:")]),_v(" "),_c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ \"2020-01-01\" | date(\"ddd, Do MMM, YYYY\", 20) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Tue, 21st Jan, 2020")])]),_v(" "),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("The baseDate follows the format: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("YYYY-MM-DD")])]),_v(" "),_c('p',[_v("The default output format is "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"ddd D MMM\"")]),_v(" e.g. Fri 6 Mar")])]),_v(" "),_c('h3',{attrs:{"id":"using-variables"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-variables"}}),_v("Using variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-variables","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("% set base1 = \"2020-01-01\" %}")]),_v(" "),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("% set format1 = \"DD MM YYYY\" %}")]),_v(" "),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("% set format2 = \"ddd Do MMM (DD/MM/YYYY)\" %}")])]),_v(" "),_c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Wed 1 Jan"),_c('br')]),_v(" "),_c('h4',{attrs:{"id":"custom-formatting"}},[_c('span',{staticClass:"anchor",attrs:{"id":"custom-formatting"}}),_v("Custom formatting"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#custom-formatting","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format1) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" 01 01 2020"),_c('br')]),_v(" "),_c('h4',{attrs:{"id":"adding-days"}},[_c('span',{staticClass:"anchor",attrs:{"id":"adding-days"}}),_v("Adding days"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#adding-days","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format2, 0) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Wed 1st Jan (01/01/2020)"),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format2, 10) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Sat 11th Jan (11/01/2020)"),_c('br')]),_v(" "),_c('h4',{attrs:{"id":"page-variables"}},[_c('span',{staticClass:"anchor",attrs:{"id":"page-variables"}}),_v("Page variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#page-variables","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Dates can be supplied using "),_c('a',{attrs:{"href":"/userGuide/reusingContents.html#variables"}},[_v("page variables")]),_v(" for convenience.")]),_v(" "),_c('p',[_v("Inside "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("variables.md")]),_v(" or referencing page:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("{% set date_pagevar = \"2020-03-06\" %}\n")])])]),_c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ date_pagevar | date(format2) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Fri 6th Mar (06/03/2020) "),_c('br')]),_v(" "),_c('h3',{attrs:{"id":"advanced-formatting"}},[_c('span',{staticClass:"anchor",attrs:{"id":"advanced-formatting"}}),_v("Advanced Formatting"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#advanced-formatting","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("The output date can be formatted to suit your needs by specifying a format string as an argument to the date filter.")]),_v(" "),_c('p',[_v("Default format: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"ddd D MMM\"")]),_v(" e.g. Fri 6 Mar")]),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("Brief reference")])])]},proxy:true}])},[_v(" "),_c('p',[_v("Token | Output")]),_v(" "),_c('ul',[_c('li',[_v("| -\nD | 1\nDo | 1st\nDD | 01\nM | 1\nMM | 01\nMMM | Jan\nMMMM | January\nYY | 19\nYYYY | 2019")])])]),_v(" "),_c('p',[_v("Full formatting reference available "),_c('a',{attrs:{"href":"https://momentjs.com/docs/#/displaying/format/"}},[_v("here")]),_v(".")]),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}})],1),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',[_c('span',[_c('code',{pre:true},[_v("{"),_c('a'),_v("% set base1 = \"2019-08-12\" %}")]),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("% set format1 = \"DD MM YYYY\" %}")]),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("% set format2 = \"ddd Do MM\" %}")]),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date }}")]),_v(" ``"),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format1) }}")]),_v(" ``"),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format1, 10) }}")]),_v(" ``"),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format2, 10) }}")]),_v(" ``"),_c('br')])])],1),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Mon 12 Aug"),_c('br'),_v("\n12 08 2019"),_c('br'),_v("\n22 08 2019"),_c('br'),_v("\nThu 22/08")])])],1)]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('box',[_c('span',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ \"2019-08-12\" | date(\"DD.MM.YYYY\", 10) }}")]),_v(" ``"),_c('br')])]),_v(" "),_c('p',[_v("22.08.2019\n")])],1),_v(" "),_c('p')],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Diagrams")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("\n")]),_c('span',[_v("@startuml\n")]),_c('span',[_v("alice -> bob ++ : hello\n")]),_c('span',[_v("bob -> bob ++ : self call\n")]),_c('span',[_v("@enduml\n")]),_c('span',[_v("\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"diagrams"}},[_c('span',{staticClass:"anchor",attrs:{"id":"diagrams"}}),_v("Diagrams"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#diagrams","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can use the "),_c('a',{attrs:{"href":"http://plantuml.com/"}},[_v("PlantUML")]),_v(" syntax to add diagrams.")]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_c('strong',[_c('a',{attrs:{"href":"https://www.java.com/en/download/"}},[_v("Java")]),_v(" and\n"),_c('a',{attrs:{"href":"https://www.graphviz.org/download/"}},[_v("Graphviz")]),_v("\nmust be installed to use this feature")])]),_v(" "),_c('ul',[_c('li',[_v("Java 8 or later (required to run the PlantUML JAR executable)")]),_v(" "),_c('li',[_v("Graphviz v2.38 or later (required to generate "),_c('em',[_v("all")]),_v(" diagrams)")])])]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("\n")]),_c('span',[_v("@startuml\n")]),_c('span',[_v("alice -> bob ++ : hello\n")]),_c('span',[_v("bob -> bob ++ : self call\n")]),_c('span',[_v("bob -> bib ++ #005500 : hello\n")]),_c('span',[_v("bob -> george ** : create\n")]),_c('span',[_v("return done\n")]),_c('span',[_v("return rc\n")]),_c('span',[_v("bob -> george !! : delete\n")]),_c('span',[_v("return success\n")]),_c('span',[_v("@enduml\n")]),_c('span',[_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('pic',{attrs:{"src":"/userGuide/diagrams/sequence.png","width":"300"}})],1)])],1)])]),_v(" "),_c('p',[_v("Alternatively, a PlantUML diagram can be specified in a separate "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".puml")]),_v(" file and inserted into a page using a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" tag.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("diagrams/sequence.puml")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("@startuml\n")]),_c('span',[_v("alice -> bob ++ : hello\n")]),_c('span',[_v("bob -> bob ++ : self call\n")]),_c('span',[_v("bob -> bib ++ #005500 : hello\n")]),_c('span',[_v("bob -> george ** : create\n")]),_c('span',[_v("return done\n")]),_c('span',[_v("return rc\n")]),_c('span',[_v("bob -> george !! : delete\n")]),_c('span',[_v("return success\n")]),_c('span',[_v("@enduml\n")])])]),_c('p',[_v("in another file:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("puml")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"diagrams/sequence.puml\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"300\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('pic',{attrs:{"src":"/userGuide/diagrams/sequence.png","width":"300"}})],1)])],1)]),_v(" "),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("The full PlantUML syntax reference can be found at "),_c('a',{attrs:{"href":"http://plantuml.com/guide"}},[_v("plantuml.com/guide")])])]),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("More examples")])]},proxy:true}])},[_v(" "),_c('span',{attrs:{"id":"puml-examples"}},[_c('p',[_c('strong',[_v("Sequence Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/sequence.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Use Case Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/usecase.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Class Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/class.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Activity Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/activity.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Component Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/component.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("State Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/state.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Object Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/object.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Gantt Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/gantt.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Entity Relation Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/entityrelation.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Ditaa Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/ditaa.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Archimate Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/archimate.png"}})],1)])]),_v(" "),_c('p'),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("alt")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The alternative text of the diagram.")])]),_v(" "),_c('tr',[_c('td',[_v("height")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The height of the diagram in pixels.")])]),_v(" "),_c('tr',[_c('td',[_v("name")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The name of the output file.")])]),_v(" "),_c('tr',[_c('td',[_v("src")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The URL of the diagram if your diagram is in another "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".puml")]),_v(" file."),_c('br'),_v("The URL can be specified as absolute or relative references. More info in: "),_c('em',[_c('a',{attrs:{"href":"/userGuide/formattingContents.html#intraSiteLinks"}},[_v("Intra-Site Links")])])])]),_v(" "),_c('tr',[_c('td',[_v("width")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The width of the diagram in pixels."),_c('br'),_v("If both width and height are specified, width takes priority over height. It is to maintain the diagram's aspect ratio.")])])])])]),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("\n")]),_c('span',[_v("@startuml\n")]),_c('span',[_v("alice -> bob ++ : hello\n")]),_c('span',[_v("bob -> bob ++ : self call\n")]),_c('span',[_v("@enduml\n")]),_c('span',[_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('div',[_c('p',[_c('strong',[_v("Sequence Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/sequence.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Use Case Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/usecase.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Class Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/class.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Activity Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/activity.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Component Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/component.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("State Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/state.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Object Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/object.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Gantt Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/gantt.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Entity Relation Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/entityrelation.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Ditaa Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/ditaa.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Archimate Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/archimate.png"}})],1)])])],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Dropdowns")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Action\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")])]),_v("Action"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")])]),_v("Another action"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"separator\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-divider\"")]),_v(">")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")])]),_v("Separated link"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"dropdowns"}},[_c('span',{staticClass:"anchor",attrs:{"id":"dropdowns"}}),_v("Dropdowns"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#dropdowns","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("While the main use case for dropdowns is under navbars, they can also be used as top-level components.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*Action*\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Action"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Another action"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Something else here"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"separator\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-divider\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Separated link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"before\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-info\"")]),_v(">")]),_v("Segmented"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Right aligned list\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Something else here"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn-group d-flex mt-3\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"group\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-danger w-100\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(">")]),_v("Left"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"w-100\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-warning dropdown-toggle w-100\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Action\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"caret\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("ul")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-menu\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-menu\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Action"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Another action"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Something else here"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"separator\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-divider\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Separated link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-success w-100\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(">")]),_v("Right"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('dropdown',{attrs:{"type":"primary"},scopedSlots:_u([{key:"header",fn:function(){return [_c('em',[_v("Action")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])]),_v(" "),_c('li',{staticClass:"dropdown-divider",attrs:{"role":"separator"}}),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Separated link")])])]),_v(" "),_c('dropdown',{attrs:{"type":"info"},scopedSlots:_u([{key:"before",fn:function(){return [_c('button',{staticClass:"btn btn-info",attrs:{"type":"button"}},[_v("Segmented")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("...")])])]),_v(" "),_c('dropdown',{attrs:{"type":"primary","menu-align-right":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Right aligned list")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])])]),_v(" "),_c('div',{staticClass:"btn-group d-flex mt-3",attrs:{"role":"group"}},[_c('a',{staticClass:"btn btn-danger w-100",attrs:{"href":"#dropdown","role":"button"}},[_v("Left")]),_v(" "),_c('dropdown',{staticClass:"w-100",scopedSlots:_u([{key:"button",fn:function(){return [_c('button',{staticClass:"btn btn-warning dropdown-toggle w-100",attrs:{"type":"button"}},[_v("\n Action\n "),_c('span',{staticClass:"caret"})])]},proxy:true},{key:"dropdown-menu",fn:function(){return [_c('ul',{staticClass:"dropdown-menu"},[_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])]),_v(" "),_c('li',{staticClass:"dropdown-divider",attrs:{"role":"separator"}}),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Separated link")])])])]},proxy:true}])}),_v(" "),_c('a',{staticClass:"btn btn-success w-100",attrs:{"href":"#dropdown","role":"button"}},[_v("Right")])],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Dropdowns can also be nested within each other to create multi-level submenus.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*Multi-Level Dropdown*\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Item"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Another item"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*Submenu*\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Item"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Another item"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('dropdown',{attrs:{"type":"primary"},scopedSlots:_u([{key:"header",fn:function(){return [_c('em',[_v("Multi-Level Dropdown")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Item")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another item")])]),_v(" "),_c('dropdown',{scopedSlots:_u([{key:"header",fn:function(){return [_c('em',[_v("Submenu")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Item")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another item")])])])],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("disabled")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether Dropdown can be opened.")])]),_v(" "),_c('tr',[_c('td',[_v("menu-align-right")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether the dropdown list will be right-aligned.")])]),_v(" "),_c('tr',[_c('td',[_v("header"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Dropdown button header text. (Supports inline MarkDown syntax)")])]),_v(" "),_c('tr',[_c('td',[_v("type")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("primary")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("danger")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("info")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("warning")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("success")]),_v(".")])])])])]),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" You may refer to "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/4.0/components/buttons/"}},[_v("this documentation")]),_v(" regarding how you can use the "),_c('strong',[_v("Bootstrap buttons")]),_v(", and how to style them.")])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Action\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")])]),_v("Action"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")])]),_v("Another action"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"separator\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-divider\"")]),_v(">")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")])]),_v("Separated link"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('dropdown',{attrs:{"type":"primary"},scopedSlots:_u([{key:"header",fn:function(){return [_v("Action")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])]),_v(" "),_c('li',{staticClass:"dropdown-divider",attrs:{"role":"separator"}}),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Separated link")])])]),_v(" "),_c('dropdown',{attrs:{"type":"info"},scopedSlots:_u([{key:"before",fn:function(){return [_c('button',{staticClass:"btn btn-info",attrs:{"type":"button"}},[_v("Segmented")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("...")])])]),_v(" "),_c('p'),_v(" "),_c('div',{staticClass:"btn-group d-flex",attrs:{"role":"group"}},[_c('a',{staticClass:"btn btn-danger w-100",attrs:{"href":"#dropdown","role":"button"}},[_v("Left")]),_v(" "),_c('dropdown',{staticClass:"w-100",scopedSlots:_u([{key:"button",fn:function(){return [_c('button',{staticClass:"btn btn-warning dropdown-toggle w-100",attrs:{"type":"button"}},[_v("\n Action\n "),_c('span',{staticClass:"caret"})])]},proxy:true},{key:"dropdown-menu",fn:function(){return [_c('ul',{staticClass:"dropdown-menu"},[_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])]),_v(" "),_c('li',{staticClass:"dropdown-divider",attrs:{"role":"separator"}}),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Separated link")])])])]},proxy:true}])}),_v(" "),_c('a',{staticClass:"btn btn-success w-100",attrs:{"href":"#dropdown","role":"button"}},[_v("Right")])],1)],1)])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Embeds")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("youtube")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("v40b3ExbM0c")]),_v(")\n")]),_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("youtube")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("http://www.youtube.com/watch?v=v40b3ExbM0c")]),_v(")\n")]),_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("youtube")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("http://youtu.be/v40b3ExbM0c")]),_v(")\n")]),_c('span',[_v("\n")]),_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("powerpoint")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://onedrive.live.com/embed?cid=A5AF047C4CAD67AB&resid=A5AF047C4CAD67AB%212070&authkey=&em=2")]),_v(")\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"embeds"}},[_c('span',{staticClass:"anchor",attrs:{"id":"embeds"}}),_v("Embeds"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#embeds","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("There are easy ways to embed media content such as YouTube videos and PowerPoint slides")]),_v(".")]),_v(" "),_c('h6',{attrs:{"id":"embedding-youtube-videos"}},[_c('span',{staticClass:"anchor",attrs:{"id":"embedding-youtube-videos"}}),_v("Embedding Youtube Videos"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#embedding-youtube-videos","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Here are three ways of embedding YouTube videos and one example of how it will look in the page.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("youtube")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("v40b3ExbM0c")]),_v(")\n")]),_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("youtube")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("http://www.youtube.com/watch?v=v40b3ExbM0c")]),_v(")\n")]),_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("youtube")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("http://youtu.be/v40b3ExbM0c")]),_v(")\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"block-embed block-embed-service-youtube"},[_c('iframe',{attrs:{"type":"text/html","src":"//www.youtube.com/embed/v40b3ExbM0c","frameborder":"0","width":"640","height":"390","webkitallowfullscreen":"","mozallowfullscreen":"","allowfullscreen":""}})])])],1)]),_v(" "),_c('p',[_v("More media blocks, embedding services and additional options can be found in "),_c('a',{attrs:{"href":"https://github.com/rotorz/markdown-it-block-embed"}},[_v("Markdown-it documentation")]),_v(".")]),_v(" "),_c('h6',{attrs:{"id":"embedding-powerpoint-slides-using-the-embed-url-from-powerpoint-online"}},[_c('span',{staticClass:"anchor",attrs:{"id":"embedding-powerpoint-slides-using-the-embed-url-from-powerpoint-online"}}),_v("Embedding Powerpoint Slides (using the embed url from Powerpoint online)"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#embedding-powerpoint-slides-using-the-embed-url-from-powerpoint-online","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Here is an example of embedding a PowerPoint slide deck:")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("powerpoint")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://onedrive.live.com/embed?cid=A5AF047C4CAD67AB&resid=A5AF047C4CAD67AB%212070&authkey=&em=2")]),_v(")\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"block-embed block-embed-service-powerpoint"},[_c('iframe',{attrs:{"type":"text/html","src":"https://onedrive.live.com/embed?cid=A5AF047C4CAD67AB&resid=A5AF047C4CAD67AB%212070&authkey=&em=2&action=embedview&wdAr=1.3333333333333333","frameborder":"0","width":"610","height":"481","webkitallowfullscreen":"","mozallowfullscreen":"","allowfullscreen":""}})])])],1)]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("youtube")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("v40b3ExbM0c")]),_v(")\n")]),_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("youtube")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("http://www.youtube.com/watch?v=v40b3ExbM0c")]),_v(")\n")]),_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("youtube")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("http://youtu.be/v40b3ExbM0c")]),_v(")\n")]),_c('span',[_v("\n")]),_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("powerpoint")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://onedrive.live.com/embed?cid=A5AF047C4CAD67AB&resid=A5AF047C4CAD67AB%212070&authkey=&em=2")]),_v(")\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("Embedded YouTube video:")]),_v(" "),_c('div',{staticClass:"block-embed block-embed-service-youtube"},[_c('iframe',{attrs:{"type":"text/html","src":"//www.youtube.com/embed/v40b3ExbM0c","frameborder":"0","width":"640","height":"390","webkitallowfullscreen":"","mozallowfullscreen":"","allowfullscreen":""}})]),_v(" "),_c('p',[_v("Embedded slide deck:")]),_v(" "),_c('div',{staticClass:"block-embed block-embed-service-powerpoint"},[_c('iframe',{attrs:{"type":"text/html","src":"https://onedrive.live.com/embed?cid=A5AF047C4CAD67AB&resid=A5AF047C4CAD67AB%212070&authkey=&em=2&action=embedview&wdAr=1.3333333333333333","frameborder":"0","width":"610","height":"481","webkitallowfullscreen":"","mozallowfullscreen":"","allowfullscreen":""}})])])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Emoji")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v(":+1: :exclamation: :x: :construction:\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"emoji"}},[_c('span',{staticClass:"anchor",attrs:{"id":"emoji"}}),_v("Emoji"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#emoji","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v(":+1: :exclamation: :x: :construction:\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("👍 ❗️ ❌ 🚧")])])],1)])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" "),_c('a',{attrs:{"href":"https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md"}},[_v("the list of supported emoji")]),_v(".")])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v(":+1: :exclamation: :x: :construction:\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("👍 ❗️ ❌ 🚧\n")])]),_c('p')])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Footnotes")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("**Normal footnotes:**\n")]),_c('span',[_v("Here is a footnote reference,[^1] and another.[^longnote]\n")]),_c('span',[_v("\n")]),_c('span',[_v("[^1]: Here is the footnote. Footnotes will appear at the bottom of the page.\n")]),_c('span',[_v("\n")]),_c('span',[_v("[^longnote]: Here's one with multiple blocks.\n")]),_c('span',[_v(" Subsequent paragraphs are indented to show that they\n")]),_c('span',[_v("belong to the previous footnote.\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"footnotes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"footnotes"}}),_v("Footnotes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#footnotes","onclick":"event.stopPropagation()"}})]),_v(" "),_c('span',{attrs:{"id":"main-example-markbind"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**Normal footnotes:**")]),_v("\n")]),_c('span',[_v("Here is a footnote reference,[^1] and another.[^longnote]\n")]),_c('span',[_v("\n")]),_c('span',[_v("["),_c('span',{pre:true,attrs:{"class":"hljs-symbol"}},[_v("^1")]),_v("]: "),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("Here is the footnote. Footnotes will appear at the bottom of the page.")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("["),_c('span',{pre:true,attrs:{"class":"hljs-symbol"}},[_v("^longnote")]),_v("]: "),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("Here's one with multiple blocks.")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" Subsequent paragraphs are indented to show that they")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("belong to the previous footnote.")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**Inline footnotes:**")]),_v("\n")]),_c('span',[_v("Here is an inline note.^[Inlines notes are easier to write, since\n")]),_c('span',[_v("you don't have to pick an identifier and move down to type the\n")]),_c('span',[_v("note.]\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('strong',[_v("Normal footnotes:")]),_v("\nHere is a footnote reference,"),_c('trigger',{attrs:{"for":"pop:footnotefn-56-1"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-56-1"}},[_v("[1]")])])]),_v(" and another."),_c('trigger',{attrs:{"for":"pop:footnotefn-56-2"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-56-2"}},[_v("[2]")])])])],1),_v(" "),_c('p',[_c('strong',[_v("Inline footnotes:")]),_v("\nHere is an inline note."),_c('trigger',{attrs:{"for":"pop:footnotefn-56-3"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-56-3"}},[_v("[3]")])])])],1)])],1)])]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Normal footnotes won't work when used inside the attributes of markbind components!\n"),_c('br'),_v("\nFor example, it won't work in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("header")]),_v(" attribute of "),_c('a',{attrs:{"href":"/userGuide/components/presentation.html#panels"}},[_v("panels")]),_v(".")])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("**Normal footnotes:**\n")]),_c('span',[_v("Here is a footnote reference,[^1] and another.[^longnote]\n")]),_c('span',[_v("\n")]),_c('span',[_v("[^1]: Here is the footnote. Footnotes will appear at the bottom of the page.\n")]),_c('span',[_v("\n")]),_c('span',[_v("[^longnote]: Here's one with multiple blocks.\n")]),_c('span',[_v(" Subsequent paragraphs are indented to show that they\n")]),_c('span',[_v("belong to the previous footnote.\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_v("\n1 + 1 = 2 ^[Math]\n")])],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Front Matter")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: Binary Search Tree\n")]),_c('span',[_v(" pageNav: 2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"front-matter"}},[_c('span',{staticClass:"anchor",attrs:{"id":"front-matter"}}),_v("Front Matter"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#front-matter","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("You can use a "),_c('em',[_v("Front Matter")]),_v(" section to specify page properties such as the title and keywords of the page.")]),_v(" To specify front matter for a page, insert a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" tag in the following format at the beginning of the page.")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" property1: value1\n")]),_c('span',[_v(" property2: value2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])]),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Here, we set the page "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("title")]),_v(" attribute as "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Binary Search Tree")]),_v(".")],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: Binary Search Tree\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_c('p',[_v("Should you need more expressive formatting, or encounter any issues when formatting the frontmatter, note that the frontmatter follows the "),_c('a',{attrs:{"href":"https://yaml.org/refcard.html"}},[_v("yaml")]),_v(" spec.")])]),_v(" "),_c('p',[_c('strong',[_v("Page properties:")])]),_v(" "),_c('ul',[_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("title")])]),_v(": The title of the page. Will be used as the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" attribute of the HTML page generated.")]),_v(" "),_c('li',[_v("Other properties such as "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("keywords")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("layout")]),_v(", etc. will be explained in other places of this user guide.")])]),_v(" "),_c('div',[_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Note: Page properties that are defined in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" for a particular page will override those defined in the front matter of the page.")])])],1),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: Binary Search Tree\n")]),_c('span',[_v(" pageNav: 2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")])])])])],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Headings")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("### Heading level 3")]),_v("\n")]),_c('span',[_v("...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("###### Heading level 6")]),_v("\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"headings"}},[_c('span',{staticClass:"anchor",attrs:{"id":"headings"}}),_v("Headings"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#headings","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can prepend the heading text with 1-6 "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("#")]),_v(" characters to indicate headings of levels 1-6.")]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("### Heading level 3")]),_v("\n")]),_c('span',[_v("...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("###### Heading level 6")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('h3',{attrs:{"id":"heading-level-3"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-3"}}),_v("Heading level 3"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-3","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("...")]),_v(" "),_c('h6',{attrs:{"id":"heading-level-6"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-6"}}),_v("Heading level 6"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-6","onclick":"event.stopPropagation()"}})])])],1)])]),_v(" "),_c('p',[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" "),_c('strong',[_v("MarkBind auto-generates anchors for all headings.")]),_c('br'),_v("\nIf the heading text is "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Foo Bar (Goo)")]),_v(", the ID of the generated anchor will be "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("foo-bar-goo")]),_v(" (all lower case, special characters omitted, joined by "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v(").")]),_v(" "),_c('p',[_c('small',[_v("Alternative syntax, more info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/basic-syntax#headings"}},[_v("https://www.markdownguide.org/basic-syntax#headings")])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("### Heading level 3")]),_v("\n")]),_c('span',[_v("...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("###### Heading level 6")]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('h3',{attrs:{"id":"heading-level-3-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-3-2"}}),_v("Heading level 3"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-3-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("...")]),_v(" "),_c('h6',{attrs:{"id":"heading-level-6-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-6-2"}}),_v("Heading level 6"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-6-2","onclick":"event.stopPropagation()"}})])])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Horizontal Rules")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("****")]),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("*")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("-----")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__")])])]),_v("\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"horizontal-rules"}},[_c('span',{staticClass:"anchor",attrs:{"id":"horizontal-rules"}}),_v("Horizontal Rules"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#horizontal-rules","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Use three or more asterisks ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("***")]),_v("), dashes ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("---")]),_v("), or underscores ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("___")]),_v(") to indicate a horizontal line.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("****")]),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("*")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("-----")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__")])])]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('hr'),_v(" "),_c('hr'),_v(" "),_c('hr')])],1)]),_v(" "),_c('h3',{attrs:{"id":"different-types-of-horizontal-rules"}},[_c('span',{staticClass:"anchor",attrs:{"id":"different-types-of-horizontal-rules"}}),_v("Different Types Of Horizontal Rules"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#different-types-of-horizontal-rules","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Add additional classes to modify the style, thickness, and color of a horizontal line.")]),_v(" "),_c('p',[_v("Available style classes:")]),_v(" "),_c('ul',[_c('li',[_v("dotted")]),_v(" "),_c('li',[_v("dashed")]),_v(" "),_c('li',[_v("double")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("--- {.dotted}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.dashed}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.double}\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('hr',{staticClass:"dotted"}),_v(" "),_c('hr',{staticClass:"dashed"}),_v(" "),_c('hr',{staticClass:"double"})])],1)]),_v(" "),_c('p',[_v("Available size classes:")]),_v(" "),_c('ul',[_c('li',[_v("thick")]),_v(" "),_c('li',[_v("thick-1")]),_v(" "),_c('li',[_v("thick-2")]),_v(" "),_c('li',[_v("thick-3")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("--- {.thick}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.thick-1}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.thick-2}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.thick-3}\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('hr',{staticClass:"thick"}),_v(" "),_c('hr',{staticClass:"thick-1"}),_v(" "),_c('hr',{staticClass:"thick-2"}),_v(" "),_c('hr',{staticClass:"thick-3"})])],1)]),_v(" "),_c('p',[_v("Available color classes (use any of the available BootStrap border color classes):")]),_v(" "),_c('ul',[_c('li',[_v("border-info")]),_v(" "),_c('li',[_v("border-primary")]),_v(" "),_c('li',[_v("etc")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("--- {.border-primary}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.border-secondary}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.border-danger}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.border-info}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.border-success}\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('hr',{staticClass:"border-primary"}),_v(" "),_c('hr',{staticClass:"border-secondary"}),_v(" "),_c('hr',{staticClass:"border-danger"}),_v(" "),_c('hr',{staticClass:"border-info"}),_v(" "),_c('hr',{staticClass:"border-success"})])],1)]),_v(" "),_c('p',[_v("Add a comibnation of the above classes to further customize the style of a horizontal line.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("--- {.dashed .thick-3}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.double .border-secondary}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.dotted .thick-1 .border-primary}\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('hr',{staticClass:"dashed thick-3"}),_v(" "),_c('hr',{staticClass:"double border-secondary"}),_v(" "),_c('hr',{staticClass:"dotted thick-1 border-primary"})])],1)]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("****")]),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("*")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("-----")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__")])])]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('hr')])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Icons")])]),_v(" "),_c('div',[_c('p',[_c('code',{pre:true},[_v(":"),_c('span'),_v("glyphicon-hand-right:")]),_v(" "),_c('code',{pre:true},[_v(":"),_c('span'),_v("fab-github:")]),_v(" "),_c('code',{pre:true},[_v(":"),_c('span'),_v("fas-home:")])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"icons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"icons"}}),_v("Icons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#icons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('small',[_c('span',{staticClass:"dimmed"},[_v("Acknowledgement: Font Awesome icons are provided by "),_c('a',{attrs:{"href":"https://fontawesome.com/"}},[_v("Font Awesome")]),_v(" under their "),_c('a',{attrs:{"href":"https://fontawesome.com/license"}},[_v("free license")]),_v(", Glyphicons are provided by "),_c('a',{attrs:{"href":"https://glyphicons.com/"}},[_v("Glyphicons")]),_v(" via "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/3.3/"}},[_v("Bootstrap 3")]),_v(", "),_c('a',{attrs:{"href":"https://octicons.github.com"}},[_v("Octicons")]),_v(" are copyright of GitHub, and Material icons are provided by "),_c('a',{attrs:{"href":"https://fonts.google.com/icons"}},[_v("Google Fonts")]),_v(" via "),_c('a',{attrs:{"href":"https://www.npmjs.com/package/material-icons"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("material-icons")]),_v(" by Ravindra Marella")]),_v(" under the "),_c('a',{attrs:{"href":"https://www.apache.org/licenses/LICENSE-2.0.html"}},[_v("Apache license 2.0")]),_v(".")])])]),_v(" "),_c('p',[_v("MarkBind supports using Font Icons provided by Font Awesome, Glyphicons and GitHub's Octicons.")]),_v(" "),_c('div',[_c('box',{attrs:{"border-left-color":"#00B0F0"}},[_c('p',[_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-lightbulb",attrs:{"aria-hidden":"true"}})]),_v("\nThe advantage of font icons over emojis is font icons can be "),_c('em',[_v("styled")]),_v(" to fit your needs. e.g.,")]),_v(" "),_c('ul',[_c('li',[_v("emoji: "),_c('span',{staticStyle:{"color":"purple"}},[_v("Don't judge the 📖 by it's cover! 👎")])]),_v(" "),_c('li',[_v("font icons: "),_c('span',{staticStyle:{"color":"purple"}},[_v("Don't judge the "),_c('span',{staticClass:"fas fa-book",attrs:{"aria-hidden":"true"}}),_v(" by it's cover! "),_c('span',{staticClass:"fas fa-thumbs-down",attrs:{"aria-hidden":"true"}})])])])])],1),_v(" "),_c('box',{attrs:{"type":"important"}},[_c('p',[_v("The syntax for icons has changed, and the earlier "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{{ prefix_name }}")]),_v(" syntax has been deprecated. "),_c('br'),_v("\nPlease use the new "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(":prefix-name:")]),_v(" syntax instead.")])]),_v(" "),_c('h6',{attrs:{"id":"using-font-awesome-icons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-font-awesome-icons"}}),_v("Using Font Awesome Icons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-font-awesome-icons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('ol',[_c('li',[_c('p',[_v("Decide which icon you want to use from the "),_c('a',{attrs:{"href":"https://fontawesome.com/icons?d=gallery&m=free"}},[_v("list of available icons")]),_v(".")])]),_v(" "),_c('li',[_c('p',[_v("Construct the MarkBind name for the selected icon by adding the "),_c('em',[_v("type prefix")]),_v(".\nNote: Font Awesome has three different styles for their icons, each with their own type prefix. Here is an example from each type:")]),_v(" "),_c('ul',[_c('li',[_c('em',[_v("Solid")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fas-")]),_v(") e.g., "),_c('span',{staticClass:"fas fa-file-code",attrs:{"aria-hidden":"true"}}),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("file-code")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fas-file-code")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Regular")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("far-")]),_v(") e.g., "),_c('span',{staticClass:"far fa-file-code",attrs:{"aria-hidden":"true"}}),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("file-code")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("far-file-code")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Brands")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fab-")]),_v("): e.g., "),_c('span',{staticClass:"fab fa-github-alt",attrs:{"aria-hidden":"true"}}),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("github-alt")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fab-github-alt")]),_v(")")])])]),_v(" "),_c('li',[_c('p',[_v("Insert MarkBind name for the icon enclosed within colons to get the icon in your page."),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Create a **branch**")]),_c('code',{pre:true},[_v(":"),_c('span'),_v("fas-code-branch: now!")]),_v(" → Create a "),_c('strong',[_v("branch")]),_v(" "),_c('span',{staticClass:"fas fa-code-branch",attrs:{"aria-hidden":"true"}}),_v(" now!")])])]),_v(" "),_c('h6',{attrs:{"id":"using-glyphicons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-glyphicons"}}),_v("Using Glyphicons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-glyphicons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('ol',[_c('li',[_v("Decide which icon you want to use from "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/3.3/components/#glyphicons"}},[_v("list of provided glyphicons")]),_v(".")]),_v(" "),_c('li',[_v("Insert the name for the icon enclosed within colons to get the icon in your page."),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Move to the right!")]),_c('code',{pre:true},[_v(":"),_c('span'),_v("glyphicon-hand-right:")]),_v(" → Move to the right! "),_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}})])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('p',[_c('code',{pre:true},[_v(":"),_c('span'),_v("glyphicon-hand-right:")]),_v(" "),_c('code',{pre:true},[_v(":"),_c('span'),_v("fab-github:")]),_v(" "),_c('code',{pre:true},[_v(":"),_c('span'),_v("fas-home:")])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fas fa-home",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fas fa-home",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('span',{staticStyle:{"color":"red"}},[_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fas fa-home",attrs:{"aria-hidden":"true"}})])])]),_c('p'),_v(" "),_c('h6',{attrs:{"id":"using-octicons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-octicons"}}),_v("Using Octicons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-octicons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('ol',[_c('li',[_v("Decide which icon you want to use from "),_c('a',{attrs:{"href":"https://octicons.github.com"}},[_v("list of available Octicons")]),_v(".")]),_v(" "),_c('li',[_v("Insert the name for the icon enclosed within colons to get the icon in your page."),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Merge a **pull request** :octicon-git-pull-request:")]),_v(" → Merge a "),_c('strong',[_v("pull request")]),_v(" "),_c('svg',{staticClass:"octicon octicon-git-pull-request",attrs:{"version":"1.1","width":"16","height":"16","viewBox":"0 0 16 16","aria-hidden":"true"}},[_c('path',{attrs:{"fill-rule":"evenodd","d":"M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"}})])]),_v(" "),_c('li',[_v("You may also append "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("~class-name")]),_v(" to the end of the octicon name to add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("class=\"class-name\"")]),_v(" property to your Octicon (e.g. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(":octicon-git-pull-request~icon-large-red:")]),_v(" will generate an Octicon of class "),_c('em',[_v("icon-large-red")]),_v("). You may then add corresponding CSS to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{root}/_markbind/layouts/{layout-name}/styles.css")]),_v(" to customize the style of your Octicon.")]),_v(" "),_c('li',[_v("If your background is dark, you may use "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(":octiconlight-*:")]),_v(" to render the icon as white.")])]),_v(" "),_c('h6',{attrs:{"id":"using-material-icons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-material-icons"}}),_v("Using Material Icons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-material-icons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('ol',[_c('li',[_c('p',[_v("Decide which icon you want to use from "),_c('a',{attrs:{"href":"https://fonts.google.com/icons"}},[_v("list of available icons")]),_v(".")])]),_v(" "),_c('li',[_c('p',[_v("Construct the MarkBind name for the selected icon by writing the icon name in "),_c('em',[_v("lowercase letters only")]),_v(", replacing any spaces between the words in the name with "),_c('em',[_v("dashes")]),_v(" ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v("), then adding the "),_c('em',[_v("type prefix")]),_v(".\nNote: Google has five different styles for their Material icons, each with their own type prefix. Here is an example from each type:")]),_v(" "),_c('ul',[_c('li',[_c('em',[_v("Filled")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mif-")]),_v(") e.g. "),_c('span',{staticClass:"material-icons align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mif-perm-media")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Outlined")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mio-")]),_v(") e.g., "),_c('span',{staticClass:"material-icons-outlined align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mio-perm-media")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Rounded")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mir-")]),_v("): e.g., "),_c('span',{staticClass:"material-icons-round align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mir-perm-media")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Sharp")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mis-")]),_v("): e.g., "),_c('span',{staticClass:"material-icons-sharp align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mis-perm-media")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Two tone")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mit-")]),_v("): e.g., "),_c('span',{staticClass:"material-icons-two-tone align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mit-perm-media")]),_v(")")])])]),_v(" "),_c('li',[_c('p',[_v("Insert the name for the icon enclosed within colons to get the icon in your page."),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Download from Cloud :mio-cloud-download:")]),_v(" → Download from Cloud "),_c('span',{staticClass:"material-icons-outlined align-middle",attrs:{"aria-hidden":"true"}},[_v("cloud_download")])])])])],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Images")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("!["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("alt text here")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org/images/logo-lightbackground.png \"title here\"")]),_v(")\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"images"}},[_c('span',{staticClass:"anchor",attrs:{"id":"images"}}),_v("Images"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#images","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("![](https://markbind.org/images/logo-lightbackground.png)\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('a',{attrs:{"href":"https://markbind.org/images/logo-lightbackground.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","alt":""}})])])])],1)]),_v(" "),_c('box',{attrs:{"type":"info"}},[_v("\n URLs can be specified as relative references. More info in: "),_c('i',[_c('a',{attrs:{"href":"#intraSiteLinks"}},[_v("Intra-Site Links")])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("!["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("alt text here")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org/images/logo-lightbackground.png \"title here\"")]),_v(")\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_c('a',{attrs:{"href":"https://markbind.org/images/logo-lightbackground.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","alt":"","title":"title here"}})])])]),_c('p')],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Includes")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"foo.md#bar\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("boilerplate")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("inline")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trim")]),_v(">")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("variable")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"x\"")]),_v(">")])]),_v("5"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("variable")]),_v(">")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(">")])]),_v("\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/reusingContents.html#includes"}},[_c('em',[_v("User Guide → Reusing Contents → Includes")])])])]),_v(" "),_c('h2',{attrs:{"id":"includes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"includes"}}),_v("Includes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#includes","onclick":"event.stopPropagation()"}})]),_v(" "),_c('span',{attrs:{"id":"overview"}},[_c('p',[_c('strong',[_v("MarkBind has a powerful "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" mechanism")]),_v(" which allows you to create documents by combining other content fragments.\n")])]),_c('p'),_v(" "),_c('p',[_c('strong',[_v("You can use "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" tag to include another markdown or HTML document into the current document.")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Including text from a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tip2.md")]),_v(" in another file.")],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("Tip 1. ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tips/tip2.md\"")]),_v(" />")]),_v("\n")]),_c('span',[_v("Tip 3. ...\n")])])])]),_v(" "),_c('p',[_c('strong',[_v("You can "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" a fragment of a file")]),_v(" by specifying the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("#fragment-id")]),_v(" at the end of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" attribute value, provided the fragment is wrapped in a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<div>")]),_v("/"),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<span>")]),_v("/"),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<seg>")]),_v(" tag with the matching "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(".")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Including a fragment from a file:")],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("Some text\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"docs/tips.md#tip-1\"")]),_v(" />")]),_v("\n")]),_c('span',[_v("Some other text\n")])])]),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("docs/tips.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tip-1\"")]),_v(" />")]),_v("\n")]),_c('span',[_v(" Tip 1. ...\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v("Tip 2. ...\n")])])])]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("When setting the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(" of a fragment, be careful not to clash with heading anchor IDs auto-generated by MarkBind. For example, if you have a heading "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("## Some Useful Tips")]),_v(", MarkBind will auto-generate an ID "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("some-useful-tips")]),_v(" for that heading.")])]),_v(" "),_c('box',{attrs:{"border-left-color":"#00B0F0"}},[_c('p',[_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-lightbulb",attrs:{"aria-hidden":"true"}})]),_v(" The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" tag works for any MarBind source file including the "),_c('em',[_v("font matter")]),_v(" section but it may not work in some "),_c('em',[_v("special")]),_v(" files such as the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/variables.md")]),_v(".")])]),_v(" "),_c('p',[_c('strong',[_v("Attributes:")])]),_v(" "),_c('ul',[_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")])]),_v(": specify the source file path.")]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("inline")])]),_v(" (optional): make the included result an inline element. (wrapped in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<span>")]),_v(" tag). e.g.,"),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("The title is "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../docs/summary.md#title\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("inline")]),_v(" />")]),_v(" while ...\n")])])])]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("optional")])]),_v(" (optional): include the file/fragment only if it exists i.e., there will be no error message if the file/fragment does not exist. e.g.,"),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"UserStories.md\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("optional")]),_v(" />")]),_v("\n")])])])]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("trim")])]),_v(" (optional): remove leading and trailing whitespace and newlines from the document before including."),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"UserStories.md#epic\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trim")]),_v(" />")]),_v("\n")])])])]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("omitFrontmatter")])]),_v(" (optional): omit the front matter of the file/fragment from being included (if any)."),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("\n")])])])])]),_v(" "),_c('div',[_c('box',{attrs:{"border-left-color":"#00B0F0"}},[_c('p',[_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-lightbulb",attrs:{"aria-hidden":"true"}})]),_v("\nThe "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" mechanism can be used inside any MarkBind source file (even inside the "),_c('em',[_v("front matter")]),_v(" section) but it will not work inside some "),_c('em',[_v("special")]),_v(" files such as the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/variables.md")]),_v(".")])])],1),_v(" "),_c('h5',{attrs:{"id":"include-inside-an-included-file"}},[_c('span',{staticClass:"anchor",attrs:{"id":"include-inside-an-included-file"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" Inside an Included File"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#include-inside-an-included-file","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Although the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" attribute of an "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" is given "),_c('em',[_v("relative")]),_v(" to the current directory, it is converted to an "),_c('em',[_v("absolute")]),_v(" value "),_c('em',[_v("before")]),_v(" the "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("i.e., the file containing the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")])]),_v("host file")]),_v(" is included from another file.")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Suppose you have a MarkBind project with the following file structure.")],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs"}},[_c('span',[_v("C:/mySite/\n")]),_c('span',[_v(" ├── bookFiles/\n")]),_c('span',[_v(" | ├── book.md\n")]),_c('span',[_v(" | ├── chapter1.md\n")]),_c('span',[_v(" | └── chapter2.md\n")]),_c('span',[_v(" └── reviewFiles/\n")]),_c('span',[_v(" └── review.md\n")])])]),_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("book.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("# My Book")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"chapter1.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"chapter2.md\"")]),_v(" />")])]),_v("\n")])])]),_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("review.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("# My Review")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../bookFiles/book.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_v("...\n")])])]),_c('p',[_v("The content of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter1.md")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter2.md")]),_v(" will be included in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("review.md")]),_v(" (via "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include src=\"../bookFiles/book.md\" />")]),_v(") although "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter1.md")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter2.md")]),_v(" are not in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("reviewFiles")]),_v(" directory. i.e., "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include src=\"chapter1.md\" />")]),_v(" will be interpreted as "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include src=\"c:/mySite/bookFiles/chapter1.md\" />")])])]),_v(" "),_c('p',[_v("In other words, "),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" interprets the reused code relative to the original location of the file, not the location in which it is reused.")])]),_v(" "),_c('hr'),_v(" "),_c('h5',{attrs:{"id":"specifying-variables-in-an-include"}},[_c('span',{staticClass:"anchor",attrs:{"id":"specifying-variables-in-an-include"}}),_v("Specifying Variables in an "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#specifying-variables-in-an-include","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("It is possible to include variables in an "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(".")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Specifying "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("title")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("author")]),_v(" variables in an "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" tag:")],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"article.md\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("variable")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"title\"")]),_v(">")]),_v("My Title"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("variable")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("variable")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"author\"")]),_v(">")]),_v("John Doe"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("variable")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(">")]),_v("\n")])])]),_c('p',[_v("In "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("article.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("# {{ title }}"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v("Author: {{ author }}\n")])])])]),_v(" "),_c('p',[_v("These variables work the same way as variables in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/variables.md")]),_v(", except that they only apply to the included file. They allow the included file to be reused as a template, for different source files using different variable values.")]),_v(" "),_c('p',[_v("You can also specify include variables within the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" tag itself by adding a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("var-")]),_v(" prefix.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Specifying "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("title")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("author")]),_v(" variables inline:")],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"article.md\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("var-title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"My Title\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("var-author")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"John Doe\"")]),_v(" />")]),_v("\n")])])])]),_v(" "),_c('p',[_v("If the same variable is defined in a chain of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v("s (e.g. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("a.md")]),_v(" includes "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("b.md")]),_v(" includes "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("c.md")]),_v("...), variables defined in the top-most "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" will take precedence. Global variables ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/variables.md")]),_v(") will take precedence over any "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" variables.")]),_v(" "),_c('h3',{attrs:{"id":"using-boilerplate-files"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-boilerplate-files"}}),_v("Using Boilerplate Files"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-boilerplate-files","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("If you find duplicating a "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("code that needs to stay relative to the directory in which it used")]),_c('em',[_v("boilerplate code")])]),_v(" fragment in multiple places of your code base, you can use a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boilerplate")]),_v(" file to avoid such duplication.")]),_v(" Note that you cannot use a normal "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" in this case because the code included using a normal "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" stays relative to the original location while boilerplate code needs to be interpreted relative to the location it is being used.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Suppose you have a MarkBind project with the following file structure.")],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs"}},[_c('span',[_v("C:/mySite/\n")]),_c('span',[_v(" ├── chapter1/\n")]),_c('span',[_v(" | ├── chapter.md\n")]),_c('span',[_v(" | ├── text.md\n")]),_c('span',[_v(" | └── exercises.md\n")]),_c('span',[_v(" ├── chapter2/\n")]),_c('span',[_v(" | ├── chapter.md\n")]),_c('span',[_v(" | ├── text.md\n")]),_c('span',[_v(" | └── exercises.md\n")]),_c('span',[_v(" └── book.md\n")])])]),_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("book.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("# My Book")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"chapter1/chapter.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"chapter2/chapter.md\"")]),_v(" />")])]),_v("\n")])])]),_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter1/chapter.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Text")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Exercises")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exercises.md\"")]),_v(" />")])]),_v("\n")])])]),_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter2/chapter.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Text")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Exercises")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exercises.md\"")]),_v(" />")])]),_v("\n")])])]),_c('p',[_v("As you can see, both "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter.md")]),_v(" files are exactly the same. If we were to use only one of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter.md")]),_v(" files and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" it twice in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("book.md")]),_v(", we'll end up with the same chapter content duplicated twice, which is not what we want. In other words, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter.md")]),_v(" contains boilerplate code that needs to be interpreted relative to where it is applied, once relative to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter1")]),_v(" directory and once relative to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter2")]),_v(" directory.")])]),_v(" "),_c('p',[_v("To use a code fragment as a boilerplate file,")]),_v(" "),_c('ol',[_c('li',[_v("Put the code in a file inside the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/boilerplates")]),_v(" directory.")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" the file "),_c('em',[_v("as if")]),_v(" a copy of it exists in any directory you want it to applied, but add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boilerplate")]),_v(" attribute to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" tag.")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Here's how you can use a boilerplate file to avoid duplicating the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter.md")]),_v(":")],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs"}},[_c('span',[_v("C:/mySite/\n")]),_c('span',[_v(" ├── _markbind/boilerplates/\n")]),_c('span',[_v(" | └── chapter.md\n")]),_c('span',[_v(" ├── chapter1/\n")]),_c('span',[_v(" | ├── text.md\n")]),_c('span',[_v(" | └── exercises.md\n")]),_c('span',[_v(" ├── chapter2/\n")]),_c('span',[_v(" | ├── text.md\n")]),_c('span',[_v(" | └── exercises.md\n")]),_c('span',[_v(" └── book.md\n")])])]),_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("book.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("# My Book")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"chapter1/chapter.md\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("boilerplate")]),_v(" />")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"chapter2/chapter.md\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("boilerplate")]),_v(" />")])]),_v("\n")])])]),_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/boilerplates/chapter.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Text")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Exercises")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exercises.md\"")]),_v(" />")])]),_v("\n")])])]),_c('p',[_v("Consider the line "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include src=\"chapter1/chapter.md\" boilerplate />")]),_v(". Note how you can use "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src=\"chapter1/chapter.md\"")]),_v(" there is no such file. MarkBind will use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter.md")]),_v(" file "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("/_markbind/boilerplates/")]),_v(" but interpret it as if the file exist in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter1")]),_v(" directory (i.e., interpret the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter1.md")]),_v(" code relative to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter1")]),_v(" directory.")]),_v(" "),_c('p',[_v("Similarly, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include src=\"chapter2/chapter.md\" boilerplate />")]),_v(" interprets the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter.md")]),_v(" relative to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter2")]),_v(" directory.")])]),_v(" "),_c('p',[_v("If you have many boilerplate files, you can organize them into directories inside the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind")]),_v(" directory. When using such boilerplate files, you need to replace "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boilerplate")]),_v(" attribute with "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boilerplate=\"<path to file relative to _markbind/boilerplates>\"")]),_v(".")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Suppose the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter.md")]),_v(" is places in a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("book")]),_v(" directory:")],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs"}},[_c('span',[_v("C:/mySite/\n")]),_c('span',[_v(" └── _markbind/boilerplates/\n")]),_c('span',[_v(" └── book/\n")]),_c('span',[_v(" └── chapter.md\n")]),_c('span',[_v("\n")])])]),_c('p',[_v("It needs to be used as follows:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"chapter1/chapter.md\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("boilerplate")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"book/chapter.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"chapter2/chapter.md\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("boilerplate")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"book/chapter.md\"")]),_v(" />")])]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"foo.md#bar\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("boilerplate")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("inline")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trim")]),_v(">")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("variable")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"x\"")]),_v(">")])]),_v("5"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("variable")]),_v(">")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(">")])]),_v("\n")])])])])],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Keywords")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"keyword d-none\"")]),_v(">")]),_v("regress"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(">")]),_v("\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"keywords"}},[_c('span',{staticClass:"anchor",attrs:{"id":"keywords"}}),_v("Keywords"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#keywords","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('span',{staticClass:"keyword d-none"},[_v("regress")]),_v(" "),_c('span',{staticClass:"keyword d-none"},[_v("regression testing")])]),_v(" "),_c('p',[_c('strong',[_v("You can also specify additional keywords to be indexed under a heading")]),_v(" by tagging the words with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("keyword")]),_v(" class. Those keywords will be linked to the heading immediately above it. If you want to index a keyword without rendering it in the page, add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("d-none")]),_v(" as a class.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("#### Developer Testing\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"keyword d-none\"")]),_v(">")]),_v("regress"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"keyword d-none\"")]),_v(">")]),_v("regression testing"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("This is good for catching "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"keyword\"")]),_v(">")]),_v("regressions"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(">")]),_v(".\n")])])]),_c('p',[_c('span',{staticClass:"fas fa-arrow-down",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('box',[_c('p',[_c('big',[_c('strong',[_v("Developer Testing")])]),_c('br')],1),_v(" "),_c('p',[_v("This is good for catching "),_c('span',{staticClass:"keyword"},[_v("regressions")]),_v(".")])])],1),_v(" "),_c('p',[_c('strong',[_v("You can also set additional keywords to be indexed for an entire page")]),_v(" using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("keywords")]),_v(" attribute inside the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<frontmatter>")]),_v(" of that page.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" keywords: regress, regression testing, regressions\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v("...\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"keyword d-none\"")]),_v(">")]),_v("regress"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(">")]),_v("\n")])])])])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Line Breaks")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("This is the second sentence."),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")])]),_v("\n")]),_c('span',[_v("This should be on a new line.\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"line-breaks"}},[_c('span',{staticClass:"anchor",attrs:{"id":"line-breaks"}}),_v("Line Breaks"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#line-breaks","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("The preferred way to indicate line breaks is to use a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<br>")]),_v(" tag.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("This is the second sentence."),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")])]),_v("\n")]),_c('span',[_v("This should be on a new line.\n")]),_c('span',[_v("This will not be in a new line.\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("This is the second sentence."),_c('br'),_v("\nThis should be on a new line.\nThis will not be in a new line.")])])],1)])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Links")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("MarkBind home is at ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("here")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org")]),_v(").\n")]),_c('span',[_v("\n")]),_c('span',[_v("MarkBind home is at ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("here")]),_v("]["),_c('span',{pre:true,attrs:{"class":"hljs-symbol"}},[_v("1")]),_v("].\n")]),_c('span',[_v("\n")]),_c('span',[_v("["),_c('span',{pre:true,attrs:{"class":"hljs-symbol"}},[_v("1")]),_v("]: "),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org")]),_v("\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"links"}},[_c('span',{staticClass:"anchor",attrs:{"id":"links"}}),_v("Links"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#links","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Basic style:")]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("MarkBind home is at ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("here")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org")]),_v(").\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("MarkBind home is at "),_c('a',{attrs:{"href":"https://markbind.org"}},[_v("here")]),_v(".")])])],1)])]),_v(" "),_c('p',[_c('em',[_v("Reference style")]),_v(" links (i.e., specify the URL in a separate place):")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("MarkBind home is at ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("here")]),_v("]["),_c('span',{pre:true,attrs:{"class":"hljs-symbol"}},[_v("1")]),_v("].\n")]),_c('span',[_v("\n")]),_c('span',[_v("["),_c('span',{pre:true,attrs:{"class":"hljs-symbol"}},[_v("1")]),_v("]: "),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("MarkBind home is at "),_c('a',{attrs:{"href":"https://markbind.org"}},[_v("here")]),_v(".")])])],1)]),_v(" "),_c('p',[_c('small',[_v("More info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/basic-syntax#links"}},[_v("https://www.markdownguide.org/basic-syntax#links")])])]),_v(" "),_c('h4',{attrs:{"id":"intra-site-links"}},[_c('span',{staticClass:"anchor",attrs:{"id":"intra-site-links"}}),_v("Intra-Site Links"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#intra-site-links","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{attrs:{"id":"intraSiteLinks"}},[_c('p',[_v("Links to files of the generated site (e.g., an HTML page or an image file) can be specified either as relative paths or absolute paths.")]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Auto-conversion of extension")])])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_v("You may link to markdown files using its original extension ("),_c('strong',[_v(".md")]),_v(") as it will automatically be converted to a html extension ("),_c('strong',[_v(".html")]),_v(") when the site is generated.")]),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Click [here](index.md)")]),_v(" --- "),_c('em',[_v("auto-conversion")]),_v(" ---> "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Click [here](index.html)")])],1),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("If you wish to disable the auto-conversion, you may use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-convert")]),_v(" attribute in your link.")]),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Click [here](index.md){no-convert}")])],1)])],1),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Absolute paths")])])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_v("Links should start with "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{{ baseUrl }}")]),_v(" (which represents the root directory of the site).")]),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Here's how to specify a link to (1) a page, and (2) an image, using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{{ baseUrl }}")]),_v(":")],1),_v(" "),_c('ol',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Click [here]({{ baseUrl }}/userGuide/reusingContents.html).")])]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("![]({{ baseUrl }}/images/preview.png)")])])]),_v(" "),_c('box',{attrs:{"type":"important"}},[_c('p',[_v("To ensure that links in the "),_c('code',{pre:true},[_v("_markbind/")]),_v(" folder work correctly across the entire site, they should be written as absolute paths, prepended with "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{{ baseUrl }}")]),_v(".")])])],1),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Relative paths")])])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Assuming that we have the following folder structure:")],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("C:\\course\\\n")]),_c('span',[_v(" ├── textbook\\\n")]),_c('span',[_v(" | ├── subsite.md\n")]),_c('span',[_v(" | ├── image.png\n")]),_c('span',[_v(" | └── site.json\n")]),_c('span',[_v(" ├── index.md\n")]),_c('span',[_v(" └── site.json\n")])])]),_c('p',[_v("Within "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("textbook/subsite.md")]),_v(", we can refer to the image using:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("img")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"image.png\"")]),_v(" />")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- or -->")]),_v("\n")]),_c('span',[_v("![](image.png)\n")])])]),_c('p',[_v("Within "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("index.md")]),_v(", we can also display the image using")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("img")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"textbook/image.png\"")]),_v(" />")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- or -->")]),_v("\n")]),_c('span',[_v("![](textbook/image.png)\n")])])]),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Relative links to resources (e.g. images, hrefs) should be valid "),_c('strong',[_v("relative to the file where the link is defined")]),_v(".")]),_v(" "),_c('p',[_v("In the example above, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("image.png")]),_v(" is in the same directory as "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("subsite.md")]),_v(". Thus, the correct path is "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("image.png")]),_v(" and not "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("textbook/image.png")]),_v(".")])])],1),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Link validation")])])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_v("Links will be validated when generating a site and a warning will be displayed in the console for every link that is invalid.")]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_c('strong',[_v("Disabling link validation")])]),_v(" "),_c('p',[_v("Link validation is enabled by default.")]),_v(" "),_c('p',[_v("If you wish to only disable validation for a "),_c('strong',[_v("specific link")]),_v(", you may use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-validation")]),_v(" attribute.")]),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Click [here](index.md){no-validation}")])],1),_v(" "),_c('p',[_v("However, if you wish to disable this feature "),_c('strong',[_v("entirely")]),_v(", you may simply modify your "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" like "),_c('trigger',{attrs:{"for":"pop:global-intralink-disable","placement":"bottom","trigger":"click"}},[_v(" this ")]),_v(".")],1),_v(" "),_c('b-modal',{ref:"pop:global-intralink-disable",attrs:{"id":"pop:global-intralink-disable","hide-footer":"","size":"","modal-class":"mb-zoom"},scopedSlots:_u([{key:"modal-title",fn:function(){return [_v("Disabling global intra-site link validation in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")])]},proxy:true}])},[_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs js"}},[_c('span',[_v("...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"intrasiteLinkValidation\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"enabled\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-literal"}},[_v("false")]),_v("\n")]),_c('span',[_v("},\n")]),_c('span',[_v("...\n")])])])])])],1)],1)]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("MarkBind home is at ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("here")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org")]),_v(").\n")]),_c('span',[_v("\n")]),_c('span',[_v("MarkBind home is at ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("here")]),_v("]["),_c('span',{pre:true,attrs:{"class":"hljs-symbol"}},[_v("1")]),_v("].\n")]),_c('span',[_v("\n")]),_c('span',[_v("["),_c('span',{pre:true,attrs:{"class":"hljs-symbol"}},[_v("1")]),_v("]: "),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org")]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("MarkBind home is at "),_c('a',{attrs:{"href":"https://markbind.org"}},[_v("here")]),_v(".\n")])]),_c('p')])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Lists")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" 1.")]),_v(" Sub item 1.1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" 1.")]),_v(" Sub item 1.2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" item 2.1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" [ ] Item 3\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" [x] Item 4\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" ( ) Item 5\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"lists"}},[_c('span',{staticClass:"anchor",attrs:{"id":"lists"}}),_v("Lists"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#lists","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Unordered lists:")])])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Sub item 1.1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Sub item 1.2"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" Second line")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" * Sub item 1.2.1")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("* Item 2")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("* Item 3")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ul',[_c('li',[_v("Item 1\n"),_c('ul',[_c('li',[_v("Sub item 1.1")]),_v(" "),_c('li',[_v("Sub item 1.2"),_c('br'),_v("\nSecond line\n"),_c('ul',[_c('li',[_v("Sub item 1.2.1")])])])])]),_v(" "),_c('li',[_v("Item 2")]),_v(" "),_c('li',[_v("Item 3")])])])],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Ordered lists:")])])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" 1.")]),_v(" Sub item 1.1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" 1.")]),_v(" Sub item 1.2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 3\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ol',[_c('li',[_v("Item 1\n"),_c('ol',[_c('li',[_v("Sub item 1.1")]),_v(" "),_c('li',[_v("Sub item 1.2")])])]),_v(" "),_c('li',[_v("Item 2")]),_v(" "),_c('li',[_v("Item 3")])])])],1)]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_v("\nYou can also start an ordered list at a particular number by changing the\n"),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"popover"}},[_v("\nfirst number\n"),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_c('div',{staticStyle:{"text-align":"center","margin-bottom":"5px"}},[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])],1),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("10.")]),_v(" Item 1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" 1.")]),_v(" Sub item 1.1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" 1.")]),_v(" Sub item 1.2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 2\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ol',{staticClass:"pl-0 ml-0",attrs:{"start":"10"}},[_c('li',[_v("Item 1")]),_v(" "),_c('li',[_v("Sub item 1.1")]),_v(" "),_c('li',[_v("Sub item 1.2")]),_v(" "),_c('li',[_v("Item 2")])])])],1)])])]),_v("!\n")]),_v(" "),_c('p',[_c('small',[_v("More info on above list types: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/basic-syntax#lists"}},[_v("https://www.markdownguide.org/basic-syntax#lists")])])]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Task lists")])]),_v(" (from GFMD):")]),_v(" "),_c('span',{attrs:{"id":"main-example-gfmd"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" [ ] Item 1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" -")]),_v(" [ ] Sub item 1.1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" -")]),_v(" [x] Sub item 1.2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" [x] Item 2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" [ ] Item 3\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ul',{staticClass:"contains-task-list"},[_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"type":"checkbox"}}),_v(" Item 1\n"),_c('ul',{staticClass:"contains-task-list"},[_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"type":"checkbox"}}),_v(" Sub item 1.1")]),_v(" "),_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"checked":"","type":"checkbox"}}),_v(" Sub item 1.2")])])]),_v(" "),_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"checked":"","type":"checkbox"}}),_v(" Item 2")]),_v(" "),_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"type":"checkbox"}}),_v(" Item 3")])])])],1)])]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Radio-button lists:")])])]),_v(" "),_c('div',{attrs:{"id":"main-example-markbind"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" ( ) Item 1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" ( ) Item 2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" (x) Item 3\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ul',{staticClass:"radio-list",attrs:{"radio-group":"e5b87"}},[_c('li',{staticClass:"radio-list-item"},[_c('label',[_c('input',{staticClass:"radio-list-input",attrs:{"name":"e5b87","type":"radio"}}),_v(" Item 1")])]),_v(" "),_c('li',{staticClass:"radio-list-item"},[_c('label',[_c('input',{staticClass:"radio-list-input",attrs:{"name":"e5b87","type":"radio"}}),_v(" Item 2")])]),_v(" "),_c('li',{staticClass:"radio-list-item"},[_c('label',[_c('input',{staticClass:"radio-list-input",attrs:{"checked":"","name":"e5b87","type":"radio"}}),_v(" Item 3")])])])])],1)])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" 1.")]),_v(" Sub item 1.1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" 1.")]),_v(" Sub item 1.2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" item 2.1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" [ ] Item 3\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" [x] Item 4\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" ( ) Item 5\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('ol',[_c('li',[_v("Item 1\n"),_c('ol',[_c('li',[_v("Sub item 1.1")]),_v(" "),_c('li',[_v("Sub item 1.2")])])])]),_v(" "),_c('ul',[_c('li',[_v("Item 2\n"),_c('ul',[_c('li',[_v("item 2.1")])])])]),_v(" "),_c('ul',{staticClass:"contains-task-list",attrs:{"radio-group":"890e1"}},[_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"type":"checkbox"}}),_v(" Item 3")]),_v(" "),_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"checked":"","type":"checkbox"}}),_v(" Item 4")]),_v(" "),_c('li',{staticClass:"radio-list-item"},[_c('label',[_c('input',{staticClass:"radio-list-input",attrs:{"name":"890e1","type":"radio"}}),_v(" Item 5\n")])])])])],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Math Formulae")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("\n")]),_c('span',[_v("Solve the following simultaneous equations:\n")]),_c('span',[_v("\n")]),_c('span',[_v("\\[ 3x + y = 11 \\] (1)\n")]),_c('span',[_v("\n")]),_c('span',[_v("\\[\\frac{2x}{3} + \\frac{2y}{3} = 8\\] (2)\n")]),_c('span',[_v("\n")]),_c('span',[_v("Euler's equation \\( e^{i\\pi}+1=0 \\) is a beautiful equation.\n")]),_c('span',[_v("\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"math-formulae"}},[_c('span',{staticClass:"anchor",attrs:{"id":"math-formulae"}}),_v("Math Formulae"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#math-formulae","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Markbind supports typesetting TeX math equations. "),_c('a',{attrs:{"href":"https://katex.org"}},[_v("KaTeX")]),_v(" is used as a fast math renderer.")]),_v(" "),_c('p',[_v("Insert "),_c('strong',[_v("inline")]),_v(" equations by enclosing them in round brackets "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\\( ... \\)")]),_v(".")]),_v(" "),_c('p',[_v("Insert "),_c('strong',[_v("display")]),_v(" equations by enclosing them in square brackets "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\\[ ... \\]")]),_v(".")]),_v(" "),_c('p',[_v("Insert numbered "),_c('strong',[_v("display")]),_v(" equations by enclosing the equation square brackets and the equation number in curly brackets "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\\[ ... \\] (1)")]),_v(".")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("Solve the following simultaneous equations:\n")]),_c('span',[_v("\n")]),_c('span',[_v("\\[ 3x + y = 11 \\] (1)\n")]),_c('span',[_v("\n")]),_c('span',[_v("\\[\\frac{2x}{3} + \\frac{2y}{3} = 8\\] (2)\n")]),_c('span',[_v("\n")]),_c('span',[_v("Euler's equation \\( e^{i\\pi}+1=0 \\) is a beautiful equation.\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Solve the following simultaneous equations:")]),_v(" "),_c('section',{staticClass:"eqno"},[_c('eqn',{pre:true},[_c('span',{pre:true,attrs:{"class":"katex-display"}},[_c('span',{pre:true,attrs:{"class":"katex"}},[_c('span',{pre:true,attrs:{"class":"katex-mathml"}},[_c('math',{pre:true,attrs:{"xmlns":"http://www.w3.org/1998/Math/MathML","display":"block"}},[_c('semantics',{pre:true},[_c('mrow',{pre:true},[_c('mn',{pre:true},[_v("3")]),_c('mi',{pre:true},[_v("x")]),_c('mo',{pre:true},[_v("+")]),_c('mi',{pre:true},[_v("y")]),_c('mo',{pre:true},[_v("=")]),_c('mn',{pre:true},[_v("11")])],1),_c('annotation',{pre:true,attrs:{"encoding":"application/x-tex","v-pre":""}},[_v(" 3x + y = 11 ")])],1)],1)],1),_c('span',{pre:true,attrs:{"class":"katex-html","aria-hidden":"true"}},[_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.72777em;vertical-align:-0.08333em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("3")]),_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("x")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.625em;vertical-align:-0.19444em;"}}),_c('span',{pre:true,attrs:{"class":"mord mathnormal","style":"margin-right:0.03588em;"}},[_v("y")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.64444em;vertical-align:0em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("1")]),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("1")])])])])])]),_c('span',[_v("(1)")])],1),_v(" "),_c('section',{staticClass:"eqno"},[_c('eqn',{pre:true},[_c('span',{pre:true,attrs:{"class":"katex-display"}},[_c('span',{pre:true,attrs:{"class":"katex"}},[_c('span',{pre:true,attrs:{"class":"katex-mathml"}},[_c('math',{pre:true,attrs:{"xmlns":"http://www.w3.org/1998/Math/MathML","display":"block"}},[_c('semantics',{pre:true},[_c('mrow',{pre:true},[_c('mfrac',{pre:true},[_c('mrow',{pre:true},[_c('mn',{pre:true},[_v("2")]),_c('mi',{pre:true},[_v("x")])],1),_c('mn',{pre:true},[_v("3")])],1),_c('mo',{pre:true},[_v("+")]),_c('mfrac',{pre:true},[_c('mrow',{pre:true},[_c('mn',{pre:true},[_v("2")]),_c('mi',{pre:true},[_v("y")])],1),_c('mn',{pre:true},[_v("3")])],1),_c('mo',{pre:true},[_v("=")]),_c('mn',{pre:true},[_v("8")])],1),_c('annotation',{pre:true,attrs:{"encoding":"application/x-tex","v-pre":""}},[_v("\\frac{2x}{3} + \\frac{2y}{3} = 8")])],1)],1)],1),_c('span',{pre:true,attrs:{"class":"katex-html","aria-hidden":"true"}},[_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:2.00744em;vertical-align:-0.686em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mopen nulldelimiter"}}),_c('span',{pre:true,attrs:{"class":"mfrac"}},[_c('span',{pre:true,attrs:{"class":"vlist-t vlist-t2"}},[_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:1.32144em;"}},[_c('span',{pre:true,attrs:{"style":"top:-2.314em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord"}},[_v("3")])])]),_c('span',{pre:true,attrs:{"style":"top:-3.23em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"frac-line","style":"border-bottom-width:0.04em;"}})]),_c('span',{pre:true,attrs:{"style":"top:-3.677em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord"}},[_v("2")]),_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("x")])])])]),_c('span',{pre:true,attrs:{"class":"vlist-s"}},[_v("​")])]),_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:0.686em;"}},[_c('span')])])])]),_c('span',{pre:true,attrs:{"class":"mclose nulldelimiter"}})]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:2.00744em;vertical-align:-0.686em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mopen nulldelimiter"}}),_c('span',{pre:true,attrs:{"class":"mfrac"}},[_c('span',{pre:true,attrs:{"class":"vlist-t vlist-t2"}},[_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:1.32144em;"}},[_c('span',{pre:true,attrs:{"style":"top:-2.314em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord"}},[_v("3")])])]),_c('span',{pre:true,attrs:{"style":"top:-3.23em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"frac-line","style":"border-bottom-width:0.04em;"}})]),_c('span',{pre:true,attrs:{"style":"top:-3.677em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord"}},[_v("2")]),_c('span',{pre:true,attrs:{"class":"mord mathnormal","style":"margin-right:0.03588em;"}},[_v("y")])])])]),_c('span',{pre:true,attrs:{"class":"vlist-s"}},[_v("​")])]),_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:0.686em;"}},[_c('span')])])])]),_c('span',{pre:true,attrs:{"class":"mclose nulldelimiter"}})]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.64444em;vertical-align:0em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("8")])])])])])]),_c('span',[_v("(2)")])],1),_v(" "),_c('p',[_v("Euler's equation "),_c('eq',{pre:true},[_c('span',{pre:true,attrs:{"class":"katex"}},[_c('span',{pre:true,attrs:{"class":"katex-mathml"}},[_c('math',{pre:true,attrs:{"xmlns":"http://www.w3.org/1998/Math/MathML"}},[_c('semantics',{pre:true},[_c('mrow',{pre:true},[_c('msup',{pre:true},[_c('mi',{pre:true},[_v("e")]),_c('mrow',{pre:true},[_c('mi',{pre:true},[_v("i")]),_c('mi',{pre:true},[_v("π")])],1)],1),_c('mo',{pre:true},[_v("+")]),_c('mn',{pre:true},[_v("1")]),_c('mo',{pre:true},[_v("=")]),_c('mn',{pre:true},[_v("0")])],1),_c('annotation',{pre:true,attrs:{"encoding":"application/x-tex","v-pre":""}},[_v(" e^{i\\pi}+1=0 ")])],1)],1)],1),_c('span',{pre:true,attrs:{"class":"katex-html","aria-hidden":"true"}},[_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.907994em;vertical-align:-0.08333em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("e")]),_c('span',{pre:true,attrs:{"class":"msupsub"}},[_c('span',{pre:true,attrs:{"class":"vlist-t"}},[_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:0.824664em;"}},[_c('span',{pre:true,attrs:{"style":"top:-3.063em;margin-right:0.05em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:2.7em;"}}),_c('span',{pre:true,attrs:{"class":"sizing reset-size6 size3 mtight"}},[_c('span',{pre:true,attrs:{"class":"mord mtight"}},[_c('span',{pre:true,attrs:{"class":"mord mathnormal mtight"}},[_v("i")]),_c('span',{pre:true,attrs:{"class":"mord mathnormal mtight","style":"margin-right:0.03588em;"}},[_v("π")])])])])])])])])]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.64444em;vertical-align:0em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("1")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.64444em;vertical-align:0em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("0")])])])])]),_v(" is a beautiful equation.")],1)])],1)]),_v(" "),_c('box',{attrs:{"type":"important"}},[_c('p',[_v("If your equation requires special Nunjucks tags like "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{{")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("}}")]),_v(",use a\n"),_c('a',{attrs:{"href":"https://markbind.org/userGuide/tipsAndTricks.html#using-raw-endraw-to-display-content"}},[_v("raw-endraw block")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("{% raw %}\\(e^{{\\frac{1}{3}} + 1}\\){% endraw %}\n")])])])]),_v(" "),_c('p',[_c('small',[_v("More info on allowed symbols: "),_c('a',{attrs:{"href":"https://katex.org/docs/support_table.html"}},[_v("https://katex.org/docs/support_table.html")])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("\n")]),_c('span',[_v("Solve the following simultaneous equations:\n")]),_c('span',[_v("\n")]),_c('span',[_v("\\[ 3x + y = 11 \\] (1)\n")]),_c('span',[_v("\n")]),_c('span',[_v("\\[\\frac{2x}{3} + \\frac{2y}{3} = 8\\] (2)\n")]),_c('span',[_v("\n")]),_c('span',[_v("Euler's equation \\( e^{i\\pi}+1=0 \\) is a beautiful equation.\n")]),_c('span',[_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("Solve the following simultaneous equations:")]),_v(" "),_c('section',{staticClass:"eqno"},[_c('eqn',{pre:true},[_c('span',{pre:true,attrs:{"class":"katex-display"}},[_c('span',{pre:true,attrs:{"class":"katex"}},[_c('span',{pre:true,attrs:{"class":"katex-mathml"}},[_c('math',{pre:true,attrs:{"xmlns":"http://www.w3.org/1998/Math/MathML","display":"block"}},[_c('semantics',{pre:true},[_c('mrow',{pre:true},[_c('mn',{pre:true},[_v("3")]),_c('mi',{pre:true},[_v("x")]),_c('mo',{pre:true},[_v("+")]),_c('mi',{pre:true},[_v("y")]),_c('mo',{pre:true},[_v("=")]),_c('mn',{pre:true},[_v("11")])],1),_c('annotation',{pre:true,attrs:{"encoding":"application/x-tex","v-pre":""}},[_v(" 3x + y = 11 ")])],1)],1)],1),_c('span',{pre:true,attrs:{"class":"katex-html","aria-hidden":"true"}},[_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.72777em;vertical-align:-0.08333em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("3")]),_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("x")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.625em;vertical-align:-0.19444em;"}}),_c('span',{pre:true,attrs:{"class":"mord mathnormal","style":"margin-right:0.03588em;"}},[_v("y")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.64444em;vertical-align:0em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("1")]),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("1")])])])])])]),_c('span',[_v("(1)")])],1),_v(" "),_c('section',{staticClass:"eqno"},[_c('eqn',{pre:true},[_c('span',{pre:true,attrs:{"class":"katex-display"}},[_c('span',{pre:true,attrs:{"class":"katex"}},[_c('span',{pre:true,attrs:{"class":"katex-mathml"}},[_c('math',{pre:true,attrs:{"xmlns":"http://www.w3.org/1998/Math/MathML","display":"block"}},[_c('semantics',{pre:true},[_c('mrow',{pre:true},[_c('mfrac',{pre:true},[_c('mrow',{pre:true},[_c('mn',{pre:true},[_v("2")]),_c('mi',{pre:true},[_v("x")])],1),_c('mn',{pre:true},[_v("3")])],1),_c('mo',{pre:true},[_v("+")]),_c('mfrac',{pre:true},[_c('mrow',{pre:true},[_c('mn',{pre:true},[_v("2")]),_c('mi',{pre:true},[_v("y")])],1),_c('mn',{pre:true},[_v("3")])],1),_c('mo',{pre:true},[_v("=")]),_c('mn',{pre:true},[_v("8")])],1),_c('annotation',{pre:true,attrs:{"encoding":"application/x-tex","v-pre":""}},[_v("\\frac{2x}{3} + \\frac{2y}{3} = 8")])],1)],1)],1),_c('span',{pre:true,attrs:{"class":"katex-html","aria-hidden":"true"}},[_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:2.00744em;vertical-align:-0.686em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mopen nulldelimiter"}}),_c('span',{pre:true,attrs:{"class":"mfrac"}},[_c('span',{pre:true,attrs:{"class":"vlist-t vlist-t2"}},[_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:1.32144em;"}},[_c('span',{pre:true,attrs:{"style":"top:-2.314em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord"}},[_v("3")])])]),_c('span',{pre:true,attrs:{"style":"top:-3.23em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"frac-line","style":"border-bottom-width:0.04em;"}})]),_c('span',{pre:true,attrs:{"style":"top:-3.677em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord"}},[_v("2")]),_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("x")])])])]),_c('span',{pre:true,attrs:{"class":"vlist-s"}},[_v("​")])]),_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:0.686em;"}},[_c('span')])])])]),_c('span',{pre:true,attrs:{"class":"mclose nulldelimiter"}})]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:2.00744em;vertical-align:-0.686em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mopen nulldelimiter"}}),_c('span',{pre:true,attrs:{"class":"mfrac"}},[_c('span',{pre:true,attrs:{"class":"vlist-t vlist-t2"}},[_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:1.32144em;"}},[_c('span',{pre:true,attrs:{"style":"top:-2.314em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord"}},[_v("3")])])]),_c('span',{pre:true,attrs:{"style":"top:-3.23em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"frac-line","style":"border-bottom-width:0.04em;"}})]),_c('span',{pre:true,attrs:{"style":"top:-3.677em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord"}},[_v("2")]),_c('span',{pre:true,attrs:{"class":"mord mathnormal","style":"margin-right:0.03588em;"}},[_v("y")])])])]),_c('span',{pre:true,attrs:{"class":"vlist-s"}},[_v("​")])]),_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:0.686em;"}},[_c('span')])])])]),_c('span',{pre:true,attrs:{"class":"mclose nulldelimiter"}})]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.64444em;vertical-align:0em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("8")])])])])])]),_c('span',[_v("(2)")])],1),_v(" "),_c('p',[_v("Euler's equation "),_c('eq',{pre:true},[_c('span',{pre:true,attrs:{"class":"katex"}},[_c('span',{pre:true,attrs:{"class":"katex-mathml"}},[_c('math',{pre:true,attrs:{"xmlns":"http://www.w3.org/1998/Math/MathML"}},[_c('semantics',{pre:true},[_c('mrow',{pre:true},[_c('msup',{pre:true},[_c('mi',{pre:true},[_v("e")]),_c('mrow',{pre:true},[_c('mi',{pre:true},[_v("i")]),_c('mi',{pre:true},[_v("π")])],1)],1),_c('mo',{pre:true},[_v("+")]),_c('mn',{pre:true},[_v("1")]),_c('mo',{pre:true},[_v("=")]),_c('mn',{pre:true},[_v("0")])],1),_c('annotation',{pre:true,attrs:{"encoding":"application/x-tex","v-pre":""}},[_v(" e^{i\\pi}+1=0 ")])],1)],1)],1),_c('span',{pre:true,attrs:{"class":"katex-html","aria-hidden":"true"}},[_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.907994em;vertical-align:-0.08333em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("e")]),_c('span',{pre:true,attrs:{"class":"msupsub"}},[_c('span',{pre:true,attrs:{"class":"vlist-t"}},[_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:0.824664em;"}},[_c('span',{pre:true,attrs:{"style":"top:-3.063em;margin-right:0.05em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:2.7em;"}}),_c('span',{pre:true,attrs:{"class":"sizing reset-size6 size3 mtight"}},[_c('span',{pre:true,attrs:{"class":"mord mtight"}},[_c('span',{pre:true,attrs:{"class":"mord mathnormal mtight"}},[_v("i")]),_c('span',{pre:true,attrs:{"class":"mord mathnormal mtight","style":"margin-right:0.03588em;"}},[_v("π")])])])])])])])])]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222222222222222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.64444em;vertical-align:0em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("1")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2777777777777778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.64444em;vertical-align:0em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("0")])])])])]),_v(" is a beautiful equation.")],1)])],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Modals")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("Click "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trigger")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"click\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:unused\"")]),_v(">")]),_v("here"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(">")]),_v(" to open a modal.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Modal header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:unused\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Modal content\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(">")]),_v("\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"modals"}},[_c('span',{staticClass:"anchor",attrs:{"id":"modals"}}),_v("Modals"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#modals","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Modals are to be used together with the "),_c('a',{attrs:{"href":"#trigger"}},[_v("Trigger")]),_v(" component for activation.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_v("More about "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:loremipsum\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(">")]),_v(".\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**Modal header** :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:loremipsum\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n")]),_c('span',[_v(" magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n")]),_c('span',[_v(" consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n")]),_c('span',[_v(" Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v("This is the same "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:loremipsum\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(">")]),_v(" as last one.\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:centered\"")]),_v(">")]),_v("This is a trigger for a centered modal"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(">")]),_v(".\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**Centered** :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:centered\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("center")]),_v(">")]),_v("\n")]),_c('span',[_v(" Centered\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:ok-text\"")]),_v(">")]),_v("This is a trigger for a modal with a custom OK button"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(">")]),_v(".\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"OK button visible!\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:ok-text\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ok-text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Custom OK\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n")]),_c('span',[_v(" magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n")]),_c('span',[_v(" consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n")]),_c('span',[_v(" Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("More about "),_c('trigger',{attrs:{"for":"modal:loremipsum"}},[_v("trigger")]),_v(".")],1),_v(" "),_c('b-modal',{ref:"modal:loremipsum",attrs:{"id":"modal:loremipsum","hide-footer":"","size":"","modal-class":"mb-zoom"},scopedSlots:_u([{key:"modal-title",fn:function(){return [_c('strong',[_v("Modal header")]),_v(" 🚀")]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n")]),_v(" "),_c('br'),_v("\nThis is the same "),_c('trigger',{attrs:{"for":"modal:loremipsum"}},[_v("trigger")]),_v(" as last one.\n"),_c('p',[_c('trigger',{attrs:{"for":"modal:centered"}},[_v("This is a trigger for a centered modal")]),_v(".")],1),_v(" "),_c('b-modal',{ref:"modal:centered",attrs:{"id":"modal:centered","centered":"","hide-footer":"","size":"","modal-class":"mb-zoom"},scopedSlots:_u([{key:"modal-title",fn:function(){return [_c('strong',[_v("Centered")]),_v(" 🚀")]},proxy:true}])},[_v("\n Centered\n")]),_v(" "),_c('p',[_c('trigger',{attrs:{"for":"modal:ok-text"}},[_v("This is a trigger for a modal with a custom OK button")]),_v(".")],1),_v(" "),_c('b-modal',{ref:"modal:ok-text",attrs:{"id":"modal:ok-text","ok-title":"Custom OK","ok-only":"","size":"","modal-class":"mb-zoom"},scopedSlots:_u([{key:"modal-title",fn:function(){return [_v("OK button visible!")]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n")])],1)],1)]),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("More about triggers")])]},proxy:true}])},[_v(" "),_c('div',[_c('p',[_c('strong',[_c('strong',[_v("Triggers")])])]),_v(" "),_c('p',[_v("Trigger provides more flexibility in triggering contextual overlay via Tooltip, Popover or Modal.")]),_v(" "),_c('p',[_v("You could embed a Trigger within the text, and define the Tooltip, Popover or Modal at a separate location, which allows for a cleaner authoring flow.")]),_v(" "),_c('p',[_v("Specify the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(" attribute on the Tooltip, Popover or Modal component, and use the same "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(" in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("for")]),_v(" attribute of the Trigger to allow the Trigger to invoke the specific overlay elements.\nAdditionally, multiple Triggers could share the same overlay by providing them with the same "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(".\n"),_c('br')]),_v(" "),_c('p',[_c('strong',[_v("Trigger's "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("trigger")]),_v(" attribute (which defaults to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")]),_v(") is independent of the target's.")])]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("trigger")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")])]),_v(" "),_c('td',[_v("How the overlay view is triggered."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("click")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("focus")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("for")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("The id for the overlay view to be shown.")])]),_v(" "),_c('tr',[_c('td',[_v("placement")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("auto")])]),_v(" "),_c('td',[_v("How to position the Popover or Tooltip."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("auto")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("top")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("left")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("right")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bottom")]),_v(".")])])])])])])]),_c('p'),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("header"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Header of the Modal component. Supports inline markdown text.")])]),_v(" "),_c('tr',[_c('td',[_v("footer "),_c('hr',{staticStyle:{"margin-top":"0.2rem","margin-bottom":"0"}}),_v(" "),_c('small',[_v("modal-footer "),_c('br'),_v(" (deprecated)")])]),_v(" "),_c('td',[_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_v("Slot")])],1),_v(" "),_c('td',[_v("empty")]),_v(" "),_c('td',[_v("Specifying this will override the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("ok-text")]),_v(" attribute, and the OK button will not render.")])]),_v(" "),_c('tr',[_c('td',[_v("ok-text")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Text for the OK button.")])]),_v(" "),_c('tr',[_c('td',[_v("effect")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("zoom")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("zoom")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fade")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("id")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("Used by "),_c('a',{attrs:{"href":"#trigger"}},[_v("Trigger")]),_v(" to activate the Modal by id.large")])]),_v(" "),_c('tr',[_c('td',[_v("small")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Creates a "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/4.0/components/modal/#optional-sizes"}},[_v("small Modal")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("large")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Creates a "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/4.0/components/modal/#optional-sizes"}},[_v("large Modal")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("center")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Vertically centers the modal (in addition to the horizontal centering by default).")])]),_v(" "),_c('tr',[_c('td',[_v("backdrop")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("true")])]),_v(" "),_c('td',[_v("Enables closing the Modal by clicking on the backdrop.")])])])])]),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("Click "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trigger")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"click\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:unused\"")]),_v(">")]),_v("here"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(">")]),_v(" to open a modal.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Modal header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:unused\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Modal content\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("Hover "),_c('trigger',{attrs:{"large":"","for":"modal:unused"}},[_v("here")]),_v(" to open a modal.")],1),_v(" "),_c('b-modal',{ref:"modal:unused",attrs:{"id":"modal:unused","ok-title":"OK","ok-only":"","size":"","modal-class":"mb-zoom"},scopedSlots:_u([{key:"modal-title",fn:function(){return [_v("Modal header")]},proxy:true}])},[_v("\n Modal content\n")])],1)],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Nav Bars")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Brand as slot -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- You can use dropdown component -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Option"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- For right positioning use slot -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Fork..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(">")]),_v("\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"navbars"}},[_c('span',{staticClass:"anchor",attrs:{"id":"navbars"}}),_v("Navbars"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#navbars","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Navbar allows visitors of your website to navigate through pages easily.")])]),_v(" "),_c('p',[_c('strong',[_v("Navbars support link highlighting; link highlighting can be customised by specifying rules.")])]),_v(" "),_c('ul',[_c('li',[_v("Define "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default-highlight-on")]),_v(" in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<navbar>")]),_v(" to specify fallback highlight rules.")]),_v(" "),_c('li',[_v("Define "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("data-highlight")]),_v(" in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<a>")]),_v(" tags with the class "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("nav-link")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("dropdown-item")]),_v(" to specify individual highlight rules.")])]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('div',[_c('p',[_v("Note: "),_c('strong',[_v("Navbars")]),_v(" should be placed within a "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#headers"}},[_v("header file")]),_v(" to ensure that they are correctly positioned at the top of the page, above the "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#site-navigation-menus"}},[_v("site navigation")]),_v(" and "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#page-navigation-menus"}},[_v("page navigation")]),_v(" menus.")])])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Brand as slot -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- You can use dropdown component -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Option"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- For right positioning use slot -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Fork..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dark\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Brand as slot -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- You can use dropdown component -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Option"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- For right positioning use slot -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Fork..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"light\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Brand as slot -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- You can use dropdown component -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Option"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- For right positioning use slot -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Fork..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('navbar',{attrs:{"type":"primary"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1),_v(" "),_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1),_v(" "),_c('navbar',{attrs:{"type":"light"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("type")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("primary")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("primary")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("dark")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("light")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("none")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("default-highlight-on")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("sibling-or-child")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("sibling-or-child")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("sibling")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("child")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("exact")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("none")]),_v(". Specifies link highlight rules for navbars.")])])])])]),_c('box',{attrs:{"type":"tip"}},[_c('p',[_v("If you wish to further customize your navbar beyond the primary, dark, and light theme colors, specify the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"none\"")]),_v(" attribute and "),_c('a',{attrs:{"href":"#inserting-custom-classes-into-components"}},[_v("insert your own custom styles")]),_v(" or "),_c('trigger',{attrs:{"trigger":"click","for":"modal:built-in-bg"}},[_v("use built-in background styles")]),_v(" via the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("add-class")]),_v(" attribute.")],1)]),_v(" "),_c('b-modal',{ref:"modal:built-in-bg",attrs:{"id":"modal:built-in-bg","hide-footer":"","size":"","modal-class":"mb-zoom"},scopedSlots:_u([{key:"modal-title",fn:function(){return [_v("Built-in background styles")]},proxy:true}])},[_v(" "),_c('span',[_v("For instance, Bootstrap supports "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".bg-danger")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bg-info")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bg-primary")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bg-success")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bg-warning")]),_v(" as background colors.")]),_v(" "),_c('span',[_v("In "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{your-site}/_markbind/headers/header.md")]),_v(", you can change "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<navbar type=\"dark/primary/light\">")]),_v(" to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<navbar type=\"none\" add-class=\"bg-warning/danger/info/primary/success\">")]),_v(" to apply Bootstrap background styles.")])]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Navbar Link Highlighting")])])]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("head-bottom")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("link")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rel")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"stylesheet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/css/main.css\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("head-bottom")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("header")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fixed")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dark\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("img")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/images/logo-darkbackground.svg\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("height")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"20\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exact\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("HOME"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--ug\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"sibling-or-child\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("USER GUIDE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--dg\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"sibling-or-child\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/devGuide/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("DEVELOPER GUIDE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exact\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/showcase.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("SHOWCASE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exact\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/about.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("ABOUT"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("md")]),_v(">")]),_v(":fab-github:"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("md")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("header")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")])])]),_c('p',[_c('strong',[_c('strong',[_v("Highlight Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("child")])]),_v(" "),_c('td',[_v("Highlights link if URL in address bar is a child of the link. E.g "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("foo/bar")]),_v(" is a child of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("foo")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("sibling")])]),_v(" "),_c('td',[_v("Highlights link if URL in address bar is a sibling of the link. E.g "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("foo/bar")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("foo/bear")]),_v(" are siblings.")])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("sibling-or-child")])]),_v(" "),_c('td',[_v("Highlights link if URL in address bar is a sibling or child of the link.")])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("exact")])]),_v(" "),_c('td',[_v("Highlights link if URL in address bar exactly matches link.")])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("none")])]),_v(" "),_c('td',[_v("No highlighting.")])])])])]),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Brand as slot -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- You can use dropdown component -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Option"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- For right positioning use slot -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Fork..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('navbar',{attrs:{"type":"primary"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1),_v(" "),_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1),_v(" "),_c('navbar',{attrs:{"type":"light"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1)],1),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Mobile page and site navigation menus")])])]),_v(" "),_c('p',[_v("The navbar component also provides access to MarkBind's "),_c('a',{attrs:{"href":"/userGuide/components/navigation.html#site-navigation-menus"}},[_v("site navigation")]),_v(" and "),_c('a',{attrs:{"href":"/userGuide/components/navigation.html#page-navigation-menus"}},[_v("page navigation")]),_v(" menu "),_c('strong',[_v("components")]),_v(" if used in the page's "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#layouts"}},[_v("layout")]),_v(". No additional setup is required!")]),_v(" "),_c('p',[_v("If you are viewing the documentation on a larger device, resize the window to see what it looks like.")]),_v(" "),_c('p',[_v("Alternatively, if you want to display "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("e.g. adding an image to the site nav")]),_v("additional content")]),_v(" in these navigation menus, the navbar is also able to \"pull in\" any "),_c('strong',[_v("container element")]),_v(" with a html "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(" of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"site-nav\"")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"page-nav\"")]),_v(". You may refer to the "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#layouts"}},[_v("layouts")]),_v(" section for an example.")]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_c('p',[_v("The navbar component auto-detects if the MarkBind's navigation components or your element containers has any "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<a>")]),_v(" tags in particular")]),_v("links")]),_v("."),_c('br'),_v("\nIf absent, the navigation buttons to open the menus are "),_c('em',[_v("automatically hidden")]),_v(".")])]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Mobile navigation menu button placement")])])]),_v(" "),_c('p',[_v("If you wish to alter the button placement on the navbar, you may use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<site-nav-button />")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<page-nav-button />")]),_v(" components in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lower-navbar")]),_v(" slot.")]),_v(" "),_c('p',[_v("By default, if the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lower-navbar")]),_v(" slot is not specified, the site and page navigation buttons are simply placed as such.")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Any normal navbar items -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Use slot to wrap the buttons in the lower navbar -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"lower-navbar\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-menu-container\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("site-nav-button")]),_v(" />")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("page-nav-button")]),_v(" />")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(">")]),_v("\n")])])]),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Component")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("page-nav-button")])]),_v(" "),_c('td',[_v("Pulls any element with an identifier, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id=page-nav")]),_v(" into the menu. If no such element exists, it pulls any "),_c('a',{attrs:{"href":"/userGuide/components/navigation.html#page-navigation-menus"}},[_v("page navigation menu")]),_v(" used in the layout.")])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site-nav-button")])]),_v(" "),_c('td',[_v("Pulls any element with an identifier, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id=site-nav")]),_v(" into the menu. If no such element exists, it pulls all "),_c('a',{attrs:{"href":"/userGuide/components/navigation.html#site-navigation-menus"}},[_v("site navigation menu components")]),_v(" used in the layout.")])])])])]),_c('p',[_c('strong',[_c('strong',[_v("Styling the mobile page and site navigation menus")])])]),_v(" "),_c('p',[_v("You may also wish to style your navigation content differently on mobile view.\nBy default, MarkBind already provides some reasonable overrides for smaller screens, applied over any styles you might have for the mobile navigation content identified above.")]),_v(" "),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Css class attached to the root navigation element")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs css","heading":"Css class attached to the root navigation element"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-selector-class"}},[_v(".mb-mobile-nav")]),_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("display")]),_v(": block "),_c('span',{pre:true,attrs:{"class":"hljs-meta"}},[_v("!important")]),_v(";\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("margin")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("0")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-meta"}},[_v("!important")]),_v(";\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("border")]),_v(": none "),_c('span',{pre:true,attrs:{"class":"hljs-meta"}},[_v("!important")]),_v(";\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("padding")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("10px")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-meta"}},[_v("!important")]),_v(";\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("width")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("100%")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-meta"}},[_v("!important")]),_v(";\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("max-width")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("100%")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-meta"}},[_v("!important")]),_v(";\n")]),_c('span',[_v("}\n")])])])])]),_c('p',[_v("If you require greater customisation, you may simply compose the respective selectors with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".mb-mobile-nav")]),_v(" element.")]),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs css","heading":""}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-selector-id"}},[_v("#site-nav")]),_c('span',{pre:true,attrs:{"class":"hljs-selector-class"}},[_v(".mb-mobile-nav")]),_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("/* Be sure to add the !important css rule when overriding .mb-mobile-nav's properties! */")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("border")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("1px")]),_v(" solid black "),_c('span',{pre:true,attrs:{"class":"hljs-meta"}},[_v("!important")]),_v(";\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("/* For other properties, there is no need. */")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("color")]),_v(": red;\n")]),_c('span',[_v("}\n")])])]),_c('box',{attrs:{"type":"tip","seamless":""}},[_c('p',[_v("Refer to the "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("layouts")]),_v(" section to find out how to add custom css files to a page!")])])],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Page Navigation Menus")])]),_v(" "),_c('div',[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v("\nIn the page that you want to have page navigation, you may show only "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<h1>")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<h2>")]),_v(" headings in the pageNav, and set a custom pageNav title like so:")],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" pageNav: 2\n")]),_c('span',[_v(" pageNavTitle: \"Chapters of This Page\"\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")])])]),_c('p',[_v("Then, in your "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#layouts"}},[_v("layout file")]),_v(", use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<page-nav />")]),_v(" component to position the pageNav.")]),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('trigger',{attrs:{"for":"modal:page-nav-example"}},[_v("Example usage of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<page-nav />")]),_v(" component")])],1),_v(" "),_c('b-modal',{ref:"modal:page-nav-example",attrs:{"id":"modal:page-nav-example","hide-footer":"","size":"lg","modal-class":"mb-zoom"},scopedSlots:_u([{key:"modal-title",fn:function(){return [_v("Using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pageNav")]),_v(" variable in a layout")]},proxy:true}])},[_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("head-bottom")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Use head-top and head-bottom tags to insert content into the html <head> tag -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("link")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rel")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"stylesheet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/css/main.css\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("head-bottom")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Fix the header to the top while scrolling using the fixed attribute in a <header> tag -->")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("header")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fixed")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dark\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("img")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/images/logo-darkbackground.svg\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("height")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"20\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exact\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("HOME"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--ug\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"sibling-or-child\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/userGuide/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("USER GUIDE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--dg\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"sibling-or-child\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/devGuide/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("DEVELOPER GUIDE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("header")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"flex-body\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Push content downward when using a fixed header with the fixed-header-padding class -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("nav")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"site-nav\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fixed-header-padding\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"site-nav-top\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"font-weight-bold mb-2\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"font-size: 1.25rem;\"")]),_v(">")]),_v("User Guide"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-component slim-scroll\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("site-nav")]),_v(">")]),_v("\n")]),_c('span',[_v("* [**Getting Started**]({{baseUrl}}/userGuide/gettingStarted.html)\n")]),_c('span',[_v(" * **Authoring Contents** :expanded:\n")]),_c('span',[_v(" * [Overview]({{baseUrl}}/userGuide/authoringContents.html)\n")]),_c('span',[_v(" * [Adding Pages]({{baseUrl}}/userGuide/addingPages.html)\n")]),_c('span',[_v(" * [MarkBind Syntax Overview]({{baseUrl}}/userGuide/markBindSyntaxOverview.html)\n")]),_c('span',[_v(" * [Formatting Contents]({{baseUrl}}/userGuide/formattingContents.html)\n")]),_c('span',[_v(" * [Using Components]({{baseUrl}}/userGuide/usingComponents.html)\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("site-nav")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("nav")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"content-wrapper\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fixed-header-padding\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Insert the page's content into the layout using the {{ content }} variable -->")]),_v("\n")]),_c('span',[_v(" {{ content }}\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("nav")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"page-nav\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fixed-header-padding\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-component slim-scroll\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Insert a page navigation menu using the <page-nav /> component -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("page-nav")]),_v(" />")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("nav")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("footer")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text-center\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("[Generated by {{MarkBind}} on {{timestamp}}]"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("This site is powered by "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://www.netlify.com/\"")]),_v(">")]),_v("Netlify"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("footer")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Insert content after the html <body> tag using the <script-bottom> tag -->")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script-bottom")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"javascript"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" alert("),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'Hi!'")]),_v(")")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" ")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script-bottom")]),_v(">")]),_v("\n")])])])])])],1)])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"page-navigation-menus"}},[_c('span',{staticClass:"anchor",attrs:{"id":"page-navigation-menus"}}),_v("Page Navigation Menus"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#page-navigation-menus","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{attrs:{"id":"content"}},[_c('p',[_c('strong',[_v("A "),_c('em',[_v("Page Navigation Menu")]),_v(" ("),_c('mark',[_c('em',[_v("pageNav")]),_v(" for short")]),_v(") a list of the current page's headings.")]),_v(" Page navigation menus are only available for use in "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#layouts"}},[_v("layouts")]),_v(".")]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Adding a pageNav")])])]),_v(" "),_c('ol',[_c('li',[_c('p',[_c('strong',[_v("Specify the smallest heading level you want to be included")]),_v(" within the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<frontmatter>")]),_v(" of a page with "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("The value "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default")]),_v(" will use "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("headingIndexingLevel")]),_v(" within "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(".")]),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"default\"")])]),_v(" or a "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("HTML defines six levels of headings, numbered from "),_c('br'),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("1 to 6")]),_v(".")]),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("heading level")])]),_v(".")]),_v(" "),_c('box',{attrs:{"type":"info","seamless":""}},[_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default")]),_v(" level uses the "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#headingindexinglevel"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("headingIndexingLevel")]),_v(" property")]),_v(" of your site configuration file.")])])],1),_v(" "),_c('li',[_c('p',[_c('strong',[_v("(Optional) You may also specify a page navigation title")]),_v(" within "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<frontmatter>")]),_v(" that will be placed at the top of the page navigation menu.")])]),_v(" "),_c('li',[_c('p',[_c('strong',[_v("Position the page navigation menu")]),_v(" within your layout using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<page-nav />")]),_v(" component.")])]),_v(" "),_c('li',[_c('p',[_c('strong',[_v("(Optional) To make pageNav accessible on smaller screens, you can use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<page-nav-button />")]),_v(" component in the "),_c('a',{attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("navbar")]),_v(".")])])])]),_v(" "),_c('div',{staticClass:"indented",attrs:{"id":"short"}},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v("\nIn the page that you want to have page navigation, you may show only "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<h1>")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<h2>")]),_v(" headings in the pageNav, and set a custom pageNav title like so:")],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" pageNav: 2\n")]),_c('span',[_v(" pageNavTitle: \"Chapters of This Page\"\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")])])]),_c('p',[_v("Then, in your "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#layouts"}},[_v("layout file")]),_v(", use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<page-nav />")]),_v(" component to position the pageNav.")]),_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('trigger',{attrs:{"for":"modal:page-nav-example"}},[_v("Example usage of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<page-nav />")]),_v(" component")])],1),_v(" "),_c('b-modal',{ref:"modal:page-nav-example",attrs:{"id":"modal:page-nav-example","hide-footer":"","size":"lg","modal-class":"mb-zoom"},scopedSlots:_u([{key:"modal-title",fn:function(){return [_v("Using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pageNav")]),_v(" variable in a layout")]},proxy:true}])},[_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("head-bottom")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Use head-top and head-bottom tags to insert content into the html <head> tag -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("link")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rel")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"stylesheet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/css/main.css\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("head-bottom")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Fix the header to the top while scrolling using the fixed attribute in a <header> tag -->")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("header")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fixed")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dark\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("img")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/images/logo-darkbackground.svg\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("height")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"20\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exact\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("HOME"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--ug\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"sibling-or-child\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/userGuide/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("USER GUIDE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--dg\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"sibling-or-child\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/devGuide/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("DEVELOPER GUIDE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("header")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"flex-body\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Push content downward when using a fixed header with the fixed-header-padding class -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("nav")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"site-nav\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fixed-header-padding\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"site-nav-top\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"font-weight-bold mb-2\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"font-size: 1.25rem;\"")]),_v(">")]),_v("User Guide"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-component slim-scroll\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("site-nav")]),_v(">")]),_v("\n")]),_c('span',[_v("* [**Getting Started**]({{baseUrl}}/userGuide/gettingStarted.html)\n")]),_c('span',[_v(" * **Authoring Contents** :expanded:\n")]),_c('span',[_v(" * [Overview]({{baseUrl}}/userGuide/authoringContents.html)\n")]),_c('span',[_v(" * [Adding Pages]({{baseUrl}}/userGuide/addingPages.html)\n")]),_c('span',[_v(" * [MarkBind Syntax Overview]({{baseUrl}}/userGuide/markBindSyntaxOverview.html)\n")]),_c('span',[_v(" * [Formatting Contents]({{baseUrl}}/userGuide/formattingContents.html)\n")]),_c('span',[_v(" * [Using Components]({{baseUrl}}/userGuide/usingComponents.html)\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("site-nav")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("nav")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"content-wrapper\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fixed-header-padding\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Insert the page's content into the layout using the {{ content }} variable -->")]),_v("\n")]),_c('span',[_v(" {{ content }}\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("nav")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"page-nav\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fixed-header-padding\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-component slim-scroll\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Insert a page navigation menu using the <page-nav /> component -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("page-nav")]),_v(" />")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("nav")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("footer")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text-center\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("[Generated by {{MarkBind}} on {{timestamp}}]"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("This site is powered by "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://www.netlify.com/\"")]),_v(">")]),_v("Netlify"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("footer")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Insert content after the html <body> tag using the <script-bottom> tag -->")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script-bottom")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"javascript"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" alert("),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'Hi!'")]),_v(")")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" ")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script-bottom")]),_v(">")]),_v("\n")])])])])])],1)]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("You can see an example of a Page Navigation Bar "),_c('mark',[_v("on the right side")]),_v(" of "),_c('a',{attrs:{"target":"_blank","href":"/userGuide/formattingContents.html"}},[_v("this page")]),_v(".\n")])]),_c('p')])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Panels")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary type panel\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(" >")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"panels"}},[_c('span',{staticClass:"anchor",attrs:{"id":"panels"}}),_v("Panels"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#panels","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Panel is a flexible container that supports collapsing and expanding its content. It is expandable by default.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This is your header for a Panel, click me to expand!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This is your header for a Panel, click me to expand!")])]},proxy:true}])},[_v("\n Lorem ipsum ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("With "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("minimized")]),_v(" attribute, panel is minimized into an inline block element. The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("alt")]),_v(" attribute is for you to specify the minimized block header.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"How to cultivate a tomato plant at home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tomatoes\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("How to cultivate a tomato plant at home")])]},proxy:true},{key:"_alt",fn:function(){return [_c('p',[_v("Tomatoes")])]},proxy:true}])},[_v("\n Lorem ipsum ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("With "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("expanded")]),_v(" attribute, you can set the panels to be expanded when loaded in.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Have your readers click less to see the Panel's contents\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("expanded")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Have your readers click less to see the Panel's contents")])]},proxy:true}])},[_v("\n Lorem ipsum ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("With the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("expand-headerless")]),_v(" attribute, you can hide the panel header when it is expanded.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This header will only show when the Panel is collapsed\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("expand-headerless")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"expand-headerless":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This header will only show when the Panel is collapsed")])]},proxy:true}])},[_v("\n Lorem ipsum ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("With the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("peek")]),_v(" attribute, you may showcase part of your content without expanding the panel.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Give your readers a peek of the content without expanding Panel\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("peek")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n")]),_c('span',[_v(" magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n")]),_c('span',[_v(" consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n")]),_c('span',[_v(" Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n")]),_c('span',[_v(" Curabitur ornare ipsum eu ex congue egestas. Maecenas pretium nibh sed enim ornare finibus. Mauris quis metus \n")]),_c('span',[_v(" facilisis, mattis tellus nec, pulvinar mi. Quisque at vehicula lectus. Ut ac lacus mi. Donec mattis nec velit \n")]),_c('span',[_v(" eget tincidunt. Maecenas vel mauris mattis nisl tempor sollicitudin. Orci varius natoque penatibus et magnis \n")]),_c('span',[_v(" dis parturient montes, nascetur ridiculus mus. Duis tincidunt diam eu dolor pellentesque, eget dignissim tortor \n")]),_c('span',[_v(" pellentesque. \n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"peek":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Give your readers a peek of the content without expanding Panel")])]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n Curabitur ornare ipsum eu ex congue egestas. Maecenas pretium nibh sed enim ornare finibus. Mauris quis metus \n facilisis, mattis tellus nec, pulvinar mi. Quisque at vehicula lectus. Ut ac lacus mi. Donec mattis nec velit \n eget tincidunt. Maecenas vel mauris mattis nisl tempor sollicitudin. Orci varius natoque penatibus et magnis \n dis parturient montes, nascetur ridiculus mus. Duis tincidunt diam eu dolor pellentesque, eget dignissim tortor \n pellentesque. \n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Panel provides many types that change its appearance.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**light type panel (DEFAULT)**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"light\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**dark type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dark\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**primary type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**secondary type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"secondary\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**info type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**danger type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"danger\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**warning type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**success type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**seamless type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"seamless\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**minimal type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"minimal\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"type":"light","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("light type panel (DEFAULT)")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"dark","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("dark type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"primary","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("primary type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"secondary","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("secondary type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"info","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("info type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"danger","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("danger type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"warning","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("warning type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"success","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("success type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"seamless","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("seamless type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"minimal","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("minimal type panel")])])]},proxy:true}])},[_v("\n ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Show/Hide buttons using "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-switch")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-close")]),_v(".")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This panel does not have a switch button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-switch")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This panel does not have a close button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-close")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This panel does not have either buttons\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-close")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-switch")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"no-switch":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This panel does not have a switch button")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"no-close":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This panel does not have a close button")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"no-close":"","no-switch":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This panel does not have either buttons")])]},proxy:true}])},[_v("\n ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Use markdown in the header (only inline level markdown are supported).")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**Bold text** :rocket: ![](https://markbind.org/images/logo-lightbackground.png =x20)\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"seamless\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("Bold text")]),_v(" 🚀 "),_c('a',{attrs:{"href":"https://markbind.org/images/logo-lightbackground.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","alt":""}})])])]},proxy:true}])},[_v("\n ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("If "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" attribute is provided, the panel will take content from the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" specified and add it to the Panel body.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Content loaded in from 'src'\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"extra/loadContent.html#fragment\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('panel',{attrs:{"src":"/userGuide/syntax/extra/loadContent._include_.html#fragment","minimized":"","fragment":"fragment"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Content loaded in from 'src'")])]},proxy:true}])})],1)])],1)]),_v(" "),_c('p',[_c('strong',[_v("If "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("popup-url")]),_v(" attribute is provided, a popup button will be shown. If clicked, it opens the specified url in a new window.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Try clicking on my pop-up button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("popup-url")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/syntax/extra/loadContent.html\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" This panel has a popup.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"popup-url":"/userGuide/syntax/extra/loadContent.html"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Try clicking on my pop-up button")])]},proxy:true}])},[_v("\n This panel has a popup.\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("If "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("preload")]),_v(" attribute is provided, the panel body will load the HTML when the page renders instead of after being expanded.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Right click and inspect my HTML before expanding me!\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"extra/loadContent.html#fragment\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("preload")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("You should be able to find this text before expanding the Panel."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"src":"/userGuide/syntax/extra/loadContent._include_.html#fragment","preload":"","fragment":"fragment"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Right click and inspect my HTML before expanding me!")])]},proxy:true}])},[_v(" "),_c('p',[_v("You should be able to find this text before expanding the Panel.")])])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("You can nest Panels or other components within a Panel.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Parent Panel\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Level 1 Nested Panel\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Level 2 Nested Panel\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tip-box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" I'm a nested tip-box\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tip-box")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Level 3 Nested Panel\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"minimal\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" minimal-type panel\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Level 1 Nested Panel\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Some Text\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Parent Panel")])]},proxy:true}])},[_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Level 1 Nested Panel")])]},proxy:true}])},[_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Level 2 Nested Panel")])]},proxy:true}])},[_v(" "),_c('tip-box',{attrs:{"type":"success"}},[_v("\n I'm a nested tip-box\n ")]),_v(" "),_c('panel',{attrs:{"type":"minimal"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Level 3 Nested Panel")])]},proxy:true}])},[_v("\n minimal-type panel\n ")])],1)],1),_v(" "),_c('panel',{attrs:{"type":"info"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Level 1 Nested Panel")])]},proxy:true}])},[_v("\n Some Text\n ")])],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("header"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("The clickable text on the Panel's header. Supports MarkDown text.")])]),_v(" "),_c('tr',[_c('td',[_v("alt")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_v("Panel header")]),_v(" "),_c('td',[_v("The clickable text on the minimised Panel. Supports MarkDown text.")])]),_v(" "),_c('tr',[_c('td',[_v("expandable")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("true")])]),_v(" "),_c('td',[_v("Whether Panel is expandable.")])]),_v(" "),_c('tr',[_c('td',[_v("expanded")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether Panel is expanded or collapsed when loaded in.")])]),_v(" "),_c('tr',[_c('td',[_v("minimized")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether Panel is minimized.")])]),_v(" "),_c('tr',[_c('td',[_v("expand-headerless")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether to hide the header text when the Panel is expanded.")])]),_v(" "),_c('tr',[_c('td',[_v("peek")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether to show part of the content when the Panel is collapsed.")])]),_v(" "),_c('tr',[_c('td',[_v("no-close")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether to show the close button.")])]),_v(" "),_c('tr',[_c('td',[_v("no-switch")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether to show the expand switch.")])]),_v(" "),_c('tr',[_c('td',[_v("bottom-switch")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("true")])]),_v(" "),_c('td',[_v("Whether to show an expand switch at the bottom of the panel. Independent of no-switch.")])]),_v(" "),_c('tr',[_c('td',[_v("popup-url")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The url that the popup window will navigate to. The url can be absolute or relative.")])]),_v(" "),_c('tr',[_c('td',[_v("preload")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether the content is loaded immediately from "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("src")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The url to the remote page to be loaded as the content of the panel.")])]),_v(" "),_c('tr',[_c('td',[_v("type")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("light")])]),_v(" "),_c('td',[_v("The type or color scheme of the panel (single)."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("light")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("dark")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("primary")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("secondary")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("info")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("success")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("warning")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("danger")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("seamless")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("minimal")]),_v(".")])])])])]),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary type panel\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(" >")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('panel',{attrs:{"type":"minimal"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("minimal type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("seamless type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"info","expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("info type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"danger"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("danger type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"warning"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("warning type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"success"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("success type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('p'),_v(" "),_c('panel',{attrs:{"type":"light","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("light type panel (DEFAULT)")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"dark","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("dark type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"primary","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("primary type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"secondary","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("secondary type panel")])]},proxy:true}])},[_v("\n ...\n")])],1)])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Paragraphs")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("This is the first paragraph.\n")]),_c('span',[_v("\n")]),_c('span',[_v("This is another paragraph. This is the second sentence.\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"paragraphs"}},[_c('span',{staticClass:"anchor",attrs:{"id":"paragraphs"}}),_v("Paragraphs"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#paragraphs","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Use one or more empty lines to separate paragraphs.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("This is the first paragraph.\n")]),_c('span',[_v("\n")]),_c('span',[_v("This is another paragraph. This is the second sentence.\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("This is the first paragraph.")]),_v(" "),_c('p',[_v("This is another paragraph. This is the second sentence.")])])],1)]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("This is the first paragraph.\n")]),_c('span',[_v("\n")]),_c('span',[_v("This is another paragraph. This is the second sentence.\n")])])])])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Pictures")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://markbind.org/images/logo-lightbackground.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"300\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Logo\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" MarkBind Logo\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(">")]),_v("\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"pictures"}},[_c('span',{staticClass:"anchor",attrs:{"id":"pictures"}}),_v("Pictures"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#pictures","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("A "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pic")]),_v(" component allows you to add captions below the image.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://markbind.org/images/logo-lightbackground.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"300\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Logo\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" MarkBind Logo\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://markbind.org/images/logo-lightbackground.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"300\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Logo\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("eager")]),_v(">")]),_v("\n")]),_c('span',[_v(" MarkBind Logo\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pic',{attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","width":"300","alt":"Logo"}},[_v("\n MarkBind Logo\n")]),_v(" "),_c('pic',{attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","width":"300","alt":"Logo","eager":""}},[_v("\n MarkBind Logo\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("alt")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_c('strong',[_v("This must be specified.")]),_c('br'),_v("The alternative text of the image.")])]),_v(" "),_c('tr',[_c('td',[_v("height")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The height of the image in pixels.")])]),_v(" "),_c('tr',[_c('td',[_v("src")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_c('strong',[_v("This must be specified.")]),_c('br'),_v("The URL of the image."),_c('br'),_v("The URL can be specified as absolute or relative references. More info in: "),_c('em',[_c('a',{attrs:{"href":"/userGuide/formattingContents.html#intraSiteLinks"}},[_v("Intra-Site Links")])])])]),_v(" "),_c('tr',[_c('td',[_v("width")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The width of the image in pixels."),_c('br'),_v("If both width and height are specified, width takes priority over height. It is to maintain the image's aspect ratio.")])]),_v(" "),_c('tr',[_c('td',[_v("eager")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boolean")])]),_v(" "),_c('td',[_v("false")]),_v(" "),_c('td',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<pic>")]),_v(" component lazy loads its images by default."),_c('br'),_v("If you want to eagerly load the images, simply specify this attribute.")])])])])]),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://markbind.org/images/logo-lightbackground.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"300\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Logo\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" MarkBind Logo\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('pic',{attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","width":"300","alt":"Logo"}},[_v("\n MarkBind Logo\n")])],1)])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Popovers")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("Hover over the "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pop:context-target\"")]),_v(">")]),_v("keyword"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(">")]),_v(" to see the popover.\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pop:context-target\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Popover header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"content\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("description :+1:\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(">")]),_v("\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"popovers"}},[_c('span',{staticClass:"anchor",attrs:{"id":"popovers"}}),_v("Popovers"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#popovers","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fade\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on top"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fade\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"left\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on left"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fade\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on right"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fade\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"bottom\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on bottom"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("hr")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Header"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fade\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on top"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fade\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"left\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on left"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fade\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on right"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fade\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"bottom\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on bottom"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("hr")]),_v(" />")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"scale\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trigger")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hover\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Mouseenter"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Markdown"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"scale\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**Emoji header** :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"!!emoji!! content :cat:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Hover"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Content using slot"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("effect")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"scale\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**Emoji header** :rocket:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"content\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" This is a long content...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Hover"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(" />")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(" />")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Wrap Text"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"false\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nice!\"")]),_v(">")]),_v("What do you say"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"fade","placement":"top","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on top")])]),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.left.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"left":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"fade","placement":"left","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on left")])]),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.right.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"right":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"fade","placement":"right","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on right")])]),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.bottom.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"bottom":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"fade","placement":"bottom","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on bottom")])]),_v(" "),_c('hr'),_v(" "),_c('h4',{staticClass:"no-index",attrs:{"id":"header-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"header-2"}}),_v("Header"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#header-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"fade","placement":"top","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_v("Header")]),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on top")])]),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.left.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"left":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"fade","placement":"left","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_v("Header")]),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on left")])]),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.right.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"right":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"fade","placement":"right","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_v("Header")]),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on right")])]),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.bottom.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"bottom":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"fade","placement":"bottom","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_v("Header")]),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on bottom")])]),_v(" "),_c('hr'),_v(" "),_c('h4',{staticClass:"no-index",attrs:{"id":"trigger"}},[_c('span',{staticClass:"anchor",attrs:{"id":"trigger"}}),_v("Trigger"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#trigger","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"scale","placement":"top","trigger":"hover","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_v("Header")]),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Mouseenter")])])]),_v(" "),_c('h4',{staticClass:"no-index",attrs:{"id":"markdown"}},[_c('span',{staticClass:"anchor",attrs:{"id":"markdown"}}),_v("Markdown"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#markdown","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"scale","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_c('strong',[_v("Emoji header")]),_v(" 🚀")]),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_c('span',{staticClass:"underline"},[_v("emoji")]),_v(" content 🐱")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Hover")])])]),_v(" "),_c('h4',{staticClass:"no-index",attrs:{"id":"content-using-slot"}},[_c('span',{staticClass:"anchor",attrs:{"id":"content-using-slot"}}),_v("Content using slot"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#content-using-slot","onclick":"event.stopPropagation()"}})]),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"effect":"scale","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_c('strong',[_v("Emoji header")]),_v(" 🚀")]),_v(" "),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_c('div',[_v("\n This is a long content...\n ")])]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Hover")])]),_v(" "),_c('br'),_v(" "),_c('br'),_v(" "),_c('h4',{staticClass:"no-index",attrs:{"id":"wrap-text"}},[_c('span',{staticClass:"anchor",attrs:{"id":"wrap-text"}}),_v("Wrap Text"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#wrap-text","onclick":"event.stopPropagation()"}})]),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_v("false")]),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("Nice!")]),_v("What do you say")])])],1)]),_v(" "),_c('p',[_c('strong',[_v("Using trigger for Popover:")]),_c('br')]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_v("More about "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pop:trigger_id\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(">")]),_v(".\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pop:trigger_id\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This popover is triggered by a trigger\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v("This is the same "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pop:trigger_id\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(">")]),_v(" as last one.\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("More about "),_c('trigger',{attrs:{"for":"pop:trigger_id"}},[_v("trigger")]),_v(".\n"),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"id":"pop:trigger_id","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"content"}},[_v("This popover is triggered by a trigger")])]),_v(" "),_c('br'),_v("\nThis is the same "),_c('trigger',{attrs:{"for":"pop:trigger_id"}},[_v("trigger")]),_v(" as last one.")],1)])],1)]),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("More about triggers")])]},proxy:true}])},[_v(" "),_c('div',[_c('p',[_c('strong',[_c('strong',[_v("Triggers")])])]),_v(" "),_c('p',[_v("Trigger provides more flexibility in triggering contextual overlay via Tooltip, Popover or Modal.")]),_v(" "),_c('p',[_v("You could embed a Trigger within the text, and define the Tooltip, Popover or Modal at a separate location, which allows for a cleaner authoring flow.")]),_v(" "),_c('p',[_v("Specify the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(" attribute on the Tooltip, Popover or Modal component, and use the same "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(" in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("for")]),_v(" attribute of the Trigger to allow the Trigger to invoke the specific overlay elements.\nAdditionally, multiple Triggers could share the same overlay by providing them with the same "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(".\n"),_c('br')]),_v(" "),_c('p',[_c('strong',[_v("Trigger's "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("trigger")]),_v(" attribute (which defaults to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")]),_v(") is independent of the target's.")])]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("trigger")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")])]),_v(" "),_c('td',[_v("How the overlay view is triggered."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("click")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("focus")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("for")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("The id for the overlay view to be shown.")])]),_v(" "),_c('tr',[_c('td',[_v("placement")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("auto")])]),_v(" "),_c('td',[_v("How to position the Popover or Tooltip."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("auto")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("top")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("left")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("right")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bottom")]),_v(".")])])])])])])]),_c('p'),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("trigger")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")])]),_v(" "),_c('td',[_v("How the Popover is triggered."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("click")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("focus")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("header")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Popover header, supports inline markdown text.")])]),_v(" "),_c('tr',[_c('td',[_v("content")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Popover content, supports inline markdown text.")])]),_v(" "),_c('tr',[_c('td',[_v("placement")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("top")])]),_v(" "),_c('td',[_v("How to position the Popover."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("top")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("left")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("right")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bottom")]),_v(".")])])])])]),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("Hover over the "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pop:context-target\"")]),_v(">")]),_v("keyword"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(">")]),_v(" to see the popover.\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pop:context-target\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Popover header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"content\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("description :+1:\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("Hover over the "),_c('trigger',{attrs:{"for":"pop:context-target"}},[_v("keyword")]),_v(" to see the popover.")],1),_v(" "),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"id":"pop:context-target","placement":"top","data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_v("Popover header")]),_v(" "),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_c('div',[_c('p',[_v("description 👍")])])])])])],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Questions and Quizzes")])]),_v(" "),_c('div',[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("MCQ and Checkbox questions")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"MCQ and Checkbox questions","class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- use type=\"checkbox\" for checkbox questions -->")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"mcq\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which of these **contradicts** the heuristics recommended when creating test cases with multiple inputs?\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Insert the reason for the option using the reason attribute -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This is **correct**. We need to figure out if a positive test case works!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" It is ok to combine valid values for different inputs.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" No more than one invalid test input should be in a given test case.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Use the 'correct' attribute to indicate an option as correct. -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("correct")]),_v(">")]),_v("\n")]),_c('span',[_v(" All invalid test inputs must be tested together.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Optionally, you may use a reason slot instead of a reason attribute. -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"reason\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n")]),_c('span',[_v(" correctly by the SUT.\n")]),_c('span',[_v(" This is because most SUTs return an error message upon encountering the first invalid input.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" How do you figure out which inputs are wrong? (or correct)\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")])])])])]),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Text questions")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Text questions","class":"hljs html"}},[_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which country did the Hawaiian pizza originate from?\"")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hawaii\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("threshold")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"0.5\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("answer")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"It originated from Hawaii!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" Watch some pizza commercials! :tv:\n")]),_c('span',[_v("\n")]),_c('span',[_v(" :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza:\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")])])])])]),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Quiz")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Quiz","class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("quiz")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"mcq\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"checkbox\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("quiz")]),_v(">")]),_v("\n")])])])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"questions-and-quizzes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"questions-and-quizzes"}}),_v("Questions and Quizzes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#questions-and-quizzes","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',{staticClass:"mt-3"},[_v("Question and quiz components provide an easy way to test readers on the relevant content topic in the page.")]),_v(" "),_c('h4',{attrs:{"id":"introduction"}},[_c('span',{staticClass:"anchor",attrs:{"id":"introduction"}}),_v("Introduction"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#introduction","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Question components ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<question>")]),_v(") can be one of the following types: "),_c('strong',[_v("MCQ")]),_v(", "),_c('strong',[_v("Checkbox")]),_v(" or "),_c('strong',[_v("Text")]),_v(".")]),_v(" "),_c('p',[_v("In all cases, content directly inserted in between "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<question>...</question>")]),_v(" will be inserted into the "),_c('strong',[_v("question body")]),_v(".")]),_v(" "),_c('p',[_v("You can also insert markdown into the "),_c('strong',[_v("header")]),_v(" or "),_c('strong',[_v("hint box")]),_v(", by using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("header")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hint")]),_v(" attributes respectively. Click the hint button below to see how the hint box turns out!")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Header and Hint syntax")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html","heading":"Header and Hint syntax"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Insert markdown into the header and hint using the respective attributes -->")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"checkbox\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which of the following is correct?\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hint")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Think out of the box! :fas-box:\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Anything you place directly under a question not in a slot is inserted into the question body! -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("Adapted from [Daily Mail](https://www.dailymail.co.uk/femail/article-4702868/Can-pass-intelligence-test.html)\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Several hidden checkbox q-option components explained later -->")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")])])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Think out of the box! "),_c('span',{staticClass:"fas fa-box",attrs:{"aria-hidden":"true"}})])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Which of the following is correct?")])]},proxy:true}])},[_v(" "),_c('pic',{staticClass:"d-block mx-auto",attrs:{"src":"/images/math-question.jpg","alt":"math question image","height":"200"}},[_c('p',[_c('small',[_v("Adapted from "),_c('a',{attrs:{"href":"https://www.dailymail.co.uk/femail/article-4702868/Can-pass-intelligence-test.html"}},[_v("Daily Mail")])])])]),_c('p'),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Multiply the numbers on the left together and add the leftmost number!")])]},proxy:true}])},[_v("\n 96\n ")]),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Under normal circumstances, this would be correct.")])]},proxy:true}])},[_v("\n 19\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Simply add the running sum of the results as well!")])]},proxy:true}])},[_v("\n 40\n ")]),_v(" "),_c('q-option',[_v("\n 811\n ")])],1)],1)],1)]),_v(" "),_c('p',[_v("If you require more expressive formatting for your header or hint markup, you can use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<div slot=\"header\">")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<div slot=\"hint\">")]),_v(" slots. Expand the panel below to see an example!")]),_v(" "),_c('panel',{attrs:{"type":"minimal"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Header and Hint example "),_c('strong',[_v("with slots")])])]},proxy:true}])},[_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Headers and Hints using slots")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html","heading":"Headers and Hints using slots"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"checkbox\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which of the following is true?\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hint")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Think out of the box! :fas-box:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Header slot -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"header\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("Which of the following is correct?"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("Challenge: Try to get all the answers on your first try! ⭐️ ⭐️"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/images/math-question.jpg\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"math question image\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("height")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"200\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"d-block mx-auto\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("Adapted from "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://www.dailymail.co.uk/femail/article-4702868/Can-pass-intelligence-test.html\"")]),_v(">")]),_v("Daily Mail"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Several hidden checkbox q-option components explained later -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Hint slot -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("Think out of the box! "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("aria-hidden")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"true\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fas fa-box\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("Need another hint? "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Two of the answers are correct!\"")]),_v(">")]),_v("Hover over me!"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(">")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("aria-hidden")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"true\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fas fa-mouse-pointer\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")])])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('p',[_v("Which of the following is correct?")]),_v(" "),_c('p',[_v("Challenge: Try to get all the answers on your first try! ⭐️ ⭐️")])])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_c('p',[_v("Think out of the box! "),_c('span',{staticClass:"fas fa-box",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('p',[_v("Need another hint? "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("Two of the answers are correct!")]),_v("Hover over me!")]),_v(" "),_c('span',{staticClass:"fas fa-mouse-pointer",attrs:{"aria-hidden":"true"}})])])]},proxy:true}])},[_v(" "),_c('pic',{staticClass:"d-block mx-auto",attrs:{"src":"/images/math-question.jpg","alt":"math question image","height":"200"}},[_c('p',[_c('small',[_v("Adapted from "),_c('a',{attrs:{"href":"https://www.dailymail.co.uk/femail/article-4702868/Can-pass-intelligence-test.html"}},[_v("Daily Mail")])])])]),_c('p'),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Multiply the numbers on the left together and add the leftmost number!")])]},proxy:true}])},[_v("\n 96\n ")]),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Under normal circumstances, this would be correct.")])]},proxy:true}])},[_v("\n 19\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Simply add the running sum of the results as well!")])]},proxy:true}])},[_v("\n 40\n ")]),_v(" "),_c('q-option',[_v("\n 811\n ")])],1)],1)],1)])]),_v(" "),_c('box',{staticClass:"mt-3",attrs:{"type":"tip","seamless":""}},[_c('p',[_v("Placing the question into the header is entirely optional. You may also wish to include the question directly in the question body, omitting the header entirely.")])]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options and Slots common to all question types")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("type")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("The type of question. Supports "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mcq")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("checkbox")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("text")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("header"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("The markup to insert into the question header. The header is omitted if this is not provided.")])]),_v(" "),_c('tr',[_c('td',[_v("hint"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("The content to display in the hint box.")])])])])]),_c('h4',{staticClass:"mt-4 mb-3",attrs:{"id":"mcq-and-checkbox-questions"}},[_c('span',{staticClass:"anchor",attrs:{"id":"mcq-and-checkbox-questions"}}),_v("MCQ and Checkbox Questions"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#mcq-and-checkbox-questions","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("MCQ and checkbox questions are indicated with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"mcq\"")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"checkbox\"")]),_v(" attribute.")]),_v(" "),_c('p',[_v("In both instances, you can include the possible answers using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<q-option>")]),_v(" component, placed anywhere inside the "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("if you wish, you could place it in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("header")]),_v(" mentioned above as well!")]),_v("question")]),_v(". To indicate the correct option(s), add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<q-option correct>")]),_v(" attribute.")]),_v(" "),_c('p',[_v("Optionally, you can provide the reason for the particular option using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<q-option reason=\"...\">")]),_v(" attribute, or the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<div slot=\"reason\">")]),_v(" slot for more expressive formatting, similar to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hint")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("header")]),_v(" options and slots.")]),_v(" "),_c('p',[_c('strong',[_v("MCQ Questions")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"mcq\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which of these **contradicts** the heuristics recommended when creating test cases with multiple inputs?\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Insert the reason for the option using the reason attribute -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This is **correct**. We need to figure out if a positive test case works!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" It is ok to combine valid values for different inputs.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" No more than one invalid test input should be in a given test case.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Use the 'correct' attribute to indicate an option as correct. -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("correct")]),_v(">")]),_v("\n")]),_c('span',[_v(" All invalid test inputs must be tested together.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Optionally, you may use a reason slot instead of a reason attribute. -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"reason\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n")]),_c('span',[_v(" correctly by the SUT.\n")]),_c('span',[_v(" This is because most SUTs return an error message upon encountering the first invalid input.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" How do you figure out which inputs are wrong? (or correct)\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"mcq"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Which of these "),_c('strong',[_v("contradicts")]),_v(" the heuristics recommended when creating test cases with multiple inputs?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_v("\n How do you figure out which inputs are wrong? (or correct)\n ")])]},proxy:true}])},[_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("This is "),_c('strong',[_v("correct")]),_v(". We need to figure out if a positive test case works!")])]},proxy:true}])},[_v("\n Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n ")]),_v(" "),_c('q-option',[_v("\n It is ok to combine valid values for different inputs.\n ")]),_v(" "),_c('q-option',[_v("\n No more than one invalid test input should be in a given test case.\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('div',[_v("\n If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n correctly by the SUT.\n This is because most SUTs return an error message upon encountering the first invalid input.\n ")])]},proxy:true}])},[_v("\n All invalid test inputs must be tested together.\n \n ")])],1)],1)],1)]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_v("MCQ questions can have multiple correct options!")]),_v(" "),_c('p',[_c('strong',[_v("Checkbox Questions")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"checkbox\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hint")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Use your calculator! :fas-calculator:\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" ##### Which of the following is true?\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" 1 + 1 = 11\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Division by zero is **undefined**!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" 1 / 0 = infinity\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("correct")]),_v(">")]),_v("\n")]),_c('span',[_v(" 11 / 11 = 1\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Use your calculator! "),_c('span',{staticClass:"fas fa-calculator",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v(" "),_c('h5',{attrs:{"id":"which-of-the-following-is-true"}},[_c('span',{staticClass:"anchor",attrs:{"id":"which-of-the-following-is-true"}}),_v("Which of the following is true?"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#which-of-the-following-is-true","onclick":"event.stopPropagation()"}})]),_v(" "),_c('br'),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum")])]},proxy:true}])},[_v("\n 1 + 1 = 11\n ")]),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Division by zero is "),_c('strong',[_v("undefined")]),_v("!")])]},proxy:true}])},[_v("\n 1 / 0 = infinity\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""}},[_v("\n 11 / 11 = 1\n ")])],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("q-option")]),_v(" Options and Slots")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("correct")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether this option (placed under either a MCQ or checkbox question) is correct. You may have multiple correct answers in either case.")])]),_v(" "),_c('tr',[_c('td',[_v("reason"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("The explanation markup to display for the option once the answer is checked.")])])])])]),_c('h4',{staticClass:"mt-4 mb-3",attrs:{"id":"text-questions"}},[_c('span',{staticClass:"anchor",attrs:{"id":"text-questions"}}),_v("Text Questions"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#text-questions","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Text questions are specified with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"text\"")]),_v(" attribute.")]),_v(" "),_c('p',[_v("Unlike MCQ and checkbox questions, answer checking is performed by providing keywords to check for in the user's answer through the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("keywords")]),_v(" attribute.\nIf no keywords are provided, the answer will always be marked as correct when placed in quizzes.")]),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_c('p',[_v("Keywords are validated by simply looking for the keyword as a pattern in the user's answer!\nThis works well for some\n"),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"popover"}},[_c('span',{attrs:{"data-mb-slot-name":"header"}},[_v("When does validation work?")]),_v("cases\n"),_c('span',{attrs:{"data-mb-slot-name":"content"}},[_c('span',[_v("\nWhen the keywords specified are rather long (eg. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("requirements")]),_v("), it reduces the chance that this keyword can be mistakenly validated.\n"),_c('br'),_c('br'),_v("\nIn contrast, something short and common like "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("take")]),_v(" which can easily be part of another word (eg. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mis-take-nly")]),_v(") would be mistakenly validated.\n")])])]),_v("\nand not others.")])]),_v(" "),_c('p',[_v("You can provide your answer in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("answer")]),_v(" attribute, or similarly, the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<div slot=\"answer\">")]),_v(" slot for more expressive formatting.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which country did the Hawaiian pizza originate from?\"")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hawaii\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("threshold")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"0.5\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("answer")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"It originated from Hawaii!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" Watch some pizza commercials! :tv:\n")]),_c('span',[_v("\n")]),_c('span',[_v(" :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza:\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"text","keywords":"hawaii","threshold":"0.5"},scopedSlots:_u([{key:"answer",fn:function(){return [_c('p',[_v("It originated from Hawaii!")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Which country did the Hawaiian pizza originate from?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_c('p',[_v("Watch some pizza commercials! 📺")]),_v(" "),_c('p',[_v("🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕")])])]},proxy:true}])})],1)],1)]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_c('p',[_v("Since the validation is imperfect, the minimum proportion of keywords that need to be matched can also be changed using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("threshold")]),_v(" attribute.")]),_v(" "),_c('p',[_v("If you don't want to validate the answer at all, you may also omit the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("keywords")]),_v(" attribute entirely. Doing so also always marks the question as correct inside "),_c('a',{attrs:{"href":"#quizzes"}},[_v("quizzes")]),_v(".")])]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Text Question specific Options and Slots")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("keywords")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Comma delimited string of keywords or phrases to match the user's answer against.")])]),_v(" "),_c('tr',[_c('td',[_v("threshold")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Number")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0.5")])]),_v(" "),_c('td',[_v("Minimum proportion of keywords that have to be matched in the user's answer for the answer to be marked as correct.")])]),_v(" "),_c('tr',[_c('td',[_v("answer"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("The answer or explanation to display when the user clicks the check button.")])])])])]),_c('box',{attrs:{"type":"important"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Deprecation notes")])]},proxy:true}])},[_v(" "),_c('ul',[_c('li',[_v("The old "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("has-input")]),_v(" attributes translate to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"text\"")]),_v(", but will be deprecated in a future version.")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<question>")]),_v("s without a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type")]),_v(" (or an unrecognised one) will always be marked correct when placed in quizzes.")])])]),_v(" "),_c('h4',{attrs:{"id":"quizzes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"quizzes"}}),_v("Quizzes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#quizzes","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can also build a series of questions out of multiple "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<question>")]),_v(" components.")]),_v(" "),_c('p',[_v("Simply place the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<question>")]),_v(" components you want to include into the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<quiz>")]),_v(" component! No extra configuration is needed.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("quiz")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"mcq\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"checkbox\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("quiz")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('quiz',[_c('question',{attrs:{"type":"mcq"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Which of these "),_c('strong',[_v("contradicts")]),_v(" the heuristics recommended when creating test cases with multiple inputs?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_v("\n How do you figure out which inputs are wrong? (or correct)\n ")])]},proxy:true}])},[_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("This is "),_c('strong',[_v("correct")]),_v(". We need to figure out if a positive test case works!")])]},proxy:true}])},[_v("\n Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n ")]),_v(" "),_c('q-option',[_v("\n It is ok to combine valid values for different inputs.\n ")]),_v(" "),_c('q-option',[_v("\n No more than one invalid test input should be in a given test case.\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('div',[_v("\n If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n correctly by the SUT.\n This is because most SUTs return an error message upon encountering the first invalid input.\n ")])]},proxy:true}])},[_v("\n All invalid test inputs must be tested together.\n \n ")])],1),_v(" "),_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Use your calculator! "),_c('span',{staticClass:"fas fa-calculator",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v(" "),_c('h5',{attrs:{"id":"which-of-the-following-is-true-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"which-of-the-following-is-true-2"}}),_v("Which of the following is true?"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#which-of-the-following-is-true-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('br'),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum")])]},proxy:true}])},[_v("\n 1 + 1 = 11\n ")]),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Division by zero is "),_c('strong',[_v("undefined")]),_v("!")])]},proxy:true}])},[_v("\n 1 / 0 = infinity\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""}},[_v("\n 11 / 11 = 1\n ")])],1),_v(" "),_c('question',{attrs:{"type":"text","keywords":"hawaii","threshold":"0.5"},scopedSlots:_u([{key:"answer",fn:function(){return [_c('p',[_v("It originated from Hawaii!")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Which country did the Hawaiian pizza originate from?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_c('p',[_v("Watch some pizza commercials! 📺")]),_v(" "),_c('p',[_v("🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕")])])]},proxy:true}])})],1)],1)],1)]),_v(" "),_c('br'),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Quiz Options and Slots")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("intro")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Quiz intro markup above the question count.")])]),_v(" "),_c('tr',[_c('td',[_v("intro")]),_v(" "),_c('td',[_v("Slot")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Click start to begin")])]),_v(" "),_c('td',[_v("Quiz intro markup. Overrides the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("intro")]),_v(" attribute if both are present.")])])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("MCQ and Checkbox questions")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"MCQ and Checkbox questions","class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- use type=\"checkbox\" for checkbox questions -->")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"mcq\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which of these **contradicts** the heuristics recommended when creating test cases with multiple inputs?\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Insert the reason for the option using the reason attribute -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This is **correct**. We need to figure out if a positive test case works!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" It is ok to combine valid values for different inputs.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" No more than one invalid test input should be in a given test case.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Use the 'correct' attribute to indicate an option as correct. -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("correct")]),_v(">")]),_v("\n")]),_c('span',[_v(" All invalid test inputs must be tested together.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Optionally, you may use a reason slot instead of a reason attribute. -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"reason\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n")]),_c('span',[_v(" correctly by the SUT.\n")]),_c('span',[_v(" This is because most SUTs return an error message upon encountering the first invalid input.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" How do you figure out which inputs are wrong? (or correct)\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")])])])])]),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Text questions")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Text questions","class":"hljs html"}},[_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which country did the Hawaiian pizza originate from?\"")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hawaii\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("threshold")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"0.5\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("answer")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"It originated from Hawaii!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" Watch some pizza commercials! :tv:\n")]),_c('span',[_v("\n")]),_c('span',[_v(" :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza:\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")])])])])]),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Quiz")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Quiz","class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("quiz")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"mcq\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"checkbox\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("quiz")]),_v(">")]),_v("\n")])])])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('div',[_c('quiz',[_c('question',{attrs:{"type":"mcq"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Which of these "),_c('strong',[_v("contradicts")]),_v(" the heuristics recommended when creating test cases with multiple inputs?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_v("\n How do you figure out which inputs are wrong? (or correct)\n ")])]},proxy:true}])},[_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("This is "),_c('strong',[_v("correct")]),_v(". We need to figure out if a positive test case works!")])]},proxy:true}])},[_v("\n Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n ")]),_v(" "),_c('q-option',[_v("\n It is ok to combine valid values for different inputs.\n ")]),_v(" "),_c('q-option',[_v("\n No more than one invalid test input should be in a given test case.\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('div',[_v("\n If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n correctly by the SUT.\n This is because most SUTs return an error message upon encountering the first invalid input.\n ")])]},proxy:true}])},[_v("\n All invalid test inputs must be tested together.\n \n ")])],1),_v(" "),_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Use your calculator! "),_c('span',{staticClass:"fas fa-calculator",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v("\n\n ##### Which of the following is true?\n\n "),_c('br'),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum")])]},proxy:true}])},[_v("\n 1 + 1 = 11\n ")]),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Division by zero is "),_c('strong',[_v("undefined")]),_v("!")])]},proxy:true}])},[_v("\n 1 / 0 = infinity\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""}},[_v("\n 11 / 11 = 1\n ")])],1),_v(" "),_c('question',{attrs:{"type":"text","keywords":"hawaii","threshold":"0.5"},scopedSlots:_u([{key:"answer",fn:function(){return [_c('p',[_v("It originated from Hawaii!")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Which country did the Hawaiian pizza originate from?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_v("\n\n Watch some pizza commercials! :tv:\n\n :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza:\n ")])]},proxy:true}])})],1)],1)])],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Search Bars")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(">")]),_v("\n")])])]),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"search-bars"}},[_c('span',{staticClass:"anchor",attrs:{"id":"search-bars"}}),_v("Search Bars"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#search-bars","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("searchbar")]),_v(" component allows users to search all headings within any page on the site.")]),_v(" "),_c('span',{attrs:{"id":"body"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search (Right-aligned dropdown)\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(">")]),_v("\n")])])]),_c('p',[_v("To use the searchbar within a navbar, add the following markup to your file. The searchbar can be positioned using the slot attribute for the list. The following markup adds a searchbar to the right side of the navbar with appropriate styling.")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Enter a search term (eg. 'search bar') to see the search result dropdown.")]),_v(" "),_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback}}),_v(" "),_c('br'),_v(" "),_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search (Right-aligned dropdown)","on-hit":searchCallback,"menu-align-right":""}})],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("algolia")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether the searchbar should be connected to "),_c('a',{attrs:{"href":"/userGuide/usingPlugins.html#algolia-enabling-algolia-docsearch"}},[_v("Algolia DocSearch")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("data")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Array")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The local data source for suggestions. Expected to be a primitive array. To use MarkBind's search functionality, set this value to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"searchData\"")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("menu-align-right")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether the search bar's dropdown list will be right-aligned.")])]),_v(" "),_c('tr',[_c('td',[_v("on-hit")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Function")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("A callback function when you click or hit return on an item. To use MarkBind's search functionality, set this value to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"searchCallback\"")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("placeholder")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("The placeholder text shown when no keywords are entered in the search bar.")])])])])]),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Note: If you are using MarkBind's search functionality, then "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("enableSearch")]),_v(" "),_c('strong',[_v("must be set to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("true")]),_v(" in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")])]),_v(".")]),_v(" "),_c('p',[_v("See: "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#enable-search"}},[_v("User Guide: Site Configuration → enableSearch")]),_v(".")])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" Related topic: "),_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("User Guide: Making the Site Searchable")]),_v(".")])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" Related topic: "),_c('a',{attrs:{"href":"/userGuide/usingPlugins.html#algolia-enabling-algolia-docsearch"}},[_v("User Guide: Using Plugins → Algolia: Enabling Algolia DocSearch")]),_v(".")])]),_v(" "),_c('p')],1),_v(" "),_c('p'),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(">")]),_v("\n")])])]),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback}})],1)])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Site Navigation Menus")])]),_v(" "),_c('div',[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs"}},[_c('span',[_v("<site-nav>\n")]),_c('span',[_v("* [**Getting Started**](/userGuide/gettingStarted.html)\n")]),_c('span',[_v("* **Authoring Contents** :expanded:\n")]),_c('span',[_v(" * [Overview](/userGuide/authoringContents.html)\n")]),_c('span',[_v(" * [Adding Pages](/userGuide/addingPages.html)\n")]),_c('span',[_v(" * [MarkBind Syntax Overview](/userGuide/markBindSyntaxOverview.html)\n")]),_c('span',[_v(" * [Formatting Contents](/userGuide/formattingContents.html)\n")]),_c('span',[_v(" * [Using Components](/userGuide/usingComponents.html)\n")]),_c('span',[_v("</site-nav>\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")])])])])])])],1)],1)],1)])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"site-navigation-menus"}},[_c('span',{staticClass:"anchor",attrs:{"id":"site-navigation-menus"}}),_v("Site Navigation Menus"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#site-navigation-menus","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{attrs:{"id":"content"}},[_c('p',[_c('strong',[_v("A "),_c('em',[_v("Site Navigation Menu")]),_v(" ("),_c('mark',[_c('em',[_v("siteNav")]),_v(" for short")]),_v(") can be used to show a road map of the main pages of your site.")])]),_v(" "),_c('p',[_v("Steps to add a siteNav:")]),_v(" "),_c('ol',[_c('li',[_v("Format your siteNav as an unordered Markdown list")]),_v(" "),_c('li',[_v("Include it under a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<site-nav>")]),_v(" element.")]),_v(" "),_c('li',[_v("(Optional) To make siteNav accessible on smaller screens, you can use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<site-nav-button />")]),_v(" component in the "),_c('a',{attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("navbar")]),_v(".")])]),_v(" "),_c('div',{attrs:{"id":"short"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs"}},[_c('span',[_v("<site-nav>\n")]),_c('span',[_v("* [**Getting Started**](/userGuide/gettingStarted.html)\n")]),_c('span',[_v("* **Authoring Contents** :expanded:\n")]),_c('span',[_v(" * [Overview](/userGuide/authoringContents.html)\n")]),_c('span',[_v(" * [Adding Pages](/userGuide/addingPages.html)\n")]),_c('span',[_v(" * [MarkBind Syntax Overview](/userGuide/markBindSyntaxOverview.html)\n")]),_c('span',[_v(" * [Formatting Contents](/userGuide/formattingContents.html)\n")]),_c('span',[_v(" * [Using Components](/userGuide/usingComponents.html)\n")]),_c('span',[_v("</site-nav>\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")])])])])])])],1)],1)],1)])]),_v(" "),_c('p',[_v("MarkBind has styles nested lists with additional padding and smaller text sizes up to "),_c('strong',[_v("4")]),_v(" nesting levels.\nBeyond that, you'd have to include your own styles.")]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Expanding menu items by default")])])]),_v(" "),_c('p',[_v("You can "),_c('strong',[_v("append the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(":expanded:")]),_v(" to a "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("a menu item with sub menu-items")]),_v("parent menu item")]),_v(" to make it expand by default.")]),_v(" In the example above, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("* Docs :expanded:")]),_v(" will make the menu item "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Docs")]),_v(" expand by default.")]),_v(" "),_c('p',[_v("A parent menu item that is also linked will not be collapsible "),_c('span',{staticClass:"dimmed"},[_v("e.g., the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Search")]),_v(" menu item in the above example")]),_v(".")])]),_v(" "),_c('div',{attrs:{"id":"examples"}})])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Tables")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("Animal | Trainable?| Price | Remarks\n")]),_c('span',[_v(":----- | :-------: | ----: | ----\n")]),_c('span',[_v("Ants | no | 5 |\n")]),_c('span',[_v("Bees | no | 20 |\n")]),_c('span',[_v("Cats|yes|100|\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"tables"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tables"}}),_v("Tables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tables","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("Animal | Trainable?| Price | Remarks\n")]),_c('span',[_v(":----- | :-------: | ----: | ----\n")]),_c('span',[_v("Ants | no | 5 |\n")]),_c('span',[_v("Bees | no | 20 |\n")]),_c('span',[_v("Cats|yes|100|\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',{staticStyle:{"text-align":"left"}},[_v("Animal")]),_v(" "),_c('th',{staticStyle:{"text-align":"center"}},[_v("Trainable?")]),_v(" "),_c('th',{staticStyle:{"text-align":"right"}},[_v("Price")]),_v(" "),_c('th',[_v("Remarks")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Ants")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("no")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("5")]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Bees")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("no")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("20")]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Cats")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("yes")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("100")]),_v(" "),_c('td')])])])])])],1)]),_v(" "),_c('ul',[_c('li',[_v("Colons ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(":")]),_v(") in the 2nd line are optional and they indicates whether to left/center/right-align the values in that column.")]),_v(" "),_c('li',[_v("There is no need to align pipe symbols to be on a vertical line; it's just for aesthetic purposes only.")])]),_v(" "),_c('p',[_c('small',[_v("More info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/extended-syntax#tables"}},[_v("https://www.markdownguide.org/extended-syntax#tables")])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("Animal | Trainable?| Price | Remarks\n")]),_c('span',[_v(":----- | :-------: | ----: | ----\n")]),_c('span',[_v("Ants | no | 5 |\n")]),_c('span',[_v("Bees | no | 20 |\n")]),_c('span',[_v("Cats|yes|100|\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',{staticStyle:{"text-align":"left"}},[_v("Animal")]),_v(" "),_c('th',{staticStyle:{"text-align":"center"}},[_v("Trainable?")]),_v(" "),_c('th',{staticStyle:{"text-align":"right"}},[_v("Price")]),_v(" "),_c('th',[_v("Remarks")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Ants")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("no")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("5")]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Bees")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("no")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("20")]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Cats")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("yes")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("100")]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}})])])])])]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}}),_v(" "),_c('td',{staticStyle:{"text-align":"right"}}),_v(" "),_c('td')])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Tabs")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tabs")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"First tab\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Content of the first tab\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Second tab\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Contents of the second tab\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Third tab group :tv:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Stars :star:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Some stuff about stars ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Moon\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Some stuff about the moon ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tabs")]),_v(">")]),_v("\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"tabs"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tabs"}}),_v("Tabs"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tabs","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tabs")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"First tab\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Disabled second tab :x:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("disabled")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tab not printed\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"d-print-none\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" This tab will not be printed.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Third tab group :milky_way:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Stars :star:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Some stuff about stars ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Disabled Moon :new_moon:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("disabled")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Disabled fourth tab group\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("disabled")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hidden tab\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tabs")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('tabs',[_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("First tab")]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n ")]),_v(" "),_c('tab',{attrs:{"disabled":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Disabled second tab ❌")]},proxy:true}])}),_v(" "),_c('tab',{staticClass:"d-print-none",scopedSlots:_u([{key:"header",fn:function(){return [_v("Tab not printed")]},proxy:true}])},[_v("\n This tab will not be printed.\n ")]),_v(" "),_c('tab-group',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Third tab group 🌌")]},proxy:true}])},[_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Stars ⭐️")]},proxy:true}])},[_v("\n Some stuff about stars ...\n ")]),_v(" "),_c('tab',{attrs:{"disabled":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Disabled Moon 🌑")]},proxy:true}])})],1),_v(" "),_c('tab-group',{attrs:{"disabled":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Disabled fourth tab group")]},proxy:true}])},[_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Hidden tab")]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n ")])],1)],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tabs")]),_v(":")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("active")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Number")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0")])]),_v(" "),_c('td',[_v("Active Tab index (0-based)")])])])])]),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tab")]),_v(":")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("header")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Tab title.")])]),_v(" "),_c('tr',[_c('td',[_v("disabled")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether Tab is clickable and can be activated.")])])])])]),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tab-group")]),_v(":")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("header")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Tab Group title.")])]),_v(" "),_c('tr',[_c('td',[_v("disabled")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether Tab Group is clickable and can be activated.")])])])])]),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("Tabs, tab group and individual tab can be omitted during printing by adding bootstrap's display property "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("class=\"d-print-none\"")]),_v(" to the respective components.")])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tabs")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"First tab\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Content of the first tab\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Second tab\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Contents of the second tab\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Third tab group :tv:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Stars :star:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Some stuff about stars ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Moon\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Some stuff about the moon ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tabs")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('tabs',[_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("First tab")]},proxy:true}])},[_v("\n Content of the first tab\n ")]),_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Second tab")]},proxy:true}])},[_v("\n Contents of the second tab\n ")]),_v(" "),_c('tab-group',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Third tab group 📺")]},proxy:true}])},[_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Stars ⭐️")]},proxy:true}])},[_v("\n Some stuff about stars ...\n ")]),_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Moon")]},proxy:true}])},[_v("\n Some stuff about the moon ...\n ")])],1)],1)],1)],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Tags")])]),_v(" "),_c('div',[_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java advanced\"")]),_v(">")]),_v("System.out.println(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C# basic\"")]),_v(">")]),_v("Console.WriteLine(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")])])]),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: \"Hello World\"\n")]),_c('span',[_v(" tags: [\"language--java\"]\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")])])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('div',[_c('h3',{attrs:{"id":"plugin-tags"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugin-tags"}}),_v("Plugin: Tags"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-tags","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("With this plugin you can use tags to selectively filter content when building a site.")]),_v(" "),_c('h4',{attrs:{"id":"toggling-alternative-contents"}},[_c('span',{staticClass:"anchor",attrs:{"id":"toggling-alternative-contents"}}),_v("Toggling alternative contents"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#toggling-alternative-contents","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Tags are specified by the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tags")]),_v(" attribute, "),_c('strong',[_v("and can be attached to any HTML element")]),_v(". During rendering, only elements that match tags specified in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" files will be rendered.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Attaching tags to elements:")],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("# Print 'Hello world'\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v(">")]),_v("System.out.println(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C#\"")]),_v(">")]),_v("Console.WriteLine(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--python\"")]),_v(">")]),_v("print(\"Hello world\")"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")])])]),_c('p',[_v("You need to specify the tags to include in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pluginsContext")]),_v(", under "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tags")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"plugins\"")]),_v(" : [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"filterTags\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pluginsContext\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"filterTags\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"tags\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v("]\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])]),_c('p',[_v("All other tagged elements will be filtered out. In this case, only the element with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--java")]),_v(" tag will be rendered. This is helpful when creating multiple versions of a page without having to maintain separate copies.")])]),_v(" "),_c('p',[_v("If the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("filterTags")]),_v(" plugin is not enabled in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(", all tagged elements will be rendered.")]),_v(" "),_c('p',[_c('strong',[_v("You can also use multiple tags in a single HTML element. Specify each tag in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tags")]),_v(" attribute")]),_v(" separated by a space. An element will be rendered if "),_c('strong',[_v("any of the tags")]),_v(" matches the one in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(".")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Attaching multiple tags to an element:")],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("# For loops\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java language--C#\"")]),_v(">")]),_v("for (int i = 0; i < 5; i++) { ... }"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")])])]),_c('p',[_v("As long as the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--java")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--C#")]),_v(" tag is specified, the code snippet will be rendered.")])]),_v(" "),_c('p',[_v("Alternatively, you can specify tags to render for a page in the front matter.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Specifying tags in front matter:")],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: \"Hello World\"\n")]),_c('span',[_v(" tags: [\"language--java\"]\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java advanced\"")]),_v(">")]),_v("System.out.println(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C# basic\"")]),_v(">")]),_v("Console.WriteLine(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")])])]),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: \"Hello World\"\n")]),_c('span',[_v(" tags: [\"language--java\"]\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_v("Tags in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" will be merged with the ones in the front matter, and are processed after front matter tags. See "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#hiding-tags"}},[_v("Hiding Tags")]),_v(" for more information.")]),_v(" "),_c('h4',{attrs:{"id":"advanced-tagging-tips"}},[_c('span',{staticClass:"anchor",attrs:{"id":"advanced-tagging-tips"}}),_v("Advanced Tagging Tips"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#advanced-tagging-tips","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can use a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("*")]),_v(" in a tag name to match elements more generally. A "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("*")]),_v(" in a tag will match any number of characters at its position.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Using general tags:")],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: \"Hello World\"\n")]),_c('span',[_v(" tags: [\"language--*\"]\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v(">")]),_v("System.out.println(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C#\"")]),_v(">")]),_v("Console.WriteLine(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--python\"")]),_v(">")]),_v("print(\"Hello world\")"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")])])]),_c('p',[_v("All 3 "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<p>")]),_v("s will be shown.")])]),_v(" "),_c('h4',{attrs:{"id":"hiding-tags"}},[_c('span',{staticClass:"anchor",attrs:{"id":"hiding-tags"}}),_v("Hiding Tags"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#hiding-tags","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Using "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v(" at the start of a tag hides all tags matching the expression. This is helpful for disabling a group of tags and enabling a particular tag.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Using general tags:")],1),_v(" "),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading inline-markdown-heading"},[_c('span',[_c('a',{attrs:{"href":"http://index.md"}},[_v("index.md")])])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"index.md","class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: \"Hello World\"\n")]),_c('span',[_v(" tags: [\"language--java\"]\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v(">")]),_v("System.out.println(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C#\"")]),_v(">")]),_v("Console.WriteLine(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--python\"")]),_v(">")]),_v("print(\"Hello world\")"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")])])])])]),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"plugins\"")]),_v(" : [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"filterTags\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pluginsContext\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"filterTags\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"tags\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"-language--*\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C#\"")]),_v("]\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])])])]),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--java")]),_v(" is overridden by "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-language--*")]),_v(", so only "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--C#")]),_v(" is shown.")])]),_v(" "),_c('p',[_v("This only works because tags are processed left to right, so all "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--*")]),_v(" tags are hidden before "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--C#")]),_v(". Tags in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" are processed after tags in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<frontmatter>")]),_v(".")]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("# Print 'Hello world'\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v(">")]),_v("System.out.println(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C#\"")]),_v(">")]),_v("Console.WriteLine(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--python\"")]),_v(">")]),_v("print(\"Hello world\")"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")])])]),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"plugins\"")]),_v(" : [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"filterTags\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pluginsContext\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"filterTags\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"tags\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v("]\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java advanced\"")]),_v(">")]),_v("System.out.println(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C# basic\"")]),_v(">")]),_v("Console.WriteLine(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")])])]),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: \"Hello World\"\n")]),_c('span',[_v(" tags: [\"language--java\"]\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")])])])])])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Text Styles")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**Bold**")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_Italic_")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__"),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_Bold and Italic"),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__"),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_, `Inline Code`")])])])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("~~Strike through~~, "),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("****")]),_v("Super Bold"),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("****")]),_v(", !!Underline!!, ==Highlight==, %%Dim%%, ++Large++, --Small--, Super^script^, Sub~script~")])])])]),_v("\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"text-styles"}},[_c('span',{staticClass:"anchor",attrs:{"id":"text-styles"}}),_v("Text Styles"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#text-styles","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Markdown text styles:")]),_v(" "),_c('span',{attrs:{"id":"main-example-markdown"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**Bold**")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_Italic_")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__"),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_Bold and Italic"),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__"),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_, `Inline Code`")])])])]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('strong',[_v("Bold")]),_v(", "),_c('em',[_v("Italic")]),_v(", "),_c('em',[_c('strong',[_v("Bold and Italic")])]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Inline Code")])])])],1)])]),_v(" "),_c('p',[_v("Additional syntax from GFMD:")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("~~Strike through~~\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('s',[_v("Strike through")])])])],1)]),_v(" "),_c('p',[_v("Syntax added by MarkBind:")]),_v(" "),_c('span',{attrs:{"id":"main-example-markbind"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("****")]),_v("Super Bold"),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("****")]),_v(", !!Underline!!, ==Highlight==, %%Dim%%, ++Large++, --Small--, Super^script^, Sub~script~\n")]),_c('span',[_v("->Center-align<-\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('strong',[_c('strong',[_v("Super Bold")])]),_v(", "),_c('span',{staticClass:"underline"},[_v("Underline")]),_v(", "),_c('mark',[_v("Highlight")]),_v(", "),_c('span',{staticClass:"dimmed"},[_v("Dim")]),_v(", "),_c('span',{staticClass:"large"},[_v("Large")]),_v(", "),_c('span',{staticClass:"small"},[_v("Small")]),_v(", Super"),_c('sup',[_v("script")]),_v(", Sub"),_c('sub',[_v("script")])]),_c('div',{staticClass:"text-center"},[_v("Center-align")]),_c('p')])],1)])]),_v(" "),_c('p',[_c('small',[_v("Alternative syntax: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/basic-syntax#emphasis"}},[_v("https://www.markdownguide.org/basic-syntax#emphasis")])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**Bold**")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_Italic_")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__"),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_Bold and Italic"),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__"),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_, `Inline Code`")])])])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("~~Strike through~~, "),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("****")]),_v("Super Bold"),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("****")]),_v(", !!Underline!!, ==Highlight==, %%Dim%%, ++Large++, --Small--, Super^script^, Sub~script~")])])])]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_c('strong',[_v("Bold")]),_v(", "),_c('em',[_v("Italic")]),_v(", "),_c('em',[_c('strong',[_v("Bold and Italic")])]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Inline Code")]),_v(" "),_c('s',[_v("Strike through")]),_v(", "),_c('strong',[_c('strong',[_v("Super Bold")])]),_v(", "),_c('span',{staticClass:"underline"},[_v("Underline")]),_v(", "),_c('mark',[_v("Highlight")]),_v(", "),_c('span',{staticClass:"dimmed"},[_v("Dim")]),_v(", "),_c('span',{staticClass:"large"},[_v("Large")]),_v(", "),_c('span',{staticClass:"small"},[_v("Small")]),_v(", Super"),_c('sup',[_v("script")]),_v(", Sub"),_c('sub',[_v("script")])])]),_c('p')])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Thumbnails")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumb")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("circle")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://markbind.org/images/logo-lightbackground.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"thumbnails"}},[_c('span',{staticClass:"anchor",attrs:{"id":"thumbnails"}}),_v("Thumbnails"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#thumbnails","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("A "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("thumbnail")]),_v(" component allows you to insert thumbnails using text, images, or icons.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("circle")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../../images/deer.jpg\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("circle")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":book:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("background")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dff5ff\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("circle")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"___CS___\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("background")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#333\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("font-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"white\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("circle")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-book:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("font-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"darkgreen\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("border")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"3px solid darkgreen\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../../images/deer.jpg\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":book:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("background")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dff5ff\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"___CS___\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("background")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#333\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("font-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"white\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-book:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("font-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"darkgreen\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("border")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"3px solid darkgreen\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('thumbnail',{attrs:{"circle":"","src":"/images/deer.jpg","size":"100"}}),_v(" "),_c('thumbnail',{attrs:{"circle":"","background":"#dff5ff","size":"100"}},[_v("📖")]),_v(" "),_c('thumbnail',{attrs:{"circle":"","background":"#333","font-color":"white","size":"100"}},[_c('em',[_c('strong',[_v("CS")])])]),_v(" "),_c('thumbnail',{attrs:{"circle":"","font-color":"darkgreen","border":"3px solid darkgreen","size":"100"}},[_c('span',{staticClass:"fas fa-book",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('thumbnail',{attrs:{"src":"/images/deer.jpg","size":"100"}}),_v(" "),_c('thumbnail',{attrs:{"background":"#dff5ff","size":"100"}},[_v("📖")]),_v(" "),_c('thumbnail',{attrs:{"background":"#333","font-color":"white","size":"100"}},[_c('em',[_c('strong',[_v("CS")])])]),_v(" "),_c('thumbnail',{attrs:{"font-color":"darkgreen","border":"3px solid darkgreen","size":"100"}},[_c('span',{staticClass:"fas fa-book",attrs:{"aria-hidden":"true"}})])],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("alt")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_c('strong',[_v("This must be specified if "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" is specified")]),_c('br'),_v("The alternative text of the image.")])]),_v(" "),_c('tr',[_c('td',[_v("background")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("Specifies the background color."),_c('br'),_v(" Accepts any valid CSS background property")])]),_v(" "),_c('tr',[_c('td',[_v("border")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("Specifies the border thickness, type, and color."),_c('br'),_v(" Accepts any valid CSS border property")])]),_v(" "),_c('tr',[_c('td',[_v("circle")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boolean")])]),_v(" "),_c('td',[_v("false")]),_v(" "),_c('td',[_v("If this option is enabled, the thumbnail will be circle shaped instead of square")])]),_v(" "),_c('tr',[_c('td',[_v("font-color")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The color of the text, affects normal text and icons (but not emojis)")])]),_v(" "),_c('tr',[_c('td',[_v("font-size")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("Text size, defaults to half of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("size")]),_v(", affects text, icons and emojis")])]),_v(" "),_c('tr',[_c('td',[_v("size")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("100")]),_v(" "),_c('td',[_v("The size of the thumbnail in pixels")])]),_v(" "),_c('tr',[_c('td',[_v("src")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The URL of the image."),_c('br'),_v("The URL can be specified as absolute or relative references. More info in: "),_c('em',[_c('a',{attrs:{"href":"/userGuide/formattingContents.html#intraSiteLinks"}},[_v("Intra-Site Links")])])])]),_v(" "),_c('tr',[_c('td',[_v("text")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The text to use in the thumbnail, "),_c('a',{attrs:{"href":"/userGuide/formattingContents.html#icons"}},[_v("icons")]),_v(", "),_c('a',{attrs:{"href":"/userGuide/formattingContents.html#emoji"}},[_v("emojis")]),_v(" and markdown are supported here")])])])])]),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("If both "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("text")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" are specified, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" will take higher priority.")])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumb")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("circle")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://markbind.org/images/logo-lightbackground.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('thumb',{pre:true,attrs:{"circle":"","src":"https://markbind.org/images/logo-lightbackground.png","size":"100"}})],1)],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Tooltips")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("Hover "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"An explanation, **supports simple Markdown**\"")]),_v(">")]),_v("here"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(">")]),_v(" to see a tooltip.\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"tooltips"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tooltips"}}),_v("Tooltips"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tooltips","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on top"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"left\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on left"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on right"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"bottom\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on bottom"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("hr")]),_v(" />")]),_v("\n")]),_c('span',[_v("Trigger\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trigger")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"click\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Click"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(" />")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(" />")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trigger")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"focus\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("input")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Focus\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("input")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("**Markdown**:\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*Hello* **World**\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"\"")]),_v(">")]),_v("Hover me"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(" />")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("**Free Text**:\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"coupling is the degree of interdependence between software modules; a measure of how closely connected two routines or modules are; the strength of the relationships between modules.\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("i")]),_v(">")]),_v("coupling"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("i")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"placement":"top","data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on top")])]),_v(" "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.left.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"left":true,"html":true}}],staticClass:"trigger",attrs:{"placement":"left","data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on left")])]),_v(" "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.right.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"right":true,"html":true}}],staticClass:"trigger",attrs:{"placement":"right","data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on right")])]),_v(" "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.bottom.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"bottom":true,"html":true}}],staticClass:"trigger",attrs:{"placement":"bottom","data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on bottom")])]),_v(" "),_c('hr'),_v("\nTrigger\n"),_c('p',[_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.click.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"click":true,"top":true,"html":true}}],staticClass:"trigger-click",attrs:{"placement":"top","trigger":"click","data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Click")])]),_v(" "),_c('br'),_v(" "),_c('br'),_v(" "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.focus.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"focus":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"placement":"top","trigger":"focus","data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("Lorem ipsum dolor sit amet")]),_v(" "),_c('input',{attrs:{"placeholder":"Focus"}})])]),_v(" "),_c('p',[_c('strong',[_v("Markdown")]),_v(":\n"),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_c('em',[_v("Hello")]),_v(" "),_c('strong',[_v("World")])]),_v(" "),_c('a',{attrs:{"href":""}},[_v("Hover me")])]),_v(" "),_c('br')]),_v(" "),_c('p',[_c('strong',[_v("Free Text")]),_v(":\n"),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("coupling is the degree of interdependence between software modules; a measure of how closely connected two routines or modules are; the strength of the relationships between modules.")]),_c('i',[_v("coupling")])])])])],1)]),_v(" "),_c('p',[_c('strong',[_v("Using trigger for Tooltip:")]),_c('br')]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_v("More about "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tt:trigger_id\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(">")]),_v(".\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tt:trigger_id\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This tooltip triggered by a trigger\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v("This is the same "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tt:trigger_id\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(">")]),_v(" as last one.\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("More about "),_c('trigger',{attrs:{"for":"tt:trigger_id"}},[_v("trigger")]),_v(".\n"),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"id":"tt:trigger_id","data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("This tooltip triggered by a trigger")])]),_v(" "),_c('br'),_v("\nThis is the same "),_c('trigger',{attrs:{"for":"tt:trigger_id"}},[_v("trigger")]),_v(" as last one.")],1)])],1)]),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("More about triggers")])]},proxy:true}])},[_v(" "),_c('div',[_c('p',[_c('strong',[_c('strong',[_v("Triggers")])])]),_v(" "),_c('p',[_v("Trigger provides more flexibility in triggering contextual overlay via Tooltip, Popover or Modal.")]),_v(" "),_c('p',[_v("You could embed a Trigger within the text, and define the Tooltip, Popover or Modal at a separate location, which allows for a cleaner authoring flow.")]),_v(" "),_c('p',[_v("Specify the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(" attribute on the Tooltip, Popover or Modal component, and use the same "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(" in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("for")]),_v(" attribute of the Trigger to allow the Trigger to invoke the specific overlay elements.\nAdditionally, multiple Triggers could share the same overlay by providing them with the same "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(".\n"),_c('br')]),_v(" "),_c('p',[_c('strong',[_v("Trigger's "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("trigger")]),_v(" attribute (which defaults to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")]),_v(") is independent of the target's.")])]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("trigger")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")])]),_v(" "),_c('td',[_v("How the overlay view is triggered."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("click")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("focus")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("for")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("The id for the overlay view to be shown.")])]),_v(" "),_c('tr',[_c('td',[_v("placement")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("auto")])]),_v(" "),_c('td',[_v("How to position the Popover or Tooltip."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("auto")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("top")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("left")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("right")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bottom")]),_v(".")])])])])])])]),_c('p'),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("trigger")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")])]),_v(" "),_c('td',[_v("How the tooltip is triggered."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("click")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("focus")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("content")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Text content of the tooltip.")])]),_v(" "),_c('tr',[_c('td',[_v("placement")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("top")])]),_v(" "),_c('td',[_v("How to position the tooltip."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("top")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("left")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("right")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bottom")]),_v(".")])])])])]),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("Hover "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"An explanation, **supports simple Markdown**\"")]),_v(">")]),_v("here"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(">")]),_v(" to see a tooltip.\n")])])])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("Hover "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("An explanation, "),_c('strong',[_v("supports simple Markdown")])]),_v("here")]),_v(" to see a tooltip.\n")])]),_c('p')],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Variables")])]),_v(" "),_c('div',[_c('p',[_v("Global variables:")]),_v(" "),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/variables.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("variable")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"year\"")]),_v(">")]),_v("2018"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(">")]),_v("\n")])])]),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("The year was {{ year }}.")])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/reusingContents.html#variables"}},[_c('em',[_v("User Guide → Reusing Contents → Variables")])])])]),_v(" "),_c('h2',{attrs:{"id":"variables"}},[_c('span',{staticClass:"anchor",attrs:{"id":"variables"}}),_v("Variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#variables","onclick":"event.stopPropagation()"}})]),_v(" "),_c('span',{attrs:{"id":"overview"}},[_c('p',[_c('strong',[_v("Nunjucks "),_c('a',{attrs:{"href":"https://mozilla.github.io/nunjucks/templating.html#set"}},[_v("variables")]),_v(" are ideal for reusing small bits of code")]),_v(" in multiple places; you can define a variable to represent the code bit in question and reuse it anywhere in the site by referring to the variable instead of duplicating the code bit.\n")])]),_c('p'),_v(" "),_c('p',[_v("MarkBind does not aim to alter the already robust variable features of nunjucks, but provides several extensions to it.")]),_v(" "),_c('h3',{attrs:{"id":"global-variables"}},[_c('span',{staticClass:"anchor",attrs:{"id":"global-variables"}}),_v("Global Variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#global-variables","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Global variables are to be defined in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/variables.md")]),_v(" file.")]),_v(" Each variable must have an "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("name")]),_v(" and the value can be any MarkBind-compliant code fragment. The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("name")]),_v(" should not contain "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".")]),_v(". For example, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("search-option")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("search.options")]),_v(" are not allowed.")]),_v(" "),_c('p',[_v("The variables declared here are available from anywhere in the code base.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Here's how you can define two variables "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("year")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("options")]),_v(":")],1),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("variable")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"year\"")]),_v(">")]),_v("2018"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("variable")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("variable")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"options\"")]),_v(">")]),_v("\n")]),_c('span',[_v("* yes\n")]),_c('span',[_v("* no\n")]),_c('span',[_v("* maybe\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("variable")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_v("To include a variable value in your code, give the variable id enclosed in Nunjucks' double curly braces syntax.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("The year was {{ year }}.")]),_v(" "),_c('span',{staticClass:"fas fa-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" The year was 2018.")],1)]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Global variables ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/variables.md")]),_v(") will take precedence over any variables set via Nunjucks' tags (e.g. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{% set %}")]),_v(").")])]),_v(" "),_c('h4',{attrs:{"id":"built-in-global-variables"}},[_c('span',{staticClass:"anchor",attrs:{"id":"built-in-global-variables"}}),_v("Built-in Global Variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#built-in-global-variables","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("MarkBind also provides a number of built-in variables.")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Variable")]),_v(" "),_c('th',[_v("Notes")]),_v(" "),_c('th',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])],1),_v(" "),_c('th',[_v("Output")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")])]),_v(" "),_c('td',[_v("Represents the root directory of the site on the server, as configured in your "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#baseurl"}},[_v("site configuration")]),_v(" file. "),_c('br'),_v(" Used for specifying "),_c('a',{attrs:{"href":"/userGuide/formattingContents.html#intra-site-links"}},[_v("intra-site links")]),_v(".")]),_v(" "),_c('td',[_v("If "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")]),_v(" is specified as "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("userGuide/")]),_v(":"),_c('br'),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<img src=\"{{baseUrl}}/images/logo.png\" />")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<img src=\"userGuide/images/logo.png\" />")])])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("timestamp")])]),_v(" "),_c('td',[_v("The time stamp that indicates when the page was generated. "),_c('br'),_c('br'),_v(" The "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#timezone"}},[_v("default")]),_v(" values of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"timeZone\"")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"locale\"")]),_v(" are "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"UTC\"")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"en-GB\"")]),_v(" respectively.")]),_v(" "),_c('td',[_v("The following example showcases the use of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"Asia/Singapore\"")]),_v(" time zone."),_c('br'),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Page generated at: {{timestamp}}")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Page generated at: Sat, 22 Jan 2022, 16:49:34 UTC")])])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("MarkBind")])]),_v(" "),_c('td',[_v("The MarkBind version in use, linked to the MarkBind website.")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Page generated by: {{MarkBind}}")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Page generated by:")]),_v(" "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 3.1.1")])])])])])]),_c('h3',{attrs:{"id":"importing-variables-from-other-external-file-formats"}},[_c('span',{staticClass:"anchor",attrs:{"id":"importing-variables-from-other-external-file-formats"}}),_v("Importing variables from other external file formats"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#importing-variables-from-other-external-file-formats","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can also source variables from external files using MarkBind's "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{% ext varName = \"filepathToFile\" %}")]),_v(" Nunjucks extension.\nThis is useful if you have external datasets you want to display in your site!")]),_v(" "),_c('p',[_v("To do so, assign a root variable name ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("varName")]),_v(") to the file path from the "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("similar to how you assign filepaths for other Nunjucks tags")]),_v("root directory of the site")]),_v(". You may then access the file's variables using dot "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("varName.xx")]),_v(" or array "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("varName[i]")]),_v(" syntax, depending on the file's contents.")]),_v(" "),_c('tabs',[_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Importing from JSON files")]},proxy:true}])},[_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])],1),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Displaying a student scoreboard stored as JSON")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Displaying a student scoreboard stored as JSON","class":"hljs html"}},[_c('span',[_v("{% ext studentScoreboard = \"userGuide/syntax/extra/scoreboard.json\" %}\n")]),_c('span',[_v("\n")]),_c('span',[_v("Student Number | Score | Rank\n")]),_c('span',[_v(":----- | :-------: | ----\n")]),_c('span',[_v("{% for student in studentScoreboard.students -%}\n")]),_c('span',[_v("{{ student.number }} | {{ student.score }} | {{ student.rank }}\n")]),_c('span',[_v("{% endfor %}\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("Last updated at {{ studentScoreboard.lastUpdated }}"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("\n")])])])])]),_c('panel',{attrs:{"type":"minimal"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Json file used in example")])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Json File")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Json File","class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"lastUpdated\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"21 November, 2020\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"students\"")]),_v(": [\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"number\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"A1234567X\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"score\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("87")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"rank\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("1")]),_v("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"number\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"A1234123U\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"score\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("60")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"rank\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("3")]),_v("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"number\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"A9876543L\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"score\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("76")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"rank\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("2")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" ]\n")]),_c('span',[_v("}\n")])])])])])]),_v(" "),_c('br')],1),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',{staticStyle:{"text-align":"left"}},[_v("Student Number")]),_v(" "),_c('th',{staticStyle:{"text-align":"center"}},[_v("Score")]),_v(" "),_c('th',[_v("Rank")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("A1234567X")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("87 / 100")]),_v(" "),_c('td',[_v("1")])]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("A1234123U")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("60 / 100")]),_v(" "),_c('td',[_v("3")])]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("A9876543L")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("76 / 100")]),_v(" "),_c('td',[_v("2")])])])])]),_c('p',[_c('small',[_v("Last updated at 21 November, 2020")])])])],1)]),_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Importing from CSV files")]},proxy:true}])},[_v(" "),_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])],1),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Displaying a student scoreboard stored as CSV")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Displaying a student scoreboard stored as CSV","class":"hljs html"}},[_c('span',[_v("{% ext studentScoreboard = \"userGuide/syntax/extra/scoreboard.csv\" %}\n")]),_c('span',[_v("\n")]),_c('span',[_v("Student Number | Score | Rank\n")]),_c('span',[_v(":----- | :-------: | ----\n")]),_c('span',[_v("{% for student in studentScoreboard -%}\n")]),_c('span',[_v("{{ student.number }} | {{ student.score }} | {{ student.rank }}\n")]),_c('span',[_v("{% endfor %}\n")])])])])]),_c('panel',{attrs:{"type":"minimal"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("CSV file used in example")])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("CSV File")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"CSV File","class":"hljs"}},[_c('span',[_v("number,score,rank\n")]),_c('span',[_v("A1234567X,87,1\n")]),_c('span',[_v("A1234123U,60,3\n")]),_c('span',[_v("A9876543L,76,2\n")])])])])])]),_v(" "),_c('br'),_v(" "),_c('box',{attrs:{"border-left-color":"#00B0F0"}},[_c('p',[_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-lightbulb",attrs:{"aria-hidden":"true"}})]),_v(" If you do not want to have a header row, you can specify it by appending a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("noHeader")]),_v(" option at the end of the variable declaration. In this example, it should be "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{% ext studentScoreboard = \"userGuide/syntax/extra/scoreboard.csv\", noHeader %}")]),_v(" . Elements have to be accessed using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("[]")]),_v(" operator (i.e. using "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("student[0]")]),_v(" to access student number instead of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("student.number")]),_v(").")])])],1),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',{staticStyle:{"text-align":"left"}},[_v("Student Number")]),_v(" "),_c('th',{staticStyle:{"text-align":"center"}},[_v("Score")]),_v(" "),_c('th',[_v("Rank")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("A1234567X")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("87 / 100")]),_v(" "),_c('td',[_v("1")])]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("A1234123U")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("60 / 100")]),_v(" "),_c('td',[_v("3")])]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("A9876543L")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("76 / 100")]),_v(" "),_c('td',[_v("2")])])])])])])],1)])],1),_v(" "),_c('box',{attrs:{"type":"info","seamless":""}},[_c('p',[_v("Only "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".json")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".csv")]),_v(" files are supported for now.")])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('p',[_v("Global variables:")]),_v(" "),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/variables.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("variable")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"year\"")]),_v(">")]),_v("2018"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(">")]),_v("\n")])])]),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("The year was {{ year }}.")])])])],1)])]),_c('hr',{staticClass:"footnotes-sep"}),_v(" "),_c('section',{staticClass:"footnotes"},[_c('ol',{staticClass:"footnotes-list"},[_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"id":"pop:footnotefn-56-1","data-mb-component-type":"popover"}},[_m(1)]),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"id":"pop:footnotefn-56-2","data-mb-component-type":"popover"}},[_m(2)]),_c('span',{directives:[{name:"b-popover",rawName:"v-b-popover.hover.top.html",value:(popoverInnerGetters),expression:"popoverInnerGetters",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"id":"pop:footnotefn-56-3","data-mb-component-type":"popover"}},[_m(3)]),_v(" "),_m(4),_v(" "),_m(5),_v(" "),_m(6)])]),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})],1),_v(" "),_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"})])],1),_v(" "),_m(7)])} +}; + var pageVueStaticRenderFns = [function anonymous( +) { +with(this){return _c('h1',{attrs:{"id":"syntax-cheat-sheet"}},[_c('span',{staticClass:"anchor",attrs:{"id":"syntax-cheat-sheet"}}),_v("Syntax Cheat Sheet"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#syntax-cheat-sheet","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('span',{attrs:{"data-mb-slot-name":"content"}},[_c('div',[_c('p',[_v("Here is the footnote. Footnotes will appear at the bottom of the page.")])])])} +},function anonymous( +) { +with(this){return _c('span',{attrs:{"data-mb-slot-name":"content"}},[_c('div',[_c('p',[_v("Here's one with multiple blocks.")]),_v(" "),_c('p',[_v("Subsequent paragraphs are indented to show that they\nbelong to the previous footnote.")])])])} +},function anonymous( +) { +with(this){return _c('span',{attrs:{"data-mb-slot-name":"content"}},[_c('div',[_c('p',[_v("Inlines notes are easier to write, since\nyou don't have to pick an identifier and move down to type the\nnote.")])])])} +},function anonymous( +) { +with(this){return _c('li',{staticClass:"footnote-item",attrs:{"id":"fn-56-1"}},[_c('p',[_v("Here is the footnote. Footnotes will appear at the bottom of the page.")])])} +},function anonymous( +) { +with(this){return _c('li',{staticClass:"footnote-item",attrs:{"id":"fn-56-2"}},[_c('p',[_v("Here's one with multiple blocks.")]),_v(" "),_c('p',[_v("Subsequent paragraphs are indented to show that they\nbelong to the previous footnote.")])])} +},function anonymous( +) { +with(this){return _c('li',{staticClass:"footnote-item",attrs:{"id":"fn-56-3"}},[_c('p',[_v("Inlines notes are easier to write, since\nyou don't have to pick an identifier and move down to type the\nnote.")])])} +},function anonymous( +) { +with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 3.1.1")]),_v(" on Sat, 22 Jan 2022, 16:49:34 UTC]")]),_c('br'),_v(" "),_c('small',[_v("This site is powered by "),_c('a',{attrs:{"href":"https://www.netlify.com/"}},[_v("Netlify")]),_v(".")])])])])} +}]; + \ No newline at end of file diff --git a/userGuide/templates.html b/userGuide/templates.html new file mode 100644 index 0000000..62a4a18 --- /dev/null +++ b/userGuide/templates.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="generator" content="MarkBind 3.1.1"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>MarkBind - User Guide: Templates + + + + + + + + + + + + + + + + +

                Templates

                Templates

                MarkBind allows you to start off your new project with different templates.

                During initialization you can add a flag --template <template-key> to select a different template to initialize with. For example:

                markbind init --template minimal
+

                Supported Templates

                Name Template key Description Quick Deploy
                Default default Default template if --template is unspecified. Filled with Markbind features to guide you to author better content.
                Minimal minimal Minimalistic template that gets you started quickly
                + + + diff --git a/userGuide/templates.page-vue-render.js b/userGuide/templates.page-vue-render.js new file mode 100644 index 0000000..96e4ad0 --- /dev/null +++ b/userGuide/templates.page-vue-render.js @@ -0,0 +1,13 @@ + + var pageVueRenderFn = function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',[_c('header',{attrs:{"fixed":""}},[_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/index.html","title":"Home"}},[_c('img',{attrs:{"src":"/images/logo-darkbackground.svg","height":"20"}})])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('form',{staticClass:"navbar-form"},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback,"menu-align-right":""}})],1)])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/index.html"}},[_v("HOME")])]),_v(" "),_c('div',{attrs:{"tags":"environment--ug"}},[_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"sibling-or-child","href":"/userGuide/index.html"}},[_v("USER GUIDE")])])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/showcase.html"}},[_v("SHOWCASE")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/about.html"}},[_v("ABOUT")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_c('span',[_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}})])])])])],1)]),_v(" "),_c('div',{attrs:{"id":"flex-body"}},[_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"site-nav","tag-name":"nav","to":"site-nav"}},[_c('div',{staticClass:"site-nav-top"},[_c('div',{staticClass:"font-weight-bold mb-2",staticStyle:{"font-size":"1.25rem"}},[_v("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tipsAndTricks.html"}},[_v("Tips & Tricks")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/glossary.html"}},[_v("Glossary")])])])])])])],1)],1)]),_v(" "),_m(0),_v(" "),_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"})])],1),_v(" "),_m(1)])} +}; + var pageVueStaticRenderFns = [function anonymous( +) { +with(this){return _c('div',{staticClass:"fixed-header-padding",attrs:{"id":"content-wrapper"}},[_c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}},[_v("Templates")])]),_v(" "),_c('h1',{attrs:{"id":"templates"}},[_c('span',{staticClass:"anchor",attrs:{"id":"templates"}}),_v("Templates"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#templates","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("MarkBind allows you to start off your new project with different templates.")]),_v(" "),_c('p',[_v("During initialization you can add a flag "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--template ")]),_v(" to select a different template to initialize with. For example:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("markbind init --template minimal\n")])])]),_c('h2',{attrs:{"id":"supported-templates"}},[_c('span',{staticClass:"anchor",attrs:{"id":"supported-templates"}}),_v("Supported Templates"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#supported-templates","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Template key")]),_v(" "),_c('th',[_v("Description")]),_v(" "),_c('th',[_v("Quick Deploy")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("Default")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default")])]),_v(" "),_c('td',[_v("Default template if "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--template")]),_v(" is unspecified. Filled with Markbind features to guide you to author better content.")]),_v(" "),_c('td',[_c('a',{attrs:{"href":"https://app.netlify.com/start/deploy?repository=https://github.com/MarkBind/init-typical-netlify"}},[_c('img',{attrs:{"src":"https://www.netlify.com/img/deploy/button.svg"}})])])]),_v(" "),_c('tr',[_c('td',[_v("Minimal")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("minimal")])]),_v(" "),_c('td',[_v("Minimalistic template that gets you started quickly")]),_v(" "),_c('td',[_c('a',{attrs:{"href":"https://app.netlify.com/start/deploy?repository=https://github.com/MarkBind/init-minimal-netlify"}},[_c('img',{attrs:{"src":"https://www.netlify.com/img/deploy/button.svg"}})])])])])])]),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})])} +},function anonymous( +) { +with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 3.1.1")]),_v(" on Sat, 22 Jan 2022, 16:49:34 UTC]")]),_c('br'),_v(" "),_c('small',[_v("This site is powered by "),_c('a',{attrs:{"href":"https://www.netlify.com/"}},[_v("Netlify")]),_v(".")])])])])} +}]; + \ No newline at end of file diff --git a/userGuide/themes.html b/userGuide/themes.html new file mode 100644 index 0000000..168284a --- /dev/null +++ b/userGuide/themes.html @@ -0,0 +1,37 @@ + + + + + + + + MarkBind - User Guide: Themes + + + + + + + + + + + + + + + + +

                Themes

                User Guide → Themes

                Themes

                MarkBind supports the ability to style your website with a variety of bootstrap themes.

                Specifying a Theme

                You can specify a theme for your site by using the style.bootstrapTheme property of your site.json configuration file.

                For example, to apply the Cerulean theme, add the following configuration:

                site.json
                {
+  "style": {
+    "bootstrapTheme": "bootswatch-cerulean"
+  }
+}
+

                If no such property is specified, your site will be styled with default Bootstrap theme.

                Supported Themes

                Currently, MarkBind supports all light themes from Bootswatch. Visit each of the theme pages below to see how different visual components are styled.

                bootswatch-cerulean
                bootswatch-cosmo
                bootswatch-flatly
                bootswatch-journal
                bootswatch-litera
                bootswatch-lumen
                bootswatch-lux
                bootswatch-materia
                bootswatch-minty
                bootswatch-pulse
                bootswatch-sandstone
                bootswatch-simplex
                bootswatch-sketchy
                bootswatch-spacelab
                bootswatch-united
                bootswatch-yeti

                Making the Site Searchable

                Deploying the Site


                + + + diff --git a/userGuide/themes.page-vue-render.js b/userGuide/themes.page-vue-render.js new file mode 100644 index 0000000..6605067 --- /dev/null +++ b/userGuide/themes.page-vue-render.js @@ -0,0 +1,40 @@ + + var pageVueRenderFn = function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',[_c('header',{attrs:{"fixed":""}},[_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/index.html","title":"Home"}},[_c('img',{attrs:{"src":"/images/logo-darkbackground.svg","height":"20"}})])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('form',{staticClass:"navbar-form"},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback,"menu-align-right":""}})],1)])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/index.html"}},[_v("HOME")])]),_v(" "),_c('div',{attrs:{"tags":"environment--ug"}},[_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"sibling-or-child","href":"/userGuide/index.html"}},[_v("USER GUIDE")])])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/showcase.html"}},[_v("SHOWCASE")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/about.html"}},[_v("ABOUT")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_c('span',[_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}})])])])])],1)]),_v(" "),_c('div',{attrs:{"id":"flex-body"}},[_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"site-nav","tag-name":"nav","to":"site-nav"}},[_c('div',{staticClass:"site-nav-top"},[_c('div',{staticClass:"font-weight-bold mb-2",staticStyle:{"font-size":"1.25rem"}},[_v("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tipsAndTricks.html"}},[_v("Tips & Tricks")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/glossary.html"}},[_v("Glossary")])])])])])])],1)],1)]),_v(" "),_c('div',{staticClass:"fixed-header-padding",attrs:{"id":"content-wrapper"}},[_m(0),_v(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_m(4),_v(" "),_m(5),_v(" "),_c('p',[_v("For example, to apply the Cerulean theme, add the following configuration:")]),_v(" "),_m(6),_c('p',[_v("If no such property is specified, your site will be styled with default Bootstrap theme.")]),_v(" "),_m(7),_v(" "),_m(8),_v(" "),_c('div',{staticClass:"container-fluid"},[_c('div',{staticClass:"row"},[_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-cerulean"}},[_c('span',{staticClass:"anchor",attrs:{"id":"bootswatch-cerulean"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-cerulean")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-cerulean","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/cerulean/"}},[_c('img',{attrs:{"src":"/images/bootswatch/cerulean.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-cosmo"}},[_c('span',{staticClass:"anchor",attrs:{"id":"bootswatch-cosmo"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-cosmo")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-cosmo","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/cosmo/"}},[_c('img',{attrs:{"src":"/images/bootswatch/cosmo.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-flatly"}},[_c('span',{staticClass:"anchor",attrs:{"id":"bootswatch-flatly"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-flatly")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-flatly","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/flatly/"}},[_c('img',{attrs:{"src":"/images/bootswatch/flatly.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-journal"}},[_c('span',{staticClass:"anchor",attrs:{"id":"bootswatch-journal"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-journal")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-journal","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/journal/"}},[_c('img',{attrs:{"src":"/images/bootswatch/journal.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-litera"}},[_c('span',{staticClass:"anchor",attrs:{"id":"bootswatch-litera"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-litera")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-litera","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/litera/"}},[_c('img',{attrs:{"src":"/images/bootswatch/litera.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-lumen"}},[_c('span',{staticClass:"anchor",attrs:{"id":"bootswatch-lumen"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-lumen")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-lumen","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/lumen/"}},[_c('img',{attrs:{"src":"/images/bootswatch/lumen.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-lux"}},[_c('span',{staticClass:"anchor",attrs:{"id":"bootswatch-lux"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-lux")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-lux","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/lux/"}},[_c('img',{attrs:{"src":"/images/bootswatch/lux.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-materia"}},[_c('span',{staticClass:"anchor",attrs:{"id":"bootswatch-materia"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-materia")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-materia","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/materia/"}},[_c('img',{attrs:{"src":"/images/bootswatch/materia.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-minty"}},[_c('span',{staticClass:"anchor",attrs:{"id":"bootswatch-minty"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-minty")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-minty","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/minty/"}},[_c('img',{attrs:{"src":"/images/bootswatch/minty.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-pulse"}},[_c('span',{staticClass:"anchor",attrs:{"id":"bootswatch-pulse"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-pulse")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-pulse","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/pulse/"}},[_c('img',{attrs:{"src":"/images/bootswatch/pulse.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-sandstone"}},[_c('span',{staticClass:"anchor",attrs:{"id":"bootswatch-sandstone"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-sandstone")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-sandstone","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/sandstone/"}},[_c('img',{attrs:{"src":"/images/bootswatch/sandstone.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-simplex"}},[_c('span',{staticClass:"anchor",attrs:{"id":"bootswatch-simplex"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-simplex")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-simplex","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/simplex/"}},[_c('img',{attrs:{"src":"/images/bootswatch/simplex.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-sketchy"}},[_c('span',{staticClass:"anchor",attrs:{"id":"bootswatch-sketchy"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-sketchy")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-sketchy","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/sketchy/"}},[_c('img',{attrs:{"src":"/images/bootswatch/sketchy.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-spacelab"}},[_c('span',{staticClass:"anchor",attrs:{"id":"bootswatch-spacelab"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-spacelab")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-spacelab","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/spacelab/"}},[_c('img',{attrs:{"src":"/images/bootswatch/spacelab.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-united"}},[_c('span',{staticClass:"anchor",attrs:{"id":"bootswatch-united"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-united")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-united","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/united/"}},[_c('img',{attrs:{"src":"/images/bootswatch/united.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-yeti"}},[_c('span',{staticClass:"anchor",attrs:{"id":"bootswatch-yeti"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-yeti")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-yeti","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/yeti/"}},[_c('img',{attrs:{"src":"/images/bootswatch/yeti.png"}})])])],1)])]),_v(" "),_m(9),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})]),_v(" "),_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"})])],1),_v(" "),_m(10)])} +}; + var pageVueStaticRenderFns = [function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}},[_v("Themes")])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_c('em',[_v("User Guide → Themes")])])])])} +},function anonymous( +) { +with(this){return _c('h1',{attrs:{"id":"themes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"themes"}}),_v("Themes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#themes","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p',[_c('strong',[_v("MarkBind supports the ability to style your website with a variety of bootstrap themes.")])])])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"specifying-a-theme"}},[_c('span',{staticClass:"anchor",attrs:{"id":"specifying-a-theme"}}),_v("Specifying a Theme"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#specifying-a-theme","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("You can specify a theme for your site by using the "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#style"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("style.bootstrapTheme")]),_v(" property")]),_v(" of your "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" configuration file.")])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"style\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"bootstrapTheme\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"bootswatch-cerulean\"")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])])])])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"supported-themes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"supported-themes"}}),_v("Supported Themes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#supported-themes","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("Currently, MarkBind supports all light themes from "),_c('a',{attrs:{"href":"https://bootswatch.com/"}},[_v("Bootswatch")]),_v(". Visit each of the theme pages below to see how different visual components are styled.")])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-left"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Making the Site Searchable")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-right"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/deployingTheSite.html"}},[_c('span',[_c('span',[_v("Deploying the Site")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} +},function anonymous( +) { +with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 3.1.1")]),_v(" on Sat, 22 Jan 2022, 16:49:34 UTC]")]),_c('br'),_v(" "),_c('small',[_v("This site is powered by "),_c('a',{attrs:{"href":"https://www.netlify.com/"}},[_v("Netlify")]),_v(".")])])])])} +}]; + \ No newline at end of file diff --git a/userGuide/tipsAndTricks.html b/userGuide/tipsAndTricks.html new file mode 100644 index 0000000..77fcac2 --- /dev/null +++ b/userGuide/tipsAndTricks.html @@ -0,0 +1,71 @@ + + + + + + + + MarkBind - User Guide: Tips & Tricks + + + + + + + + + + + + + + + + +

                Tips & Tricks

                Tips & Tricks

                Escaping Characters

                For Markdown syntax: To display a literal character that are normally used for Markdown formatting, add a backslash (\) in front of the character.

                CODE:

                \* item 1
+
+* item 1
+

                OUTPUT:

                * item 1

                • item 1

                More info: https://www.markdownguide.org/basic-syntax#escaping-characters

                Using {% raw %}{% endraw %} to display {{ content }}

                To display the raw variable interpolation syntax using {% raw %}{% endraw %}, you would also need to add +the v-pre attribute using markdown-it-attrs or as a html attribute.

                This isn't necessary for <code> elements, markdown code fences and inline code though, which markbind automatically +adds v-pre for.

                However, this does not change the need for {% raw %}{% endraw %}. Meaning, you can still use variables within your code!

                When you use links or triggers, you may encounter a situation where an unwanted space is being generated by MarkBind:

                • Code:

                  The
+[[link](https://example.com)].
+

                • Expected output: +The [link].

                • Actual output (notice the additional space in front of the link): +The [ link].

                • Solution: +Wrap the link or trigger around with <md> tags.

                  The
+<md>[[link](https://example.com)]</md>.
+
                Configuring Online Deployment platforms to use specific MarkBind version

                Configuring CI platforms to use specific MarkBind version

                When the default CI configuration for deployment is used, the latest version of MarkBind will be used in the CI workflows. This may be a later version of MarkBind than the one you use locally.

                • If you want to specify a version of MarkBind (eg. v1.6.3), you have to modify the step where markbind-cli is being installed to npm i -g markbind-cli@v1.6.3. For example, for Travis-CI, you can modifiy the install step in .travis.yml as follows:

                  install:
+  - npm i -g markbind-cli@1.6.3
+

                • If you want to use the latest minor version automatically until the next major version (as major versions usually contain breaking changes), you can add a ^ in front of the version number. In the example below, Travis will use the latest version of MarkBind but will stop before 2.*

                  install:
+  - npm i -g markbind-cli@^1.6.3
+

                Setting up Netlify to use a specific version of MarkBind

                Here are the steps to set up Netlify to use a specific version of MarkBind.

                1. Navigate to the root directory of your site.

                2. Run npm init which will create package.json and package.lock.json

                3. Run npm install markbind-cli@1.6.3 --save to install markbind as a dependency (using v1.6.3 as an example)

                4. Create / Update .gitignore file in the root directory and add:

                  node_modules
+

                5. Update ignore in site.json to include

                  node_modules/*
+.gitignore
+

                6. Now, follow the previous instructions for setting up Netlify but with the following difference:
                  +In step 5, Set the Build Command to markbind build --baseUrl
                Indent components

                In some cases, you may want to indent components such as panels and boxes to match the surrounding content. +This is easily achieved by adding some margin and padding utility classes from Bootstrap +to the component. The following examples show how to do this.

                Indent Box component

                CODE:

                <box>Some text at level 1</box>
+
+<box class="ml-4">Some text at level 2</box>
+
+<box>Some text at level 1</box>
+

                OUTPUT:

                Some text at level 1
                Some text at level 2
                Some text at level 1

                Indent Panel component

                CODE:

                <panel header="This panel is at level 1">
+  ...
+</panel>
+<panel header="This panel is at level 2" class="ml-3">
+  The "ml-3" is arbitarily chosen i.e "ml-0" to "ml-5" are all possible values.
+</panel>
+<panel header="This panel is at level 1">
+  ...
+</panel>
+

                OUTPUT:

                This panel is at level 1

                This panel is at level 2

                This panel is at level 1

                Indent Included component

                The following box component will be included via <include>.

                Some text from include

                CODE:

                <box>Some text at level 1 (before included content)</box>
+<include src="tipsAndTricks.md#forIndentDemo" class="ml-5"></include>
+<box>Some text at level 1 (after included content)</box>
+

                OUTPUT:

                Some text at level 1 (before included content)
                Some text from include
                Some text at level 1 (after included content)
                + + + diff --git a/userGuide/tipsAndTricks.page-vue-render.js b/userGuide/tipsAndTricks.page-vue-render.js new file mode 100644 index 0000000..158702d --- /dev/null +++ b/userGuide/tipsAndTricks.page-vue-render.js @@ -0,0 +1,94 @@ + + var pageVueRenderFn = function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',[_c('header',{attrs:{"fixed":""}},[_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/index.html","title":"Home"}},[_c('img',{attrs:{"src":"/images/logo-darkbackground.svg","height":"20"}})])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('form',{staticClass:"navbar-form"},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback,"menu-align-right":""}})],1)])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/index.html"}},[_v("HOME")])]),_v(" "),_c('div',{attrs:{"tags":"environment--ug"}},[_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"sibling-or-child","href":"/userGuide/index.html"}},[_v("USER GUIDE")])])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/showcase.html"}},[_v("SHOWCASE")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/about.html"}},[_v("ABOUT")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_c('span',[_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}})])])])])],1)]),_v(" "),_c('div',{attrs:{"id":"flex-body"}},[_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"site-nav","tag-name":"nav","to":"site-nav"}},[_c('div',{staticClass:"site-nav-top"},[_c('div',{staticClass:"font-weight-bold mb-2",staticStyle:{"font-size":"1.25rem"}},[_v("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tipsAndTricks.html"}},[_v("Tips & Tricks")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/glossary.html"}},[_v("Glossary")])])])])])])],1)],1)]),_v(" "),_c('div',{staticClass:"fixed-header-padding",attrs:{"id":"content-wrapper"}},[_m(0),_v(" "),_m(1),_v(" "),_c('span',{attrs:{"id":"escapingCharacters"}},[_m(2),_v(" "),_m(3),_v(" "),_c('div',[_m(4),_v(" "),_m(5),_v(" "),_m(6),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("* item 1")]),_v(" "),_c('ul',[_c('li',[_v("item 1")])])])],1)])]),_v(" "),_m(7),_v(" "),_c('hr'),_v(" "),_m(8),_v(" "),_m(9),_v(" "),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("This isn't necessary for "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" elements, markdown code fences and inline code though, which markbind automatically\nadds "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("v-pre")]),_v(" for.")]),_v(" "),_c('p',[_v("However, this does not change the need for "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{% raw %}{% endraw %}")]),_v(". Meaning, you can still use variables within your code!")])]),_v(" "),_c('hr'),_v(" "),_m(10),_v(" "),_c('p',[_v("When you use links or triggers, you may encounter a situation where an unwanted space is being generated by MarkBind:")]),_v(" "),_m(11),_v(" "),_c('hr'),_v(" "),_m(12),_v(" "),_c('hr'),_v(" "),_c('span',{attrs:{"id":"indentComponents"}},[_m(13),_v(" "),_m(14),_v(" "),_m(15),_v(" "),_c('div',[_m(16),_v(" "),_m(17),_v(" "),_m(18),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',[_v("Some text at level 1")]),_v(" "),_c('box',{staticClass:"ml-4"},[_v("Some text at level 2")]),_v(" "),_c('box',[_v("Some text at level 1")])],1)],1)]),_v(" "),_m(19),_v(" "),_c('div',[_m(20),_v(" "),_m(21),_v(" "),_m(22),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This panel is at level 1")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{staticClass:"ml-3",scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This panel is at level 2")])]},proxy:true}])},[_v("\n The \"ml-3\" is arbitarily chosen i.e \"ml-0\" to \"ml-5\" are all possible values.\n")]),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This panel is at level 1")])]},proxy:true}])},[_v("\n ...\n")])],1)],1)]),_v(" "),_m(23),_v(" "),_m(24),_v(" "),_c('span',{attrs:{"id":"forIndentDemo"}},[_c('box',[_v("Some text from include")])],1),_v(" "),_c('div',[_m(25),_v(" "),_m(26),_v(" "),_m(27),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',[_v("Some text at level 1 (before included content)")]),_v(" "),_c('div',{staticClass:"ml-5"},[_c('box',[_v("Some text from include")])],1),_v(" "),_c('box',[_v("Some text at level 1 (after included content)")])],1)],1)])]),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})],1),_v(" "),_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"},[_c('overlay-source',{staticClass:"nav nav-pills flex-column my-0 small no-flex-wrap",attrs:{"id":"mb-page-nav","tag-name":"nav","to":"mb-page-nav"}},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#tips-and-amp-tricks"}},[_v("Tips & Tricks‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#escaping-characters"}},[_v(" Escaping Characters‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#using-raw-endraw-to-display-content"}},[_v(" Using {% raw %}{% endraw %} to display {{ content }}‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#unwanted-starting-space-in-links-and-triggers"}},[_v(" Unwanted starting space in links and triggers‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#configuring-online-deployment-platforms-to-use-specific-markbind-version"}},[_v(" Configuring Online Deployment platforms to use specific MarkBind version‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#indent-components"}},[_v(" Indent components‎")])])])],1)])],1),_v(" "),_m(28)])} +}; + var pageVueStaticRenderFns = [function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}},[_v("Tips & Tricks")])])} +},function anonymous( +) { +with(this){return _c('h1',{attrs:{"id":"tips-and-amp-tricks"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tips-and-amp-tricks"}}),_v("Tips & Tricks"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tips-and-amp-tricks","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"escaping-characters"}},[_c('span',{staticClass:"anchor",attrs:{"id":"escaping-characters"}}),_c('span',{staticClass:"fas fa-lightbulb",attrs:{"aria-hidden":"true"}}),_v(" Escaping Characters"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#escaping-characters","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("For Markdown syntax: To display a literal character that are normally used for Markdown formatting, add a backslash ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\\")]),_v(") in front of the character.")])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs markdown"}},[_c('span',[_v("\\"),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("* item 1")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("*")]),_v(" item 1\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('small',[_v("More info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/basic-syntax#escaping-characters"}},[_v("https://www.markdownguide.org/basic-syntax#escaping-characters")])])])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"using-raw-endraw-to-display-content"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-raw-endraw-to-display-content"}}),_c('span',{staticClass:"fas fa-lightbulb",attrs:{"aria-hidden":"true"}}),_v(" Using {% raw %}{% endraw %} to display "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{{ content }}")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-raw-endraw-to-display-content","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("To display the raw variable interpolation syntax using "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{% raw %}{% endraw %}")]),_v(", you would also need to add\nthe "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("v-pre")]),_v(" attribute using markdown-it-attrs or as a html attribute.")])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"unwanted-starting-space-in-links-and-triggers"}},[_c('span',{staticClass:"anchor",attrs:{"id":"unwanted-starting-space-in-links-and-triggers"}}),_c('span',{staticClass:"fas fa-info",attrs:{"aria-hidden":"true"}}),_v(" Unwanted starting space in links and triggers"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#unwanted-starting-space-in-links-and-triggers","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('ul',[_c('li',[_c('p',[_v("Code:"),_c('br')]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("The\n")]),_c('span',[_v("[[link](https://example.com)].\n")])])])]),_v(" "),_c('li',[_c('p',[_v("Expected output:\n"),_c('code',{pre:true},[_v("The ["),_c('a',{pre:true,attrs:{"href":"https://example.com"}},[_v("link")]),_v("].")])])]),_v(" "),_c('li',[_c('p',[_v("Actual output (notice the additional space in front of the link):\n"),_c('code',{pre:true},[_v("The [ "),_c('a',{pre:true,attrs:{"href":"https://example.com"}},[_v("link")]),_v("].")])])]),_v(" "),_c('li',[_c('p',[_v("Solution:\nWrap the link or trigger around with "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" tags.")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("The\n")]),_c('span',[_v("[[link](https://example.com)].\n")])])])])])} +},function anonymous( +) { +with(this){return _c('span',{attrs:{"id":"useSpecificMarkbind"}},[_c('h5',{attrs:{"id":"configuring-online-deployment-platforms-to-use-specific-markbind-version"}},[_c('span',{staticClass:"anchor",attrs:{"id":"configuring-online-deployment-platforms-to-use-specific-markbind-version"}}),_c('span',{staticClass:"fas fa-info",attrs:{"aria-hidden":"true"}}),_v(" Configuring Online Deployment platforms to use specific MarkBind version"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#configuring-online-deployment-platforms-to-use-specific-markbind-version","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Configuring CI platforms to use specific MarkBind version")])]),_v(" "),_c('p',[_v("When the "),_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html#using-ci-platforms"}},[_v("default CI configuration for deployment")]),_v(" is used, the latest version of MarkBind will be used in the CI workflows. This may be a later version of MarkBind than the one you use locally.")]),_v(" "),_c('ul',[_c('li',[_c('p',[_v("If you want to specify a version of MarkBind (eg. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("v1.6.3")]),_v("), you have to modify the step where "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind-cli")]),_v(" is being installed to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("npm i -g markbind-cli@v1.6.3")]),_v(". For example, for Travis-CI, you can modifiy the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("install")]),_v(" step in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".travis.yml")]),_v(" as follows:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs yaml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("install:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("npm")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("i")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("-g")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind-cli@1.6.3")]),_v("\n")])])])]),_v(" "),_c('li',[_c('p',[_v("If you want to use the latest minor version automatically until the next major version (as major versions usually contain breaking changes), you can add a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("^")]),_v(" in front of the version number. In the example below, Travis will use the latest version of MarkBind but will stop before "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("2.*")])]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs yaml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("install:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("npm")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("i")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("-g")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind-cli@^1.6.3")]),_v("\n")])])])])]),_v(" "),_c('p',[_c('strong',[_v("Setting up Netlify to use a specific version of MarkBind")])]),_v(" "),_c('p',[_v("Here are the steps to set up Netlify to use a specific version of MarkBind.")]),_v(" "),_c('ol',[_c('li',[_c('p',[_v("Navigate to the root directory of your site.")])]),_v(" "),_c('li',[_c('p',[_v("Run "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("npm init")]),_v(" which will create "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("package.json")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("package.lock.json")])])]),_v(" "),_c('li',[_c('p',[_v("Run "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("npm install markbind-cli@1.6.3 --save")]),_v(" to install markbind as a dependency (using v1.6.3 as an example)")])]),_v(" "),_c('li',[_c('p',[_v("Create / Update "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".gitignore")]),_v(" file in the root directory and add:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs"}},[_c('span',[_v("node_modules\n")])])])]),_v(" "),_c('li',[_c('p',[_v("Update "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("ignore")]),_v(" in site.json to include")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs"}},[_c('span',[_v("node_modules/*\n")]),_c('span',[_v(".gitignore\n")])])])]),_v(" "),_c('li',[_c('p',[_v("Now, follow the "),_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html#deploying-to-netlify"}},[_v("previous instructions for setting up Netlify")]),_v(" but with the following difference:"),_c('br'),_v("\nIn step 5, Set the "),_c('mark',[_v("Build Command")]),_v(" to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind build --baseUrl")])])])])])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"indent-components"}},[_c('span',{staticClass:"anchor",attrs:{"id":"indent-components"}}),_c('span',{staticClass:"fas fa-lightbulb",attrs:{"aria-hidden":"true"}}),_v(" Indent components"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#indent-components","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("In some cases, you may want to indent components such as panels and boxes to match the surrounding content.\nThis is easily achieved by adding some margin and padding utility classes from "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/4.4/utilities/spacing/"}},[_v("Bootstrap")]),_v("\nto the component. The following examples show how to do this.")])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Indent Box component")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("Some text at level 1"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"ml-4\"")]),_v(">")]),_v("Some text at level 2"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("Some text at level 1"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Indent Panel component")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This panel is at level 1\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This panel is at level 2\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"ml-3\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" The \"ml-3\" is arbitarily chosen i.e \"ml-0\" to \"ml-5\" are all possible values.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This panel is at level 1\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Indent Included component")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("The following box component will be included via "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("Some text at level 1 (before included content)"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tipsAndTricks.md#forIndentDemo\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"ml-5\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("Some text at level 1 (after included content)"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 3.1.1")]),_v(" on Sat, 22 Jan 2022, 16:49:34 UTC]")]),_c('br'),_v(" "),_c('small',[_v("This site is powered by "),_c('a',{attrs:{"href":"https://www.netlify.com/"}},[_v("Netlify")]),_v(".")])])])])} +}]; + \ No newline at end of file diff --git a/userGuide/tweakingThePageStructure.html b/userGuide/tweakingThePageStructure.html new file mode 100644 index 0000000..8fa6044 --- /dev/null +++ b/userGuide/tweakingThePageStructure.html @@ -0,0 +1,203 @@ + + + + + + + + MarkBind - User Guide: Tweaking the Page Structure + + + + + + + + + + + + + + + + +

                Tweaking the Page Structure

                User Guide → Tweaking the Page Structure

                Tweaking the Page Structure

                MarkBind offers several ways to easily tweak the overall structure of a page, for example, using headers, footers, scripts, or stylesheets.

                Front Matter

                You can use a Front Matter section to specify page properties such as the title and keywords of the page. To specify front matter for a page, insert a <frontmatter> tag in the following format at the beginning of the page.

                <frontmatter>
+  property1: value1
+  property2: value2
+</frontmatter>
+

                Example Here, we set the page title attribute as Binary Search Tree.

                <frontmatter>
+  title: Binary Search Tree
+</frontmatter>
+

                Should you need more expressive formatting, or encounter any issues when formatting the frontmatter, note that the frontmatter follows the yaml spec.

                Page properties:

                • title: The title of the page. Will be used as the <title> attribute of the HTML page generated.
                • Other properties such as keywords, layout, etc. will be explained in other places of this user guide.

                Note: Page properties that are defined in site.json for a particular page will override those defined in the front matter of the page.

                <frontmatter>
+  title: Binary Search Tree
+  pageNav: 2
+</frontmatter>
+

                Layouts

                MarkBind layouts can be used to provide structure and content around pages easily.

                To add a layout, first add any source file to the _markbind/layouts folder. Then, specify the layout the page will use using one of the following:

                If no layout is specified, the page defaults to the default layout (default.md).

                When using markbind init, a default layout is provided in the _markbind/layouts folder.

                Next, edit the layout file to your liking, and add the {{ content }} variable where you want the page content to be rendered.

                <head-bottom>
+  <!-- Use head-top and head-bottom tags to insert content into the html <head> tag -->
+  <link rel="stylesheet" href="{{baseUrl}}/css/main.css">
+</head-bottom>
+
+<!-- Fix the header to the top while scrolling using the fixed attribute in a <header> tag -->
+<header fixed>
+  <navbar type="dark">
+    <a slot="brand" href="{{baseUrl}}/index.html" title="Home" class="navbar-brand">
+      <img src="{{baseUrl}}/images/logo-darkbackground.svg" height="20">
+    </a>
+    <li>
+      <a highlight-on="exact" href="{{baseUrl}}/index.html" class="nav-link">HOME</a>
+    </li>
+    <li tags="environment--ug">
+      <a highlight-on="sibling-or-child" href="{{baseUrl}}/userGuide/index.html" class="nav-link">USER GUIDE</a>
+    </li>
+    <li tags="environment--dg">
+      <a highlight-on="sibling-or-child" href="{{baseUrl}}/devGuide/index.html" class="nav-link">DEVELOPER GUIDE</a>
+    </li>
+    <li slot="right">
+      <form class="navbar-form">
+        <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right></searchbar>
+      </form>
+    </li>
+  </navbar>
+</header>
+
+<div id="flex-body">
+  <!-- Push content downward when using a fixed header with the fixed-header-padding class -->
+  <nav id="site-nav" class="fixed-header-padding">
+    <div class="site-nav-top">
+      <div class="font-weight-bold mb-2" style="font-size: 1.25rem;">User Guide</div>
+    </div>
+    <div class="nav-component slim-scroll">
+      <site-nav>
+* [**Getting Started**]({{baseUrl}}/userGuide/gettingStarted.html)
+  * **Authoring Contents** :expanded:
+  * [Overview]({{baseUrl}}/userGuide/authoringContents.html)
+  * [Adding Pages]({{baseUrl}}/userGuide/addingPages.html)
+  * [MarkBind Syntax Overview]({{baseUrl}}/userGuide/markBindSyntaxOverview.html)
+  * [Formatting Contents]({{baseUrl}}/userGuide/formattingContents.html)
+  * [Using Components]({{baseUrl}}/userGuide/usingComponents.html)
+      </site-nav>
+    </div>
+  </nav>
+  <div id="content-wrapper" class="fixed-header-padding">
+    <!-- Insert the page's content into the layout using the {{ content }} variable -->
+    {{ content }}
+  </div>
+  <nav id="page-nav" class="fixed-header-padding">
+    <div class="nav-component slim-scroll">
+      <!-- Insert a page navigation menu using the <page-nav /> component -->
+      <page-nav />
+    </div>
+  </nav>
+</div>
+
+<footer>
+  <div class="text-center">
+    <small>[Generated by {{MarkBind}} on {{timestamp}}]</small><br>
+    <small>This site is powered by <a href="https://www.netlify.com/">Netlify</a>.</small>
+  </div>
+</footer>
+
+<!-- Insert content after the html <body> tag using the <script-bottom> tag -->
+<script-bottom>
+  <script>
+    alert('Hi!')
+  </script>
+</script-bottom>
+

                The rest of this section explains the other convenient features MarkBind provides in its layouts system, and references +the above code snippet.


                Inserting content into the <head>

                You can insert code into the <head> section of the generated HTML page, for example, to add links to custom JavaScript or CSS files.

                You may do so by inserting the html <head> content into <head-top> and <head-bottom> tags in the layout file, which are inserted at the top and bottom (after MarkBind's assets) of the <head> tag respectively.

                The above example shows the use of the <head-bottom> tag to insert a custom stylesheet (main.css).

                Inserting scripts after the <body> tag

                You may also insert html code after the <body> section of the generated HTML page. This is useful for including custom scripts. +Simply insert the code / <script> tags into a <script-bottom> tag.

                The above example shows the use of the <script-bottom> tag to show a browser alert box with the message 'Hi!'.

                The scripts inserted here are processed last, after all of MarkBind's processing.

                If you wish insert scripts at the bottom, before MarkBind's scripts, simply insert them into the bottom of the layout file.

                Fixing the header to the top

                Headers are commonly included inside the html <header> tag. In encouraging this, a convenient interface to implement Headers that stick to the top of the page while scrolling the contentfixed headers surrounding the <header> tag is provided that ensures page anchors work correctly.

                To fix the <header>

                1. Add the fixed attribute to your <header> element in the layout per the above example.

                2. Then, to add the necessary top padding for the main content, add the fixed-header-padding class to elements that should be shifted down in accordance with the fixed header.

                If you are not sure where to put the fixed-header-padding attribute, you may also refer to the default template for markbind init, which already has this setup.

                Constructing a site navigation menu easily


                A Site Navigation Menu (siteNav for short) can be used to show a road map of the main pages of your site.

                Steps to add a siteNav:

                1. Format your siteNav as an unordered Markdown list
                2. Include it under a <site-nav> element.
                3. (Optional) To make siteNav accessible on smaller screens, you can use the <site-nav-button /> component in the navbar.

                CODE:

                <site-nav>
+* [**Getting Started**](/userGuide/gettingStarted.html)
+* **Authoring Contents** :expanded:
+  * [Overview](/userGuide/authoringContents.html)
+  * [Adding Pages](/userGuide/addingPages.html)
+  * [MarkBind Syntax Overview](/userGuide/markBindSyntaxOverview.html)
+  * [Formatting Contents](/userGuide/formattingContents.html)
+  * [Using Components](/userGuide/usingComponents.html)
+</site-nav>
+

                OUTPUT:

                MarkBind has styles nested lists with additional padding and smaller text sizes up to 4 nesting levels. +Beyond that, you'd have to include your own styles.

                Expanding menu items by default

                You can append the :expanded: to a a menu item with sub menu-itemsparent menu item to make it expand by default. In the example above, * Docs :expanded: will make the menu item Docs expand by default.

                A parent menu item that is also linked will not be collapsible e.g., the Search menu item in the above example.

                Constructing a page navigation menu


                A Page Navigation Menu (pageNav for short) a list of the current page's headings. Page navigation menus are only available for use in layouts.

                Adding a pageNav

                1. Specify the smallest heading level you want to be included within the <frontmatter> of a page with The value default will use headingIndexingLevel within site.json."default" or a HTML defines six levels of headings, numbered from
                  1 to 6.                  heading level                  .

                  The default level uses the headingIndexingLevel property of your site configuration file.

                2. (Optional) You may also specify a page navigation title within <frontmatter> that will be placed at the top of the page navigation menu.

                3. Position the page navigation menu within your layout using the <page-nav /> component.

                4. (Optional) To make pageNav accessible on smaller screens, you can use the <page-nav-button /> component in the navbar.

                Example +In the page that you want to have page navigation, you may show only <h1> and <h2> headings in the pageNav, and set a custom pageNav title like so:

                <frontmatter>
+  pageNav: 2
+  pageNavTitle: "Chapters of This Page"
+</frontmatter>
+

                Then, in your layout file, use the <page-nav /> component to position the pageNav.

                Plugin: Tags

                With this plugin you can use tags to selectively filter content when building a site.

                Toggling alternative contents

                Tags are specified by the tags attribute, and can be attached to any HTML element. During rendering, only elements that match tags specified in the site.json files will be rendered.

                Example Attaching tags to elements:

                # Print 'Hello world'
+
+<p tags="language--java">System.out.println("Hello world");</p>
+<p tags="language--C#">Console.WriteLine("Hello world");</p>
+<p tags="language--python">print("Hello world")</p>
+

                You need to specify the tags to include in the pluginsContext, under tags:

                {
+  ...
+  "plugins" : [
+    "filterTags"
+  ],
+  "pluginsContext" : {
+    "filterTags" : {
+      "tags": ["language--java"]
+    }
+  }
+}
+

                All other tagged elements will be filtered out. In this case, only the element with the language--java tag will be rendered. This is helpful when creating multiple versions of a page without having to maintain separate copies.

                If the filterTags plugin is not enabled in site.json, all tagged elements will be rendered.

                You can also use multiple tags in a single HTML element. Specify each tag in the tags attribute separated by a space. An element will be rendered if any of the tags matches the one in site.json.

                Example Attaching multiple tags to an element:

                # For loops
+
+<p tags="language--java language--C#">for (int i = 0; i < 5; i++) { ... }</p>
+

                As long as the language--java or language--C# tag is specified, the code snippet will be rendered.

                Alternatively, you can specify tags to render for a page in the front matter.

                Example Specifying tags in front matter:

                <frontmatter>
+  title: "Hello World"
+  tags: ["language--java"]
+</frontmatter>
+
                <p tags="language--java advanced">System.out.println("Hello world");</p>
+<p tags="language--C# basic">Console.WriteLine("Hello world");</p>
+
                <frontmatter>
+  title: "Hello World"
+  tags: ["language--java"]
+</frontmatter>
+

                Tags in site.json will be merged with the ones in the front matter, and are processed after front matter tags. See Hiding Tags for more information.

                Advanced Tagging Tips

                You can use a * in a tag name to match elements more generally. A * in a tag will match any number of characters at its position.

                Example Using general tags:

                <frontmatter>
+  title: "Hello World"
+  tags: ["language--*"]
+</frontmatter>
+
+<p tags="language--java">System.out.println("Hello world");</p>
+<p tags="language--C#">Console.WriteLine("Hello world");</p>
+<p tags="language--python">print("Hello world")</p>
+

                All 3 <p>s will be shown.

                Hiding Tags

                Using - at the start of a tag hides all tags matching the expression. This is helpful for disabling a group of tags and enabling a particular tag.

                Example Using general tags:

                index.md
                <frontmatter>
+  title: "Hello World"
+  tags: ["language--java"]
+</frontmatter>
+
+<p tags="language--java">System.out.println("Hello world");</p>
+<p tags="language--C#">Console.WriteLine("Hello world");</p>
+<p tags="language--python">print("Hello world")</p>
+
                site.json
                {
+  ...
+  "plugins" : [
+    "filterTags"
+  ],
+  "pluginsContext" : {
+    "filterTags" : {
+      "tags": ["-language--*", "language--C#"]
+    }
+  }
+}
+

                language--java is overridden by -language--*, so only language--C# is shown.

                This only works because tags are processed left to right, so all language--* tags are hidden before language--C#. Tags in site.json are processed after tags in <frontmatter>.

                # Print 'Hello world'
+
+<p tags="language--java">System.out.println("Hello world");</p>
+<p tags="language--C#">Console.WriteLine("Hello world");</p>
+<p tags="language--python">print("Hello world")</p>
+
                {
+  ...
+  "plugins" : [
+    "filterTags"
+  ],
+  "pluginsContext" : {
+    "filterTags" : {
+      "tags": ["language--java"]
+    }
+  }
+}
+

                Using HTML, JavaScript, CSS

                Reusing Contents


                + + + diff --git a/userGuide/tweakingThePageStructure.page-vue-render.js b/userGuide/tweakingThePageStructure.page-vue-render.js new file mode 100644 index 0000000..fc06f26 --- /dev/null +++ b/userGuide/tweakingThePageStructure.page-vue-render.js @@ -0,0 +1,223 @@ + + var pageVueRenderFn = function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',[_c('header',{attrs:{"fixed":""}},[_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/index.html","title":"Home"}},[_c('img',{attrs:{"src":"/images/logo-darkbackground.svg","height":"20"}})])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('form',{staticClass:"navbar-form"},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback,"menu-align-right":""}})],1)])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/index.html"}},[_v("HOME")])]),_v(" "),_c('div',{attrs:{"tags":"environment--ug"}},[_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"sibling-or-child","href":"/userGuide/index.html"}},[_v("USER GUIDE")])])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/showcase.html"}},[_v("SHOWCASE")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/about.html"}},[_v("ABOUT")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_c('span',[_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}})])])])])],1)]),_v(" "),_c('div',{attrs:{"id":"flex-body"}},[_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"site-nav","tag-name":"nav","to":"site-nav"}},[_c('div',{staticClass:"site-nav-top"},[_c('div',{staticClass:"font-weight-bold mb-2",staticStyle:{"font-size":"1.25rem"}},[_v("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tipsAndTricks.html"}},[_v("Tips & Tricks")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/glossary.html"}},[_v("Glossary")])])])])])])],1)],1)]),_v(" "),_c('div',{staticClass:"fixed-header-padding",attrs:{"id":"content-wrapper"}},[_m(0),_v(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_c('div',[_m(4),_v(" "),_m(5),_v(" "),_m(6),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Here, we set the page "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("title")]),_v(" attribute as "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Binary Search Tree")]),_v(".")],1),_v(" "),_m(7)]),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_c('p',[_v("Should you need more expressive formatting, or encounter any issues when formatting the frontmatter, note that the frontmatter follows the "),_c('a',{attrs:{"href":"https://yaml.org/refcard.html"}},[_v("yaml")]),_v(" spec.")])]),_v(" "),_m(8),_v(" "),_m(9),_v(" "),_c('div',[_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Note: Page properties that are defined in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" for a particular page will override those defined in the front matter of the page.")])])],1),_v(" "),_m(10)],1),_v(" "),_c('hr'),_v(" "),_m(11),_v(" "),_c('p',[_v("MarkBind layouts can be used to provide structure and content around pages easily.")]),_v(" "),_m(12),_v(" "),_m(13),_v(" "),_c('box',{attrs:{"type":"info","seamless":""}},[_c('p',[_v("If no layout is specified, the page defaults to the default layout ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default.md")]),_v(").")]),_v(" "),_c('p',[_v("When using "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind init")]),_v(", a default layout is provided in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/layouts")]),_v(" folder.")])]),_v(" "),_m(14),_v(" "),_m(15),_v(" "),_c('p',[_v("The rest of this section explains the other convenient features MarkBind provides in its layouts system, and references\nthe above code snippet.")]),_v(" "),_c('br'),_v(" "),_m(16),_v(" "),_m(17),_v(" "),_m(18),_v(" "),_m(19),_v(" "),_c('hr'),_v(" "),_m(20),_v(" "),_m(21),_v(" "),_m(22),_v(" "),_c('box',{attrs:{"type":"info","seamless":""}},[_c('p',[_v("The scripts inserted here are processed last, after all of MarkBind's processing.")]),_v(" "),_c('p',[_v("If you wish insert scripts at the bottom, before MarkBind's scripts, simply insert them into the bottom of the layout file.")])]),_v(" "),_c('hr'),_v(" "),_m(23),_v(" "),_c('p',[_v("Headers are commonly included inside the html "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("
                ")]),_v(" tag. In encouraging this, a convenient interface to implement "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("Headers that stick to the top of the page while scrolling the content")]),_v("fixed headers")]),_v(" surrounding the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("
                ")]),_v(" tag is provided that ensures page anchors work correctly.")]),_v(" "),_m(24),_v(" "),_m(25),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_c('p',[_v("If you are not sure where to put the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fixed-header-padding")]),_v(" attribute, you may also refer to the default template for "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind init")]),_v(", which already has this setup.")])]),_v(" "),_c('hr'),_v(" "),_m(26),_v(" "),_c('br'),_v(" "),_c('div',[_m(27),_v(" "),_c('p',[_v("Steps to add a siteNav:")]),_v(" "),_m(28),_v(" "),_c('div',{attrs:{"id":"short"}},[_c('div',[_m(29),_v(" "),_m(30),_v(" "),_m(31),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")])])])])])])],1)],1)],1)])]),_v(" "),_m(32),_v(" "),_m(33),_v(" "),_c('p',[_v("You can "),_c('strong',[_v("append the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(":expanded:")]),_v(" to a "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("a menu item with sub menu-items")]),_v("parent menu item")]),_v(" to make it expand by default.")]),_v(" In the example above, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("* Docs :expanded:")]),_v(" will make the menu item "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Docs")]),_v(" expand by default.")]),_v(" "),_m(34)]),_v(" "),_c('hr'),_v(" "),_m(35),_v(" "),_c('br'),_v(" "),_c('div',[_m(36),_v(" "),_m(37),_v(" "),_c('ol',[_c('li',[_c('p',[_c('strong',[_v("Specify the smallest heading level you want to be included")]),_v(" within the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" of a page with "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_m(38),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"default\"")])]),_v(" or a "),_c('span',{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top.html",value:(tooltipInnerContentGetter),expression:"tooltipInnerContentGetter",modifiers:{"hover":true,"top":true,"html":true}}],staticClass:"trigger",attrs:{"data-mb-component-type":"tooltip"}},[_m(39),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("heading level")])]),_v(".")]),_v(" "),_c('box',{attrs:{"type":"info","seamless":""}},[_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default")]),_v(" level uses the "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#headingindexinglevel"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("headingIndexingLevel")]),_v(" property")]),_v(" of your site configuration file.")])])],1),_v(" "),_m(40),_v(" "),_m(41),_v(" "),_m(42)]),_v(" "),_c('div',{staticClass:"indented",attrs:{"id":"short"}},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v("\nIn the page that you want to have page navigation, you may show only "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("

                ")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("

                ")]),_v(" headings in the pageNav, and set a custom pageNav title like so:")],1),_v(" "),_m(43),_m(44)])]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(45),_v(" "),_c('p',[_v("With this plugin you can use tags to selectively filter content when building a site.")]),_v(" "),_m(46),_v(" "),_m(47),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Attaching tags to elements:")],1),_v(" "),_m(48),_m(49),_v(" "),_m(50),_m(51)]),_v(" "),_m(52),_v(" "),_m(53),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Attaching multiple tags to an element:")],1),_v(" "),_m(54),_m(55)]),_v(" "),_c('p',[_v("Alternatively, you can specify tags to render for a page in the front matter.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Specifying tags in front matter:")],1),_v(" "),_m(56)]),_v(" "),_m(57),_v(" "),_m(58),_v(" "),_m(59),_v(" "),_m(60),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Using general tags:")],1),_v(" "),_m(61),_m(62)]),_v(" "),_m(63),_v(" "),_m(64),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Using general tags:")],1),_v(" "),_m(65),_m(66),_m(67)]),_v(" "),_m(68),_v(" "),_m(69)]),_v(" "),_m(70),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})],1),_v(" "),_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"},[_c('overlay-source',{staticClass:"nav nav-pills flex-column my-0 small no-flex-wrap",attrs:{"id":"mb-page-nav","tag-name":"nav","to":"mb-page-nav"}},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#tweaking-the-page-structure"}},[_v("Tweaking the Page Structure‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#front-matter"}},[_v("Front Matter‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#layouts"}},[_v("Layouts‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#inserting-content-into-the-head"}},[_v("Inserting content into the ‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#inserting-scripts-after-the-body-tag"}},[_v("Inserting scripts after the tag‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#fixing-the-header-to-the-top"}},[_v("Fixing the header to the top‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#constructing-a-site-navigation-menu-easily"}},[_v("Constructing a site navigation menu easily‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#constructing-a-page-navigation-menu"}},[_v("Constructing a page navigation menu‎")])]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#plugin-tags"}},[_v("Plugin: Tags‎")])])])],1)])],1),_v(" "),_m(71)])} +}; + var pageVueStaticRenderFns = [function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}},[_v("Tweaking the Page Structure")])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_c('em',[_v("User Guide → Tweaking the Page Structure")])])])])} +},function anonymous( +) { +with(this){return _c('h1',{attrs:{"id":"tweaking-the-page-structure"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tweaking-the-page-structure"}}),_v("Tweaking the Page Structure"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tweaking-the-page-structure","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"lead",attrs:{"id":"overview"}},[_c('strong',[_v("MarkBind offers several ways to easily tweak the overall structure of a page")]),_v(", for example, using headers, footers, scripts, or stylesheets.")])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"front-matter"}},[_c('span',{staticClass:"anchor",attrs:{"id":"front-matter"}}),_v("Front Matter"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#front-matter","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("You can use a "),_c('em',[_v("Front Matter")]),_v(" section to specify page properties such as the title and keywords of the page.")]),_v(" To specify front matter for a page, insert a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" tag in the following format at the beginning of the page.")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" property1: value1\n")]),_c('span',[_v(" property2: value2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: Binary Search Tree\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Page properties:")])])} +},function anonymous( +) { +with(this){return _c('ul',[_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("title")])]),_v(": The title of the page. Will be used as the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" attribute of the HTML page generated.")]),_v(" "),_c('li',[_v("Other properties such as "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("keywords")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("layout")]),_v(", etc. will be explained in other places of this user guide.")])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: Binary Search Tree\n")]),_c('span',[_v(" pageNav: 2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"layouts"}},[_c('span',{staticClass:"anchor",attrs:{"id":"layouts"}}),_v("Layouts"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#layouts","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("To add a layout, first add any source file to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/layouts")]),_v(" folder. Then, specify the layout the page will use using one of the following:")])} +},function anonymous( +) { +with(this){return _c('ul',[_c('li',[_v("the "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("layout")]),_v(" property")]),_v(" of your site configuration file")]),_v(" "),_c('li',[_v("the "),_c('a',{attrs:{"href":"#front-matter"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("layout")]),_v(" property")]),_v(" of the page front matter.")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("Next, edit the layout file to your liking, and add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{{ content }}")]),_v(" variable where you want the page content to be rendered.")])} +},function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"layout-code-snippet"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("head-bottom")]),_v(">")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Use head-top and head-bottom tags to insert content into the html <head> tag -->")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("link")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rel")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"stylesheet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/css/main.css\"")]),_v(">")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("head-bottom")]),_v(">")])]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Fix the header to the top while scrolling using the fixed attribute in a <header> tag -->")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("header")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fixed")]),_v(">")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dark\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("img")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/images/logo-darkbackground.svg\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("height")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"20\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exact\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("HOME"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--ug\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"sibling-or-child\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/userGuide/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("USER GUIDE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--dg\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"sibling-or-child\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/devGuide/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("DEVELOPER GUIDE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("header")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"flex-body\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Push content downward when using a fixed header with the fixed-header-padding class -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("nav")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"site-nav\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fixed-header-padding\"")]),_v(">")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"site-nav-top\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"font-weight-bold mb-2\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"font-size: 1.25rem;\"")]),_v(">")]),_v("User Guide"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-component slim-scroll\"")]),_v(">")]),_v("\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("site-nav")]),_v(">")]),_v("\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("* [**Getting Started**]({{baseUrl}}/userGuide/gettingStarted.html)\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" * **Authoring Contents** :expanded:\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" * [Overview]({{baseUrl}}/userGuide/authoringContents.html)\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" * [Adding Pages]({{baseUrl}}/userGuide/addingPages.html)\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" * [MarkBind Syntax Overview]({{baseUrl}}/userGuide/markBindSyntaxOverview.html)\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" * [Formatting Contents]({{baseUrl}}/userGuide/formattingContents.html)\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" * [Using Components]({{baseUrl}}/userGuide/usingComponents.html)\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("site-nav")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("nav")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"content-wrapper\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fixed-header-padding\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Insert the page's content into the layout using the {{ content }} variable -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("{{ content }}")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("nav")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"page-nav\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fixed-header-padding\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-component slim-scroll\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Insert a page navigation menu using the <page-nav /> component -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("page-nav")]),_v(" />")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("nav")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("footer")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text-center\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("[Generated by {{MarkBind}} on {{timestamp}}]"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("This site is powered by "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://www.netlify.com/\"")]),_v(">")]),_v("Netlify"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("footer")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Insert content after the html <body> tag using the <script-bottom> tag -->")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script-bottom")]),_v(">")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"javascript"}})]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" alert("),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'Hi!'")]),_v(")")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" ")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script")]),_v(">")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script-bottom")]),_v(">")])]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('h3',{attrs:{"id":"inserting-content-into-the-head"}},[_c('span',{staticClass:"anchor",attrs:{"id":"inserting-content-into-the-head"}}),_v("Inserting content into the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<head>")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#inserting-content-into-the-head","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("You can insert code into the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<head>")]),_v(" section of the generated HTML page")]),_v(", for example, to add links to custom JavaScript or CSS files.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("You may do so by inserting the html "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<head>")]),_v(" content into "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<head-top>")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<head-bottom>")]),_v(" tags in the layout file, which are inserted at the top and bottom (after MarkBind's assets) of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<head>")]),_v(" tag respectively.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("The above example shows the use of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<head-bottom>")]),_v(" tag to insert a custom stylesheet ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("main.css")]),_v(").")])} +},function anonymous( +) { +with(this){return _c('h3',{attrs:{"id":"inserting-scripts-after-the-body-tag"}},[_c('span',{staticClass:"anchor",attrs:{"id":"inserting-scripts-after-the-body-tag"}}),_v("Inserting scripts after the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<body>")]),_v(" tag"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#inserting-scripts-after-the-body-tag","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("You may also insert html code after the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<body>")]),_v(" section of the generated HTML page")]),_v(". This is useful for including custom scripts.\nSimply insert the code / "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<script>")]),_v(" tags into a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<script-bottom>")]),_v(" tag.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("The above example shows the use of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<script-bottom>")]),_v(" tag to show a browser alert box with the message "),_c('strong',[_v("'Hi!'")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('h3',{attrs:{"id":"fixing-the-header-to-the-top"}},[_c('span',{staticClass:"anchor",attrs:{"id":"fixing-the-header-to-the-top"}}),_v("Fixing the header to the top"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#fixing-the-header-to-the-top","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_c('strong',[_v("To fix the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<header>")])])])])} +},function anonymous( +) { +with(this){return _c('ol',[_c('li',[_c('p',[_v("Add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fixed")]),_v(" attribute to your "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<header>")]),_v(" element in the layout per the above example.")])]),_v(" "),_c('li',[_c('p',[_v("Then, to add the necessary top padding for the main content, add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fixed-header-padding")]),_v(" class to "),_c('strong',[_v("elements that should be shifted down")]),_v(" in accordance with the fixed header.")])])])} +},function anonymous( +) { +with(this){return _c('h3',{attrs:{"id":"constructing-a-site-navigation-menu-easily"}},[_c('span',{staticClass:"anchor",attrs:{"id":"constructing-a-site-navigation-menu-easily"}}),_v("Constructing a site navigation menu easily"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#constructing-a-site-navigation-menu-easily","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("A "),_c('em',[_v("Site Navigation Menu")]),_v(" ("),_c('mark',[_c('em',[_v("siteNav")]),_v(" for short")]),_v(") can be used to show a road map of the main pages of your site.")])])} +},function anonymous( +) { +with(this){return _c('ol',[_c('li',[_v("Format your siteNav as an unordered Markdown list")]),_v(" "),_c('li',[_v("Include it under a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<site-nav>")]),_v(" element.")]),_v(" "),_c('li',[_v("(Optional) To make siteNav accessible on smaller screens, you can use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<site-nav-button />")]),_v(" component in the "),_c('a',{attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("navbar")]),_v(".")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs"}},[_c('span',[_v("<site-nav>\n")]),_c('span',[_v("* [**Getting Started**](/userGuide/gettingStarted.html)\n")]),_c('span',[_v("* **Authoring Contents** :expanded:\n")]),_c('span',[_v(" * [Overview](/userGuide/authoringContents.html)\n")]),_c('span',[_v(" * [Adding Pages](/userGuide/addingPages.html)\n")]),_c('span',[_v(" * [MarkBind Syntax Overview](/userGuide/markBindSyntaxOverview.html)\n")]),_c('span',[_v(" * [Formatting Contents](/userGuide/formattingContents.html)\n")]),_c('span',[_v(" * [Using Components](/userGuide/usingComponents.html)\n")]),_c('span',[_v("</site-nav>\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("MarkBind has styles nested lists with additional padding and smaller text sizes up to "),_c('strong',[_v("4")]),_v(" nesting levels.\nBeyond that, you'd have to include your own styles.")])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_c('strong',[_v("Expanding menu items by default")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("A parent menu item that is also linked will not be collapsible "),_c('span',{staticClass:"dimmed"},[_v("e.g., the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Search")]),_v(" menu item in the above example")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('h3',{attrs:{"id":"constructing-a-page-navigation-menu"}},[_c('span',{staticClass:"anchor",attrs:{"id":"constructing-a-page-navigation-menu"}}),_v("Constructing a page navigation menu"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#constructing-a-page-navigation-menu","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("A "),_c('em',[_v("Page Navigation Menu")]),_v(" ("),_c('mark',[_c('em',[_v("pageNav")]),_v(" for short")]),_v(") a list of the current page's headings.")]),_v(" Page navigation menus are only available for use in "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#layouts"}},[_v("layouts")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_c('strong',[_v("Adding a pageNav")])])])} +},function anonymous( +) { +with(this){return _c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("The value "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default")]),_v(" will use "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("headingIndexingLevel")]),_v(" within "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('span',{attrs:{"data-mb-slot-name":"_content"}},[_v("HTML defines six levels of headings, numbered from "),_c('br'),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("1 to 6")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('li',[_c('p',[_c('strong',[_v("(Optional) You may also specify a page navigation title")]),_v(" within "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<frontmatter>")]),_v(" that will be placed at the top of the page navigation menu.")])])} +},function anonymous( +) { +with(this){return _c('li',[_c('p',[_c('strong',[_v("Position the page navigation menu")]),_v(" within your layout using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<page-nav />")]),_v(" component.")])])} +},function anonymous( +) { +with(this){return _c('li',[_c('p',[_c('strong',[_v("(Optional) To make pageNav accessible on smaller screens, you can use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<page-nav-button />")]),_v(" component in the "),_c('a',{attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("navbar")]),_v(".")])])])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" pageNav: 2\n")]),_c('span',[_v(" pageNavTitle: \"Chapters of This Page\"\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("Then, in your "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#layouts"}},[_v("layout file")]),_v(", use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<page-nav />")]),_v(" component to position the pageNav.")])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"plugin-tags"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugin-tags"}}),_v("Plugin: Tags"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-tags","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"toggling-alternative-contents"}},[_c('span',{staticClass:"anchor",attrs:{"id":"toggling-alternative-contents"}}),_v("Toggling alternative contents"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#toggling-alternative-contents","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("Tags are specified by the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tags")]),_v(" attribute, "),_c('strong',[_v("and can be attached to any HTML element")]),_v(". During rendering, only elements that match tags specified in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" files will be rendered.")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("# Print 'Hello world'\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v(">")]),_v("System.out.println(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C#\"")]),_v(">")]),_v("Console.WriteLine(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--python\"")]),_v(">")]),_v("print(\"Hello world\")"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("You need to specify the tags to include in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pluginsContext")]),_v(", under "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tags")]),_v(":")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"plugins\"")]),_v(" : [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"filterTags\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pluginsContext\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"filterTags\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"tags\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v("]\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("All other tagged elements will be filtered out. In this case, only the element with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--java")]),_v(" tag will be rendered. This is helpful when creating multiple versions of a page without having to maintain separate copies.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("If the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("filterTags")]),_v(" plugin is not enabled in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(", all tagged elements will be rendered.")])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("You can also use multiple tags in a single HTML element. Specify each tag in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tags")]),_v(" attribute")]),_v(" separated by a space. An element will be rendered if "),_c('strong',[_v("any of the tags")]),_v(" matches the one in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("# For loops\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java language--C#\"")]),_v(">")]),_v("for (int i = 0; i < 5; i++) { ... }"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("As long as the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--java")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--C#")]),_v(" tag is specified, the code snippet will be rendered.")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: \"Hello World\"\n")]),_c('span',[_v(" tags: [\"language--java\"]\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")])])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java advanced\"")]),_v(">")]),_v("System.out.println(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C# basic\"")]),_v(">")]),_v("Console.WriteLine(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")])])]),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: \"Hello World\"\n")]),_c('span',[_v(" tags: [\"language--java\"]\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("Tags in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" will be merged with the ones in the front matter, and are processed after front matter tags. See "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#hiding-tags"}},[_v("Hiding Tags")]),_v(" for more information.")])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"advanced-tagging-tips"}},[_c('span',{staticClass:"anchor",attrs:{"id":"advanced-tagging-tips"}}),_v("Advanced Tagging Tips"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#advanced-tagging-tips","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("You can use a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("*")]),_v(" in a tag name to match elements more generally. A "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("*")]),_v(" in a tag will match any number of characters at its position.")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: \"Hello World\"\n")]),_c('span',[_v(" tags: [\"language--*\"]\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v(">")]),_v("System.out.println(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C#\"")]),_v(">")]),_v("Console.WriteLine(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--python\"")]),_v(">")]),_v("print(\"Hello world\")"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("All 3 "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<p>")]),_v("s will be shown.")])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"hiding-tags"}},[_c('span',{staticClass:"anchor",attrs:{"id":"hiding-tags"}}),_v("Hiding Tags"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#hiding-tags","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("Using "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v(" at the start of a tag hides all tags matching the expression. This is helpful for disabling a group of tags and enabling a particular tag.")])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading inline-markdown-heading"},[_c('span',[_c('a',{attrs:{"href":"http://index.md"}},[_v("index.md")])])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"index.md","class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: \"Hello World\"\n")]),_c('span',[_v(" tags: [\"language--java\"]\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v(">")]),_v("System.out.println(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C#\"")]),_v(">")]),_v("Console.WriteLine(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--python\"")]),_v(">")]),_v("print(\"Hello world\")"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")])])])])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"plugins\"")]),_v(" : [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"filterTags\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pluginsContext\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"filterTags\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"tags\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"-language--*\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C#\"")]),_v("]\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--java")]),_v(" is overridden by "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-language--*")]),_v(", so only "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--C#")]),_v(" is shown.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("This only works because tags are processed left to right, so all "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--*")]),_v(" tags are hidden before "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--C#")]),_v(". Tags in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" are processed after tags in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<frontmatter>")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("# Print 'Hello world'\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v(">")]),_v("System.out.println(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C#\"")]),_v(">")]),_v("Console.WriteLine(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--python\"")]),_v(">")]),_v("print(\"Hello world\")"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")])])]),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"plugins\"")]),_v(" : [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"filterTags\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pluginsContext\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"filterTags\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"tags\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v("]\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-left"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Using HTML, JavaScript, CSS")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-right"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/reusingContents.html"}},[_c('span',[_c('span',[_v("Reusing Contents")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} +},function anonymous( +) { +with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 3.1.1")]),_v(" on Sat, 22 Jan 2022, 16:49:34 UTC]")]),_c('br'),_v(" "),_c('small',[_v("This site is powered by "),_c('a',{attrs:{"href":"https://www.netlify.com/"}},[_v("Netlify")]),_v(".")])])])])} +}]; + \ No newline at end of file diff --git a/userGuide/usingComponents.html b/userGuide/usingComponents.html new file mode 100644 index 0000000..cf0e190 --- /dev/null +++ b/userGuide/usingComponents.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="generator" content="MarkBind 3.1.1"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>MarkBind - User Guide: Using Components + + + + + + + + + + + + + + + + +

                Using Components

                User Guide → Using Components

                Using Components

                MarkBind provides a number of components (e.g., expandable panels, tabbed displays, navigation bars, etc.) that you can use to enhance the appearance/behavior of your pages. +

                To use a component, just use the corresponding markup in your file. For example, to create a Panel, you just need to use the markup:

                <panel header="Click to expand" type="seamless">
+  Panel Content.
+</panel>
+

                Formatting Contents

                Presentational Components


                + + + diff --git a/userGuide/usingComponents.page-vue-render.js b/userGuide/usingComponents.page-vue-render.js new file mode 100644 index 0000000..0558e52 --- /dev/null +++ b/userGuide/usingComponents.page-vue-render.js @@ -0,0 +1,13 @@ + + var pageVueRenderFn = function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',[_c('header',{attrs:{"fixed":""}},[_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/index.html","title":"Home"}},[_c('img',{attrs:{"src":"/images/logo-darkbackground.svg","height":"20"}})])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('form',{staticClass:"navbar-form"},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback,"menu-align-right":""}})],1)])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/index.html"}},[_v("HOME")])]),_v(" "),_c('div',{attrs:{"tags":"environment--ug"}},[_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"sibling-or-child","href":"/userGuide/index.html"}},[_v("USER GUIDE")])])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/showcase.html"}},[_v("SHOWCASE")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/about.html"}},[_v("ABOUT")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_c('span',[_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}})])])])])],1)]),_v(" "),_c('div',{attrs:{"id":"flex-body"}},[_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"site-nav","tag-name":"nav","to":"site-nav"}},[_c('div',{staticClass:"site-nav-top"},[_c('div',{staticClass:"font-weight-bold mb-2",staticStyle:{"font-size":"1.25rem"}},[_v("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tipsAndTricks.html"}},[_v("Tips & Tricks")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/glossary.html"}},[_v("Glossary")])])])])])])],1)],1)]),_v(" "),_m(0),_v(" "),_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"},[_c('overlay-source',{staticClass:"nav nav-pills flex-column my-0 small no-flex-wrap",attrs:{"id":"mb-page-nav","tag-name":"nav","to":"mb-page-nav"}},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#using-components"}},[_v("Using Components‎")])])],1)])],1),_v(" "),_m(1)])} +}; + var pageVueStaticRenderFns = [function anonymous( +) { +with(this){return _c('div',{staticClass:"fixed-header-padding",attrs:{"id":"content-wrapper"}},[_c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}},[_v("Using Components")])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_c('em',[_v("User Guide → Using Components")])])])]),_v(" "),_c('h1',{attrs:{"id":"using-components"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-components"}}),_v("Using Components"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-components","onclick":"event.stopPropagation()"}})]),_v(" "),_c('span',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p',[_c('strong',[_v("MarkBind provides a number of components")]),_v(" (e.g., expandable panels, tabbed displays, navigation bars, etc.) that you can use to enhance the appearance/behavior of your pages.\n")])]),_c('p'),_v(" "),_c('p',[_v("To use a component, just use the corresponding markup in your file. For example, to create a Panel, you just need to use the markup:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Click to expand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"seamless\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Panel Content.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])]),_c('br'),_v(" "),_c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-left"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/formattingContents.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Formatting Contents")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-right"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/components/presentation.html"}},[_c('span',[_c('span',[_v("Presentational Components")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])]),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})])} +},function anonymous( +) { +with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 3.1.1")]),_v(" on Sat, 22 Jan 2022, 16:49:34 UTC]")]),_c('br'),_v(" "),_c('small',[_v("This site is powered by "),_c('a',{attrs:{"href":"https://www.netlify.com/"}},[_v("Netlify")]),_v(".")])])])])} +}]; + \ No newline at end of file diff --git a/userGuide/usingHtmlJavaScriptCss.html b/userGuide/usingHtmlJavaScriptCss.html new file mode 100644 index 0000000..d72d324 --- /dev/null +++ b/userGuide/usingHtmlJavaScriptCss.html @@ -0,0 +1,51 @@ + + + + + + + + MarkBind - User Guide: Using HTML, JavaScript, CSS + + + + + + + + + + + + + + + + +

                Using HTML, JavaScript, CSS

                User Guide → Using HTML, JavaScript, CSS

                Using HTML, JavaScript, CSS

                A MarkBind source file can contain a mixture of HTML, JavaScript, and CSS as a normal web page would. +

                Text within HTML tags are considered plain text unless the text is preceded by a blank line, in which case the text is parsed as Markdown text.

                Example Here is an example of how text within an html tag is parsed as Markdown when preceded by a blank line.

                Code:

                <span>
+Without preceding blank line: Apples **Bananas** Cherries
+</span>
+
+<span>
+
+With preceding blank line: Apples **Bananas** Cherries
+</span>
+

                Outcome:

                +Without preceding blank line: Apples **Bananas** Cherries +

                With preceding blank line: Apples Bananas Cherries +

                Alternatively, you can use <markdown> (for block Markdown elements such as headings) or <md> (for inline Markdown elements such as bold/italic text) tags to indicate the text should be treated as Markdown.

                Example Here is an example of how text within an HTML tag can be treated as Markdown using <markdown>/<md> tags.

                Code:

                <span>
+<md>Apples **Bananas** Cherries</md>
+</span>
+
+<span>
+<markdown>##### Apples **Bananas** Cherries</markdown>
+</span>
+

                Outcome:
                Apples Bananas Cherries

                Apples Bananas Cherries

                Advanced Component Usage

                Tweaking the Page Structure


                + + + diff --git a/userGuide/usingHtmlJavaScriptCss.page-vue-render.js b/userGuide/usingHtmlJavaScriptCss.page-vue-render.js new file mode 100644 index 0000000..4ef76a8 --- /dev/null +++ b/userGuide/usingHtmlJavaScriptCss.page-vue-render.js @@ -0,0 +1,49 @@ + + var pageVueRenderFn = function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',[_c('header',{attrs:{"fixed":""}},[_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/index.html","title":"Home"}},[_c('img',{attrs:{"src":"/images/logo-darkbackground.svg","height":"20"}})])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('form',{staticClass:"navbar-form"},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback,"menu-align-right":""}})],1)])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/index.html"}},[_v("HOME")])]),_v(" "),_c('div',{attrs:{"tags":"environment--ug"}},[_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"sibling-or-child","href":"/userGuide/index.html"}},[_v("USER GUIDE")])])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/showcase.html"}},[_v("SHOWCASE")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/about.html"}},[_v("ABOUT")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_c('span',[_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}})])])])])],1)]),_v(" "),_c('div',{attrs:{"id":"flex-body"}},[_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"site-nav","tag-name":"nav","to":"site-nav"}},[_c('div',{staticClass:"site-nav-top"},[_c('div',{staticClass:"font-weight-bold mb-2",staticStyle:{"font-size":"1.25rem"}},[_v("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tipsAndTricks.html"}},[_v("Tips & Tricks")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/glossary.html"}},[_v("Glossary")])])])])])])],1)],1)]),_v(" "),_c('div',{staticClass:"fixed-header-padding",attrs:{"id":"content-wrapper"}},[_m(0),_v(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_c('p'),_v(" "),_m(4),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Here is an example of how text within an html tag is parsed as Markdown when preceded by a blank line.")],1),_v(" "),_c('p',[_v("Code:")]),_v(" "),_m(5),_m(6),_v(" "),_c('span',[_v("\nWithout preceding blank line: Apples **Bananas** Cherries\n")]),_v(" "),_m(7),_c('p')]),_v(" "),_m(8),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Here is an example of how text within an HTML tag can be treated as Markdown using "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v("/"),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" tags.")],1),_v(" "),_c('p',[_v("Code:")]),_v(" "),_m(9),_m(10),_v(" "),_m(11)]),_v(" "),_m(12),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})]),_v(" "),_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"})])],1),_v(" "),_m(13)])} +}; + var pageVueStaticRenderFns = [function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}},[_v("Using HTML, JavaScript, CSS")])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_c('em',[_v("User Guide → Using HTML, JavaScript, CSS")])])])])} +},function anonymous( +) { +with(this){return _c('h1',{attrs:{"id":"using-html-javascript-css"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-html-javascript-css"}}),_v("Using HTML, JavaScript, CSS"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-html-javascript-css","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p',[_c('strong',[_v("A MarkBind source file can contain a mixture of HTML, JavaScript, and CSS")]),_v(" as a normal web page would.\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('mark',[_v("Text within HTML tags are considered plain text unless the text is preceded by a blank line,")]),_v(" in which case the text is parsed as Markdown text.")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(">")]),_v("\n")]),_c('span',[_v("Without preceding blank line: Apples **Bananas** Cherries\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("With preceding blank line: Apples **Bananas** Cherries\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("Outcome:"),_c('br')])} +},function anonymous( +) { +with(this){return _c('span',[_c('p',[_v("With preceding blank line: Apples "),_c('strong',[_v("Bananas")]),_v(" Cherries\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("Alternatively, you can use "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" (for "),_c('em',[_v("block")]),_v(" Markdown elements such as headings) or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" (for "),_c('em',[_v("inline")]),_v(" Markdown elements such as bold/italic text) tags to indicate the text should be treated as Markdown.")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("md")]),_v(">")]),_v("Apples **Bananas** Cherries"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("markdown")]),_v(">")]),_v("##### Apples **Bananas** Cherries"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("Outcome:"),_c('br'),_v(" "),_c('span',[_c('span',[_v("Apples "),_c('strong',[_v("Bananas")]),_v(" Cherries")])])])} +},function anonymous( +) { +with(this){return _c('span',[_c('div',[_c('h5',{attrs:{"id":"apples-bananas-cherries"}},[_c('span',{staticClass:"anchor",attrs:{"id":"apples-bananas-cherries"}}),_v("Apples "),_c('strong',[_v("Bananas")]),_v(" Cherries"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#apples-bananas-cherries","onclick":"event.stopPropagation()"}})])])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-left"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/components/advanced.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Advanced Component Usage")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-right"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_c('span',[_c('span',[_v("Tweaking the Page Structure")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} +},function anonymous( +) { +with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 3.1.1")]),_v(" on Sat, 22 Jan 2022, 16:49:34 UTC]")]),_c('br'),_v(" "),_c('small',[_v("This site is powered by "),_c('a',{attrs:{"href":"https://www.netlify.com/"}},[_v("Netlify")]),_v(".")])])])])} +}]; + \ No newline at end of file diff --git a/userGuide/usingPlugins.html b/userGuide/usingPlugins.html new file mode 100644 index 0000000..855bd07 --- /dev/null +++ b/userGuide/usingPlugins.html @@ -0,0 +1,170 @@ + + + + + + + + MarkBind - User Guide: Using Plugins + + + + + + + + + + + + + + + + +

                Using Plugins

                User Guide → Using Plugins

                Using Plugins

                A plugin is an extension that adds additional features to MarkBind. Some non-essential MarkBind functionalities are provided as plugins so that you can enable/disable/configure them as necessary. MarkBind also supports adding external plugins (written by you or other third parties).

                MarkBind's philosophy is to bake-in all necessary functionality into MarkBind itself rather than expect users to go hunting for suitable plugins. Hence, we do not anticipate MarkBind users to rely heavily on such external plugins.

                Managing Plugins

                Plugins are managed via the following two properties in the site.json.

                • plugins: An array of plugin names to use.
                • pluginsContext: Parameters passed to each plugin, specified as key-value pairs.

                For example:

                {
+  ...
+  "plugins": [
+    "plugin1",
+    "plugin2",
+  ],
+  "pluginsContext": {
+    "plugin1": {
+      "input": "Input for Plugin 1"
+    },
+    "plugin2": {
+      "data": "Data for Plugin 2"
+    }
+  }
+}
+

                Using Built-in Plugins

                MarkBind has a set of built-in plugins that can be used immediately without installation.

                Plugin: Algolia

                This plugin allows you to use Algolia DocSearch for your site.

                To enable it, add algolia to your site's plugins, and supply the required options via the pluginsContext.

                Name Type Default Description
                apiKey String The API key for your site's Algolia DocSearch setup
                appId String The application id for your site's Algolia DocSearch setup
                indexName String The index name for your site's Algolia DocSearch setup
                algoliaOptions Object {} A JSON object specifying additional options for DocSearch
                debug Boolean false Whether to turn on debug mode to allow inspection of CSS styles for the dropdown
                site.json
                {
+  ...
+  "plugins": [
+    "algolia"
+  ],
+  "pluginsContext": {
+    "algolia": {
+      "apiKey": "25626fae796133dc1e734c6bcaaeac3c", // replace with your site's api key
+      "appId": "R2IYF7ETH7", // replace with your site's application id
+      "indexName": "docsearch", // replace with your site's index name
+      "algoliaOptions": { "hitsPerPage": 10 }, // optional
+      "debug": false // optional
+    }
+  }
+}
+

                To connect the searchbar component to Algolia DocSearch, add the algolia key.

                <searchbar placeholder="Search" algolia menu-align-right></searchbar>
+

                Alternatively, if you are using a custom search bar, you can assign the input field the id algolia-search-input to connect it to Algolia DocSearch.

                <input id="algolia-search-input">
+

                By default, Algolia DocSearch indexes all content on the page, including content in components that are hidden to the user during the initial render (e.g. Panels). To exclude these content from being indexed, you can add .algolia-no-index to the selectors_exclude attribute in your DocSearch configuration.

                The algolia-no-index class is automatically added to content hidden by MarkBind's Vue components. You may also add the algolia-no-index class to content that you do not want to be indexed by Algolia DocSearch.

                Plugin: codeBlockCopyButtons

                This plugin adds a copy button to fenced code blocks so that readers can copy the code easily.

                To enable it, simply add codeBlockCopyButtons to your site's plugins.

                site.json
                {
+  ...
+  "plugins": [
+    "codeBlockCopyButtons"
+  ],
+}
+

                This is what it'll look like once added:

                copyCode

                Plugin: codeBlockWrapButtons

                This plugin adds a wrap text button to fenced code blocks so that readers can read long lines of code without scrolling sideways.

                To enable it, simply add codeBlockWrapButtons to your site's plugins.

                site.json
                {
+  ...
+  "plugins": [
+    "codeBlockWrapButtons"
+  ],
+}
+

                This is what it'll look like once added:

                wrapCodeOff

                Clicking the wrap text button will result in the following:

                wrapCodeOn

                In case a single long word is encountered, it will be split across multiple lines similar to the following:

                wrapCodeOnWordBreak

                Plugin: Tags

                With this plugin you can use tags to selectively filter content when building a site.

                Toggling alternative contents

                Tags are specified by the tags attribute, and can be attached to any HTML element. During rendering, only elements that match tags specified in the site.json files will be rendered.

                Example Attaching tags to elements:

                # Print 'Hello world'
+
+<p tags="language--java">System.out.println("Hello world");</p>
+<p tags="language--C#">Console.WriteLine("Hello world");</p>
+<p tags="language--python">print("Hello world")</p>
+

                You need to specify the tags to include in the pluginsContext, under tags:

                {
+  ...
+  "plugins" : [
+    "filterTags"
+  ],
+  "pluginsContext" : {
+    "filterTags" : {
+      "tags": ["language--java"]
+    }
+  }
+}
+

                All other tagged elements will be filtered out. In this case, only the element with the language--java tag will be rendered. This is helpful when creating multiple versions of a page without having to maintain separate copies.

                If the filterTags plugin is not enabled in site.json, all tagged elements will be rendered.

                You can also use multiple tags in a single HTML element. Specify each tag in the tags attribute separated by a space. An element will be rendered if any of the tags matches the one in site.json.

                Example Attaching multiple tags to an element:

                # For loops
+
+<p tags="language--java language--C#">for (int i = 0; i < 5; i++) { ... }</p>
+

                As long as the language--java or language--C# tag is specified, the code snippet will be rendered.

                Alternatively, you can specify tags to render for a page in the front matter.

                Example Specifying tags in front matter:

                <frontmatter>
+  title: "Hello World"
+  tags: ["language--java"]
+</frontmatter>
+
                <p tags="language--java advanced">System.out.println("Hello world");</p>
+<p tags="language--C# basic">Console.WriteLine("Hello world");</p>
+
                <frontmatter>
+  title: "Hello World"
+  tags: ["language--java"]
+</frontmatter>
+

                Tags in site.json will be merged with the ones in the front matter, and are processed after front matter tags. See Hiding Tags for more information.

                Advanced Tagging Tips

                You can use a * in a tag name to match elements more generally. A * in a tag will match any number of characters at its position.

                Example Using general tags:

                <frontmatter>
+  title: "Hello World"
+  tags: ["language--*"]
+</frontmatter>
+
+<p tags="language--java">System.out.println("Hello world");</p>
+<p tags="language--C#">Console.WriteLine("Hello world");</p>
+<p tags="language--python">print("Hello world")</p>
+

                All 3 <p>s will be shown.

                Hiding Tags

                Using - at the start of a tag hides all tags matching the expression. This is helpful for disabling a group of tags and enabling a particular tag.

                Example Using general tags:

                index.md
                <frontmatter>
+  title: "Hello World"
+  tags: ["language--java"]
+</frontmatter>
+
+<p tags="language--java">System.out.println("Hello world");</p>
+<p tags="language--C#">Console.WriteLine("Hello world");</p>
+<p tags="language--python">print("Hello world")</p>
+
                site.json
                {
+  ...
+  "plugins" : [
+    "filterTags"
+  ],
+  "pluginsContext" : {
+    "filterTags" : {
+      "tags": ["-language--*", "language--C#"]
+    }
+  }
+}
+

                language--java is overridden by -language--*, so only language--C# is shown.

                This only works because tags are processed left to right, so all language--* tags are hidden before language--C#. Tags in site.json are processed after tags in <frontmatter>.

                # Print 'Hello world'
+
+<p tags="language--java">System.out.println("Hello world");</p>
+<p tags="language--C#">Console.WriteLine("Hello world");</p>
+<p tags="language--python">print("Hello world")</p>
+
                {
+  ...
+  "plugins" : [
+    "filterTags"
+  ],
+  "pluginsContext" : {
+    "filterTags" : {
+      "tags": ["language--java"]
+    }
+  }
+}
+

                Plugin: GoogleAnalytics

                This plugin allows your web pages to be captured by google analytics.

                To enable it, add googleAnalytics to your site's plugins, and add the trackingID parameter via the pluginsContext.

                Name Type Default Description
                trackingID String Tracking ID provided by Google. Follow this guide to get your Tracking ID.
                site.json
                {
+  ...
+  "plugins": [
+    "googleAnalytics"
+  ],
+  "pluginsContext": {
+    "googleAnalytics": {
+      "trackingID": "YOUR-TRACKING-ID", // replace with your google analytics tracking id.
+    }
+  }
+}
+

                Plugin: Disqus

                This plugin allows you to use Disqus for your site.

                Before you can use this plugin, you need to (1) setup a Disqus account and (2) register your site.

                You may sign up for a Disqus account and register your site here.

                Note that you do not have to install Disqus on your site, this plugin does it for you.

                All you have to do is provide the shortname of your Disqus site, which is explained below.

                To enable this plugin, add disqus to your site's plugins, and supply the required options via the pluginsContext.

                Name Type Default Description
                shortname String Shortname is provided by Disqus. Follow this guide to get shortname for your Disqus site.
                site.json
                {
+  ...
+  "plugins": [
+    "disqus"
+  ],
+  "pluginsContext": {
+    "disqus": {
+      "shortname": "YOUR_DISQUS_SITE_SHORTNAME", // replace with your Disqus site's shortname 
+    }
+  }
+}
+

                Then, to add a Disqus comment section on a page, all you need to do is to add a <disqus/> HTML tag to any MarkBind source file.

                It may be a good idea to create a layout with <disqus/> in it, so that you won't have to repeat it on every page.

                Using External Plugins

                Adding External Plugins

                WARNING: Plugins are executable programs that can be written by anyone. This means that they might contain malicious code that may damage your computer.

                Only run plugins from sources that you trust. Do not run the plugin if the source/origin of the plugin cannot be ascertained.

                Plugins come as .js files. To install an external plugin, simply put it in the _markbind/plugins folder. To use the plugin, update the site.json file the same way you did for built-in plugins.

                Writing Plugins

                You may also write your own plugins! Refer here for the available interfaces to do so.

                Setting Site Properties

                Making the Site Searchable


                + + + diff --git a/userGuide/usingPlugins.page-vue-render.js b/userGuide/usingPlugins.page-vue-render.js new file mode 100644 index 0000000..08e142e --- /dev/null +++ b/userGuide/usingPlugins.page-vue-render.js @@ -0,0 +1,205 @@ + + var pageVueRenderFn = function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',[_c('header',{attrs:{"fixed":""}},[_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/index.html","title":"Home"}},[_c('img',{attrs:{"src":"/images/logo-darkbackground.svg","height":"20"}})])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('form',{staticClass:"navbar-form"},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback,"menu-align-right":""}})],1)])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/index.html"}},[_v("HOME")])]),_v(" "),_c('div',{attrs:{"tags":"environment--ug"}},[_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"sibling-or-child","href":"/userGuide/index.html"}},[_v("USER GUIDE")])])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/showcase.html"}},[_v("SHOWCASE")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/about.html"}},[_v("ABOUT")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_c('span',[_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}})])])])])],1)]),_v(" "),_c('div',{attrs:{"id":"flex-body"}},[_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"site-nav","tag-name":"nav","to":"site-nav"}},[_c('div',{staticClass:"site-nav-top"},[_c('div',{staticClass:"font-weight-bold mb-2",staticStyle:{"font-size":"1.25rem"}},[_v("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tipsAndTricks.html"}},[_v("Tips & Tricks")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/glossary.html"}},[_v("Glossary")])])])])])])],1)],1)]),_v(" "),_c('div',{staticClass:"fixed-header-padding",attrs:{"id":"content-wrapper"}},[_m(0),_v(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("MarkBind's philosophy is to "),_c('em',[_v("bake-in")]),_v(" all necessary functionality into MarkBind itself rather than expect users to go hunting for suitable plugins. Hence, we do not anticipate MarkBind users to rely heavily on such external plugins.")])]),_v(" "),_m(4),_v(" "),_m(5),_v(" "),_m(6),_v(" "),_c('p',[_v("For example:")]),_v(" "),_m(7),_m(8),_v(" "),_c('p',[_v("MarkBind has a set of built-in plugins that can be used immediately without installation.")]),_v(" "),_c('div',[_m(9),_v(" "),_m(10),_v(" "),_m(11),_v(" "),_m(12),_m(13),_m(14),_v(" "),_m(15),_m(16),_v(" "),_m(17),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("By default, Algolia DocSearch indexes all content on the page, including content in components that are hidden to the user during the initial render (e.g. Panels). To exclude these content from being indexed, you can add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".algolia-no-index")]),_v(" to the "),_c('a',{attrs:{"href":"https://community.algolia.com/docsearch/config-file.html#selectors_exclude-optional"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("selectors_exclude")])]),_v(" attribute in your DocSearch configuration.")]),_v(" "),_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("algolia-no-index")]),_v(" class is automatically added to content hidden by MarkBind's Vue components. You may also add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("algolia-no-index")]),_v(" class to content that you do not want to be indexed by Algolia DocSearch.")])])],1),_v(" "),_c('div',[_m(18),_v(" "),_m(19),_v(" "),_m(20),_v(" "),_m(21),_c('p',[_v("This is what it'll look like once added:")]),_v(" "),_c('pic',{attrs:{"src":"/images/copyCode.png","width":"750","alt":"copyCode"}})],1),_v(" "),_c('div',[_m(22),_v(" "),_m(23),_v(" "),_m(24),_v(" "),_m(25),_c('p',[_v("This is what it'll look like once added:")]),_v(" "),_c('pic',{attrs:{"src":"/images/wrapCodeOff.png","width":"750","alt":"wrapCodeOff"}}),_v(" "),_m(26),_v(" "),_c('pic',{attrs:{"src":"/images/wrapCodeOn.png","width":"750","alt":"wrapCodeOn"}}),_v(" "),_c('p',[_v("In case a single long word is encountered, it will be split across multiple lines similar to the following:")]),_v(" "),_c('pic',{attrs:{"src":"/images/wrapCodeOnWordBreak.png","width":"750","alt":"wrapCodeOnWordBreak"}})],1),_v(" "),_c('div',[_m(27),_v(" "),_c('p',[_v("With this plugin you can use tags to selectively filter content when building a site.")]),_v(" "),_m(28),_v(" "),_m(29),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Attaching tags to elements:")],1),_v(" "),_m(30),_m(31),_v(" "),_m(32),_m(33)]),_v(" "),_m(34),_v(" "),_m(35),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Attaching multiple tags to an element:")],1),_v(" "),_m(36),_m(37)]),_v(" "),_c('p',[_v("Alternatively, you can specify tags to render for a page in the front matter.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Specifying tags in front matter:")],1),_v(" "),_m(38)]),_v(" "),_m(39),_v(" "),_m(40),_v(" "),_m(41),_v(" "),_m(42),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Using general tags:")],1),_v(" "),_m(43),_m(44)]),_v(" "),_m(45),_v(" "),_m(46),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('big',[_c('span',{staticClass:"badge badge-pill badge-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Using general tags:")],1),_v(" "),_m(47),_m(48),_m(49)]),_v(" "),_m(50),_v(" "),_m(51)]),_v(" "),_m(52),_v(" "),_c('div',[_m(53),_v(" "),_m(54),_v(" "),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("Before you can use this plugin, you need to "),_c('strong',[_v("(1) setup a Disqus account")]),_v(" and "),_c('strong',[_v("(2) register your site")]),_v(".")]),_v(" "),_c('p',[_v("You may sign up for a Disqus account and register your site "),_c('a',{attrs:{"href":"https://disqus.com/admin/create/"}},[_v("here")]),_v(".")]),_v(" "),_c('p',[_v("Note that you "),_c('strong',[_c('span',{staticClass:"underline"},[_v("do not have to install Disqus on your site")])]),_v(", this plugin does it for you.")]),_v(" "),_c('p',[_v("All you have to do is provide the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("shortname")]),_v(" of your Disqus site, which is explained below.")])]),_v(" "),_m(55),_v(" "),_m(56),_m(57),_m(58),_v(" "),_c('box',{attrs:{"type":"tip"}},[_c('p',[_v("It may be a good idea to create a "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#layouts"}},[_v("layout")]),_v(" with "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" in it, so that you won't have to repeat it on every page.")])])],1),_v(" "),_m(59),_v(" "),_m(60),_v(" "),_c('tip-box',{attrs:{"type":"warning"}},[_c('p',[_c('strong',[_v("WARNING:")]),_v(" Plugins are executable programs that can be written by anyone. This means that they might contain malicious code that may damage your computer.")]),_v(" "),_c('p',[_v("Only run plugins from sources that you trust. Do not run the plugin if the source/origin of the plugin cannot be ascertained.")])]),_v(" "),_m(61),_v(" "),_m(62),_v(" "),_m(63),_v(" "),_m(64),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})],1),_v(" "),_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"},[_c('overlay-source',{staticClass:"nav nav-pills flex-column my-0 small no-flex-wrap",attrs:{"id":"mb-page-nav","tag-name":"nav","to":"mb-page-nav"}},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#using-plugins"}},[_v("Using Plugins‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#managing-plugins"}},[_v("Managing Plugins‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#using-built-in-plugins"}},[_v("Using Built-in Plugins‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#plugin-algolia"}},[_v("Plugin: Algolia‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#plugin-codeblockcopybuttons"}},[_v("Plugin: codeBlockCopyButtons‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#plugin-codeblockwrapbuttons"}},[_v("Plugin: codeBlockWrapButtons‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#plugin-tags"}},[_v("Plugin: Tags‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#toggling-alternative-contents"}},[_v("Toggling alternative contents‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#advanced-tagging-tips"}},[_v("Advanced Tagging Tips‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#hiding-tags"}},[_v("Hiding Tags‎")])]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#plugin-googleanalytics"}},[_v("Plugin: GoogleAnalytics‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#plugin-disqus"}},[_v("Plugin: Disqus‎")])]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#using-external-plugins"}},[_v("Using External Plugins‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#adding-external-plugins"}},[_v("Adding External Plugins‎")])]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#writing-plugins"}},[_v("Writing Plugins‎")])])])],1)])],1),_v(" "),_m(65)])} +}; + var pageVueStaticRenderFns = [function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}},[_v("Using Plugins")])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_c('em',[_v("User Guide → Using Plugins")])])])])} +},function anonymous( +) { +with(this){return _c('h1',{attrs:{"id":"using-plugins"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-plugins"}}),_v("Using Plugins"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-plugins","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p',[_v("A plugin is an extension that adds additional features to MarkBind. Some non-essential MarkBind functionalities are provided as plugins so that you can enable/disable/configure them as necessary. MarkBind also supports adding external plugins (written by you or other third parties).")])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"managing-plugins"}},[_c('span',{staticClass:"anchor",attrs:{"id":"managing-plugins"}}),_v("Managing Plugins"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#managing-plugins","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("Plugins are managed via the following two properties in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("plugins")]),_v(": An array of plugin names to use.")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pluginsContext")]),_v(": Parameters passed to each plugin, specified as key-value pairs.")])])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugins\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugin1\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugin2\"")]),_v(",\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pluginsContext\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugin1\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"input\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Input for Plugin 1\"")]),_v("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugin2\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"data\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Data for Plugin 2\"")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"using-built-in-plugins"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-built-in-plugins"}}),_v("Using Built-in Plugins"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-built-in-plugins","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h3',{attrs:{"id":"plugin-algolia"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugin-algolia"}}),_v("Plugin: Algolia"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-algolia","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("This plugin allows you to use "),_c('a',{attrs:{"href":"https://community.algolia.com/docsearch/"}},[_v("Algolia DocSearch")]),_v(" for your site.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("To enable it, add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("algolia")]),_v(" to your site's plugins, and supply the required options via the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pluginsContext")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("apiKey")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The API key for your site's Algolia DocSearch setup")])]),_v(" "),_c('tr',[_c('td',[_v("appId")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The application id for your site's Algolia DocSearch setup")])]),_v(" "),_c('tr',[_c('td',[_v("indexName")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The index name for your site's Algolia DocSearch setup")])]),_v(" "),_c('tr',[_c('td',[_v("algoliaOptions")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Object")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{}")])]),_v(" "),_c('td',[_v("A JSON object specifying "),_c('a',{attrs:{"href":"https://community.algolia.com/docsearch/behavior.html#algoliaoptions"}},[_v("additional options for DocSearch")])])]),_v(" "),_c('tr',[_c('td',[_v("debug")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether to turn on debug mode to allow inspection of CSS styles for the dropdown")])])])])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugins\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"algolia\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pluginsContext\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"algolia\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"apiKey\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25626fae796133dc1e734c6bcaaeac3c\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// replace with your site's api key")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"appId\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"R2IYF7ETH7\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// replace with your site's application id")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"indexName\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"docsearch\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// replace with your site's index name")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"algoliaOptions\"")]),_v(": { "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hitsPerPage\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("10")]),_v(" }, "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// optional")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"debug\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-literal"}},[_v("false")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// optional")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("To connect the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("searchbar")]),_v(" component to Algolia DocSearch, add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("algolia")]),_v(" key.")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("algolia")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("Alternatively, if you are using a custom search bar, you can assign the input field the id "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("algolia-search-input")]),_v(" to connect it to Algolia DocSearch.")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("input")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"algolia-search-input\"")]),_v(">")]),_v("\n")])])])} +},function anonymous( +) { +with(this){return _c('h3',{attrs:{"id":"plugin-codeblockcopybuttons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugin-codeblockcopybuttons"}}),_v("Plugin: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockCopyButtons")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-codeblockcopybuttons","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("This plugin adds a "),_c('em',[_v("copy")]),_v(" button to fenced code blocks so that readers can copy the code easily.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("To enable it, simply add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockCopyButtons")]),_v(" to your site's plugins.")])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugins\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"codeBlockCopyButtons\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v("}\n")])])])])])} +},function anonymous( +) { +with(this){return _c('h3',{attrs:{"id":"plugin-codeblockwrapbuttons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugin-codeblockwrapbuttons"}}),_v("Plugin: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockWrapButtons")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-codeblockwrapbuttons","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("This plugin adds a "),_c('em',[_v("wrap text")]),_v(" button to fenced code blocks so that readers can read long lines of code without scrolling sideways.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("To enable it, simply add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockWrapButtons")]),_v(" to your site's plugins.")])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugins\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"codeBlockWrapButtons\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v("}\n")])])])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("Clicking the "),_c('em',[_v("wrap text")]),_v(" button will result in the following:")])} +},function anonymous( +) { +with(this){return _c('h3',{attrs:{"id":"plugin-tags"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugin-tags"}}),_v("Plugin: Tags"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-tags","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"toggling-alternative-contents"}},[_c('span',{staticClass:"anchor",attrs:{"id":"toggling-alternative-contents"}}),_v("Toggling alternative contents"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#toggling-alternative-contents","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("Tags are specified by the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tags")]),_v(" attribute, "),_c('strong',[_v("and can be attached to any HTML element")]),_v(". During rendering, only elements that match tags specified in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" files will be rendered.")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("# Print 'Hello world'\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v(">")]),_v("System.out.println(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C#\"")]),_v(">")]),_v("Console.WriteLine(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--python\"")]),_v(">")]),_v("print(\"Hello world\")"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("You need to specify the tags to include in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pluginsContext")]),_v(", under "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tags")]),_v(":")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"plugins\"")]),_v(" : [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"filterTags\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pluginsContext\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"filterTags\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"tags\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v("]\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("All other tagged elements will be filtered out. In this case, only the element with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--java")]),_v(" tag will be rendered. This is helpful when creating multiple versions of a page without having to maintain separate copies.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("If the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("filterTags")]),_v(" plugin is not enabled in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(", all tagged elements will be rendered.")])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("You can also use multiple tags in a single HTML element. Specify each tag in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tags")]),_v(" attribute")]),_v(" separated by a space. An element will be rendered if "),_c('strong',[_v("any of the tags")]),_v(" matches the one in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("# For loops\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java language--C#\"")]),_v(">")]),_v("for (int i = 0; i < 5; i++) { ... }"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("As long as the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--java")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--C#")]),_v(" tag is specified, the code snippet will be rendered.")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: \"Hello World\"\n")]),_c('span',[_v(" tags: [\"language--java\"]\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java advanced\"")]),_v(">")]),_v("System.out.println(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C# basic\"")]),_v(">")]),_v("Console.WriteLine(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])]),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: \"Hello World\"\n")]),_c('span',[_v(" tags: [\"language--java\"]\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("Tags in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" will be merged with the ones in the front matter, and are processed after front matter tags. See "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#hiding-tags"}},[_v("Hiding Tags")]),_v(" for more information.")])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"advanced-tagging-tips"}},[_c('span',{staticClass:"anchor",attrs:{"id":"advanced-tagging-tips"}}),_v("Advanced Tagging Tips"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#advanced-tagging-tips","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("You can use a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("*")]),_v(" in a tag name to match elements more generally. A "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("*")]),_v(" in a tag will match any number of characters at its position.")])} +},function anonymous( +) { +with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: \"Hello World\"\n")]),_c('span',[_v(" tags: [\"language--*\"]\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v(">")]),_v("System.out.println(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C#\"")]),_v(">")]),_v("Console.WriteLine(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--python\"")]),_v(">")]),_v("print(\"Hello world\")"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("All 3 "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("

                ")]),_v("s will be shown.")])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"hiding-tags"}},[_c('span',{staticClass:"anchor",attrs:{"id":"hiding-tags"}}),_v("Hiding Tags"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#hiding-tags","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("Using "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v(" at the start of a tag hides all tags matching the expression. This is helpful for disabling a group of tags and enabling a particular tag.")])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading inline-markdown-heading"},[_c('span',[_c('a',{attrs:{"href":"http://index.md"}},[_v("index.md")])])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"index.md","class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: \"Hello World\"\n")]),_c('span',[_v(" tags: [\"language--java\"]\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v(">")]),_v("System.out.println(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C#\"")]),_v(">")]),_v("Console.WriteLine(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--python\"")]),_v(">")]),_v("print(\"Hello world\")"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"plugins\"")]),_v(" : [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"filterTags\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pluginsContext\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"filterTags\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"tags\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"-language--*\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C#\"")]),_v("]\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--java")]),_v(" is overridden by "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-language--*")]),_v(", so only "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--C#")]),_v(" is shown.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("This only works because tags are processed left to right, so all "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--*")]),_v(" tags are hidden before "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--C#")]),_v(". Tags in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" are processed after tags in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("# Print 'Hello world'\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v(">")]),_v("System.out.println(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C#\"")]),_v(">")]),_v("Console.WriteLine(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--python\"")]),_v(">")]),_v("print(\"Hello world\")"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])]),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"plugins\"")]),_v(" : [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"filterTags\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pluginsContext\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"filterTags\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"tags\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v("]\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])])])} +},function anonymous( +) { +with(this){return _c('div',[_c('h3',{attrs:{"id":"plugin-googleanalytics"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugin-googleanalytics"}}),_v("Plugin: GoogleAnalytics"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-googleanalytics","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("This plugin allows your web pages to be captured by "),_c('a',{attrs:{"href":"https://analytics.google.com/analytics/web/#/"}},[_v("google analytics")]),_v(".")]),_v(" "),_c('p',[_v("To enable it, add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("googleAnalytics")]),_v(" to your site's plugins, and add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("trackingID")]),_v(" parameter via the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pluginsContext")]),_v(".")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("trackingID")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("Tracking ID provided by Google. Follow this "),_c('a',{attrs:{"href":"https://support.google.com/analytics/answer/1008080"}},[_v("guide")]),_v(" to get your Tracking ID.")])])])])]),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugins\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"googleAnalytics\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pluginsContext\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"googleAnalytics\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"trackingID\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"YOUR-TRACKING-ID\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// replace with your google analytics tracking id.")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])])])])])} +},function anonymous( +) { +with(this){return _c('h3',{attrs:{"id":"plugin-disqus"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugin-disqus"}}),_v("Plugin: Disqus"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-disqus","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("This plugin allows you to use "),_c('a',{attrs:{"href":"https://disqus.com/"}},[_v("Disqus")]),_v(" for your site.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("To enable this plugin, add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("disqus")]),_v(" to your site's plugins, and supply the required options via the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pluginsContext")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("shortname")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("Shortname is provided by Disqus. Follow this "),_c('a',{attrs:{"href":"https://help.disqus.com/en/articles/1717111-what-s-a-shortname"}},[_v("guide")]),_v(" to get shortname for your Disqus site.")])])])])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugins\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"disqus\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pluginsContext\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"disqus\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"shortname\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"YOUR_DISQUS_SITE_SHORTNAME\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// replace with your Disqus site's shortname ")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("Then, to add a Disqus comment section on a page, all you need to do is to add a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" HTML tag to any MarkBind source file.")])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"using-external-plugins"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-external-plugins"}}),_v("Using External Plugins"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-external-plugins","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h3',{attrs:{"id":"adding-external-plugins"}},[_c('span',{staticClass:"anchor",attrs:{"id":"adding-external-plugins"}}),_v("Adding External Plugins"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#adding-external-plugins","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("Plugins come as "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".js")]),_v(" files. To install an external plugin, simply put it in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/plugins")]),_v(" folder. To use the plugin, update the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" file the same way you did for built-in plugins.")])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"writing-plugins"}},[_c('span',{staticClass:"anchor",attrs:{"id":"writing-plugins"}}),_v("Writing Plugins"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#writing-plugins","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("You may also write your own plugins! Refer "),_c('a',{attrs:{"href":"https://markbind.org/devdocs/devGuide/writingPlugins.html"}},[_v("here")]),_v(" for the available interfaces to do so.")])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-left"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Setting Site Properties")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-right"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_c('span',[_c('span',[_v("Making the Site Searchable")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} +},function anonymous( +) { +with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 3.1.1")]),_v(" on Sat, 22 Jan 2022, 16:49:34 UTC]")]),_c('br'),_v(" "),_c('small',[_v("This site is powered by "),_c('a',{attrs:{"href":"https://www.netlify.com/"}},[_v("Netlify")]),_v(".")])])])])} +}]; + \ No newline at end of file diff --git a/userGuide/workingWithSites.html b/userGuide/workingWithSites.html new file mode 100644 index 0000000..d37635e --- /dev/null +++ b/userGuide/workingWithSites.html @@ -0,0 +1,43 @@ + + + + + + + + MarkBind - User Guide: Working with Sites + + + + + + + + + + + + + + + + +

                Working with Sites

                Working with Sites

                Setting Site Properties

                + +Setting site-wide properties of a MarkBind site is done by updating the site.json file found and the project root. For example, it can be used to set the deploy destination, themes to apply, plugins to use etc. +

                More info in: User Guide → Setting Site Properties

                Using Plugins

                + +A plugin is an extension that adds additional features to MarkBind. Some non-essential MarkBind functionalities are provided as plugins so that you can enable/disable/configure them as necessary. MarkBind also supports adding external plugins (written by you or other third parties). +

                More info in: User Guide → Using Plugins

                Making the site searchable

                MarkBind comes with with an in-built site search facility with the option to use third-party search services as well. +

                More info in: User Guide → Making the Site Searchable

                Applying Themes

                MarkBind supports the ability to style your website with a variety of bootstrap themes.

                More info in: User Guide → Themes

                Deploying the Site

                A site generated by MarkBind can be deployed by simply uploading the generated files to any Web server. In addition, MarkBind provides several convenient deployment options. +

                More info in: User Guide → Deploying the Site

                MarkBind in the Project Workflow

                + +As MarkBind is especially optimized as a project documentation tool, it integrates well with the workflow of software project. +

                More info in: User Guide → MarkBind in the Project Workflow

                Reusing Contents

                Setting Site Properties


                + + + diff --git a/userGuide/workingWithSites.page-vue-render.js b/userGuide/workingWithSites.page-vue-render.js new file mode 100644 index 0000000..1978662 --- /dev/null +++ b/userGuide/workingWithSites.page-vue-render.js @@ -0,0 +1,55 @@ + + var pageVueRenderFn = function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',[_c('header',{attrs:{"fixed":""}},[_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/index.html","title":"Home"}},[_c('img',{attrs:{"src":"/images/logo-darkbackground.svg","height":"20"}})])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('form',{staticClass:"navbar-form"},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback,"menu-align-right":""}})],1)])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/index.html"}},[_v("HOME")])]),_v(" "),_c('div',{attrs:{"tags":"environment--ug"}},[_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"sibling-or-child","href":"/userGuide/index.html"}},[_v("USER GUIDE")])])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/showcase.html"}},[_v("SHOWCASE")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/about.html"}},[_v("ABOUT")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_c('span',[_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}})])])])])],1)]),_v(" "),_c('div',{attrs:{"id":"flex-body"}},[_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"site-nav","tag-name":"nav","to":"site-nav"}},[_c('div',{staticClass:"site-nav-top"},[_c('div',{staticClass:"font-weight-bold mb-2",staticStyle:{"font-size":"1.25rem"}},[_v("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tipsAndTricks.html"}},[_v("Tips & Tricks")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/glossary.html"}},[_v("Glossary")])])])])])])],1)],1)]),_v(" "),_c('div',{staticClass:"fixed-header-padding",attrs:{"id":"content-wrapper"}},[_m(0),_v(" "),_m(1),_v(" "),_c('p',[_c('big',[_c('strong',[_v("Setting Site Properties")])])],1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_c('p',[_c('big',[_c('strong',[_v("Using Plugins")])])],1),_v(" "),_m(4),_v(" "),_m(5),_v(" "),_c('p',[_c('big',[_c('strong',[_v("Making the site searchable")])])],1),_v(" "),_m(6),_v(" "),_m(7),_v(" "),_c('p',[_c('big',[_c('strong',[_v("Applying Themes")])])],1),_v(" "),_m(8),_v(" "),_m(9),_v(" "),_c('p',[_c('big',[_c('strong',[_v("Deploying the Site")])])],1),_v(" "),_m(10),_v(" "),_m(11),_v(" "),_c('p',[_c('big',[_c('strong',[_v("MarkBind in the Project Workflow")])])],1),_v(" "),_m(12),_v(" "),_m(13),_v(" "),_m(14),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})]),_v(" "),_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"})])],1),_v(" "),_m(15)])} +}; + var pageVueStaticRenderFns = [function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}},[_v("Working with Sites")])])} +},function anonymous( +) { +with(this){return _c('h1',{attrs:{"id":"working-with-sites"}},[_c('span',{staticClass:"anchor",attrs:{"id":"working-with-sites"}}),_v("Working with Sites"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#working-with-sites","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('blockquote',[_c('span',[_v("\n\nSetting site-wide properties of a MarkBind site is done by updating the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" file found and the project root. For example, it can be used to set the deploy destination, themes to apply, plugins to use etc.\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"indented"},[_v("More info in: "),_c('span',[_c('span',[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_c('em',[_v("User Guide → Setting Site Properties")])])])])])])} +},function anonymous( +) { +with(this){return _c('blockquote',[_c('span',[_v("\n\nA plugin is an extension that adds additional features to MarkBind. Some non-essential MarkBind functionalities are provided as plugins so that you can enable/disable/configure them as necessary. MarkBind also supports adding external plugins (written by you or other third parties).\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"indented"},[_v("More info in: "),_c('span',[_c('span',[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_c('em',[_v("User Guide → Using Plugins")])])])])])])} +},function anonymous( +) { +with(this){return _c('blockquote',[_c('span',[_c('strong',[_v("MarkBind comes with with an in-built "),_c('em',[_v("site search")]),_v(" facility")]),_v(" with the option to use third-party search services as well.\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"indented"},[_v("More info in: "),_c('span',[_c('span',[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_c('em',[_v("User Guide → Making the Site Searchable")])])])])])])} +},function anonymous( +) { +with(this){return _c('blockquote',[_c('span',[_c('strong',[_v("MarkBind supports the ability to style your website with a variety of bootstrap themes.")])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"indented"},[_v("More info in: "),_c('span',[_c('span',[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_c('em',[_v("User Guide → Themes")])])])])])])} +},function anonymous( +) { +with(this){return _c('blockquote',[_c('span',[_c('strong',[_v("A site generated by MarkBind can be deployed by simply uploading the generated files to any Web server.")]),_v(" In addition, MarkBind provides several convenient deployment options.\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"indented"},[_v("More info in: "),_c('span',[_c('span',[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_c('em',[_v("User Guide → Deploying the Site")])])])])])])} +},function anonymous( +) { +with(this){return _c('blockquote',[_c('span',[_v("\n\nAs "),_c('strong',[_v("MarkBind is especially optimized as a project documentation tool")]),_v(", it integrates well with the workflow of software project.\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"indented"},[_v("More info in: "),_c('span',[_c('span',[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_c('em',[_v("User Guide → MarkBind in the Project Workflow")])])])])])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-left"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/reusingContents.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Reusing Contents")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-right"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_c('span',[_c('span',[_v("Setting Site Properties")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} +},function anonymous( +) { +with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 3.1.1")]),_v(" on Sat, 22 Jan 2022, 16:49:34 UTC]")]),_c('br'),_v(" "),_c('small',[_v("This site is powered by "),_c('a',{attrs:{"href":"https://www.netlify.com/"}},[_v("Netlify")]),_v(".")])])])])} +}]; + \ No newline at end of file