diff --git a/404.html b/404.html index eecf792..ffd0851 100644 --- a/404.html +++ b/404.html @@ -3,7 +3,7 @@ - + MarkBind - Page not found diff --git a/about.html b/about.html index 2209e78..afddbe4 100644 --- a/about.html +++ b/about.html @@ -3,7 +3,7 @@ - + MarkBind - About Us @@ -15,9 +15,9 @@ const baseUrl = '' -

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.

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

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

Contributors ✨

Mentors:

Dev Team:

Thanks goes to these wonderful people (emoji key):

Tan Wang Leng
Tan Wang Leng
πŸ’»		 Ang Ze Yu
Ang Ze Yu
πŸ’» πŸ“†		 Jason Jiang
Jason Jiang
πŸ’»		 Chng Zhi Xuan
Chng Zhi Xuan
πŸ’»		 Aaron Chong
Aaron Chong
πŸ’»		 Jamos Tay
Jamos Tay
πŸ’»		 Nicholas Chua
Nicholas Chua
πŸ’»
Tan Zhen Yong
Tan Zhen Yong
πŸ’»		 Rachael Sim
Rachael Sim
πŸ’»		 Ong Wei Xiang
Ong Wei Xiang
πŸ’»		 Daniel Berzin Chua
Daniel Berzin Chua
πŸ’»		 Daryl Tan
Daryl Tan
πŸ’»		 Damith C. Rajapakse
Damith C. Rajapakse
πŸ’» πŸ§‘β€πŸ«		 Jonah Tan
Jonah Tan
πŸ’» πŸ‘€
nusjzx
nusjzx
πŸ’»		 Alfred Yip
Alfred Yip
πŸ’»		 Ryo Armanda
Ryo Armanda
πŸ’» πŸ‘€		 Tan Yuanhong
Tan Yuanhong
πŸ’»		 Si Jie
Si Jie
πŸ’»		 Yash Chowdhary
Yash Chowdhary
πŸ’»		 Kenneth Lu
Kenneth Lu
πŸ’»
Rayson Koh
Rayson Koh
πŸ’»		 Phang Chun Rong
Phang Chun Rong
πŸ’»		 nbriannl
nbriannl
πŸ’»		 Tejas Bhuwania
Tejas Bhuwania
πŸ’»		 Marvin Chin
Marvin Chin
πŸ’»		 Aadyaa Maddi
Aadyaa Maddi
πŸ’»		 Kendrick Ang
Kendrick Ang
πŸ’»
Daryl Chan
Daryl Chan
πŸ’»		 Liu YongLiang
Liu YongLiang
πŸ’» πŸ“– πŸ‘€		 Ahmed Bahajjaj
Ahmed Bahajjaj
πŸ’»		 Hsu Zhong Jun
Hsu Zhong Jun
πŸ’»		 Kimberly
Kimberly
πŸ’»		 Joshua Wong
Joshua Wong
πŸ’»		 Jeremy Tan Jie Rui
Jeremy Tan Jie Rui
πŸ’»
Anubhav
Anubhav
πŸ’»		 Boh Cheng Hin
Boh Cheng Hin
πŸ’»		 Hiroki Nishino
Hiroki Nishino
πŸ’»		 Junx
Junx
πŸ’» πŸ“–		 Li JiaYao
Li JiaYao
πŸ’»		 Ambrose Liew
Ambrose Liew
πŸ’»		 Praveen
Praveen
πŸ’»
Riyadh H. Alzahrani
Riyadh H. Alzahrani
πŸ’»		 Samuel Fang
Samuel Fang
πŸ’»		 Thomas Tan
Thomas Tan
πŸ’»		 Vighnesh Iyer
Vighnesh Iyer
πŸ’»		 dao ngoc hieu
dao ngoc hieu
πŸ’»		 Ikko Ashimine
Ikko Ashimine
πŸ“–		 Jovyn Tan
Jovyn Tan
πŸ’» πŸ“–
Hannah
Hannah
πŸ’» πŸ“–		 NaincyKumariKnoldus
NaincyKumariKnoldus
πŸ“–		 Elroy Goh
Elroy Goh
πŸ’»		 Elton Goh
Elton Goh
πŸ’»		 benluiwj
benluiwj
πŸ’» πŸ“–		 weiquu
weiquu
πŸ’» πŸ“–		 eeliana
eeliana
πŸ“–
Dominic Lim
Dominic Lim
πŸ’» πŸ“–		 peter
peter
πŸ’»		 Calvin Tan
Calvin Tan
πŸ“–		 david
david
πŸ’» πŸ“–		 David
David
πŸ“–		 charandeepsinghb
charandeepsinghb
πŸ’» πŸ“–		 Jia Yu
Jia Yu
πŸ“–
Lee Hyung Woon / μ΄ν˜•μš΄
Lee Hyung Woon / μ΄ν˜•μš΄
πŸ’»		 Chan Yu Cheng
Chan Yu Cheng
πŸ’»		 Ivad Yves HABIMANA
Ivad Yves HABIMANA
πŸ“–		 Bibhu
Bibhu
πŸ’»		 WillCWX
WillCWX
πŸ“– πŸ’»		 Sven Tang
Sven Tang
πŸ“– πŸ’»		 lesterong
lesterong
πŸ’»
SPWwj
SPWwj
πŸ“– πŸ’»		 James
James
πŸ’» πŸ“–		 Nisemono
Nisemono
πŸ’»		 jingting1412
jingting1412
πŸ’»		 " Xu">
Shuyao "Tim" Xu
πŸ’»		 Kevin Eyo
Kevin Eyo
πŸ’»		 Lee Xiong Jie, Isaac
Lee Xiong Jie, Isaac
πŸ’»
Lam Jiu Fong
Lam Jiu Fong
πŸ’»		 Wang Yiwen
Wang Yiwen
πŸ“– πŸ’»		 Ashleeey1224
Ashleeey1224
πŸ’»

Past Members:

@@ -15,10 +15,10 @@ const baseUrl = '' -

MarkBind

Generate 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 ( , 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 , 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 ...

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

@@ -15,9 +15,9 @@ const baseUrl = '' -

Examples of MarkBind Websites

Course Websites

Online Books

Product/Project Websites

@@ -15,9 +15,9 @@ const baseUrl = '' -

Adding Navigation Buttons

User Guide β†’ Adding Navigation Buttons

Adding Navigation Buttons

Navigation buttons can greatly help your website visitors browse through your content with ease.

Overview of steps

  1. Define a function to read the page title and create navigation buttons via Nunjucks.
  2. Define a title variable in the content file and invoke the function created to render the navigation buttons.

In the following example, we will be editing the site content generated from the default template (by running markbind init in the terminal).

Adding the required file and folder

  1. Create a folder njk in the root directory.
  2. In the folder, create a file common.njk with the following code:
common.njk
{% macro previous_next(previous_page, next_page) %}
 <div class="clearfix">
@@ -49,7 +49,7 @@
 </div>
 <br>
 {% endmacro %}
-

You should now be able to navigate between Topic 1 and Topic 2 with ease!

Whenever you create a new page, be sure to include the following code below and replace the parts enclosed in the square brackets e.g [Name_Of_Section].

<!--- Creates an invisible title used in the common.njk file -->
-<span id="title" class="d-none">[Name_Of_Section]</span>
-
-{% from "njk/common.njk" import previous_next %}
-{{ previous_next('[Previous_Page_Filename]', '[Next_Page_Filename]') }}
-

You should now be able to navigate between Topic 1 and Topic 2 with ease!

Whenever you create a new page, be sure to include the following code below and replace the parts enclosed in the square brackets e.g [Name_Of_Section].

<!--- Creates an invisible title used in the common.njk file -->
+<span id="title" class="d-none">[Name_Of_Section]</span>
+
+{% from "njk/common.njk" import previous_next %}
+{{ previous_next('[Previous_Page_Filename]', '[Next_Page_Filename]') }}
+

Effect after changes are made

  1. Changing [Name_Of_Section] will affect the text in the navigation button when attempting to navigate to the current page from the previous and next pages.
  2. Changing [Previous_Page_Filename] and [Next_Page_Filename] will link the current page to the respective previous and next pages.
  3. Line 4 aims to import the previous_next function from common.njk file that you created earlier. You can refer to the Nunjucks docs for the syntax here.
  4. Line 5 aims to call the previous_next function you imported. You can refer to the Nunjucks docs for the syntax here.

Redirecting to a Custom 404 Page

Templates


+

Effect after changes are made

  1. Changing [Name_Of_Section] will affect the text in the navigation button when attempting to navigate to the current page from the previous and next pages.
  2. Changing [Previous_Page_Filename] and [Next_Page_Filename] will link the current page to the respective previous and next pages.
  3. Line 4 aims to import the previous_next function from common.njk file that you created earlier. You can refer to the Nunjucks docs for the syntax here.
  4. Line 5 aims to call the previous_next function you imported. You can refer to the Nunjucks docs for the syntax here.

Redirecting to a Custom 404 Page

Templates


@@ -15,9 +15,9 @@ const baseUrl = '' -

Adding Pages

User Guide β†’ Adding Pages

Adding Pages

It is easy to add files to a MarkBind site as any file inside the becomes a part of the generated website.

This includes any static assets such as images and other media files.

Example If you have an image images/logo.png in your root directory, it will be available as <website-url>/images/logo.png in 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 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 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.

External Static HTML Web Pages

You can easily include and deploy any external , along with your MarkBind site.

Example Your code coverage tool generates a HTML Coverage Report into a coverage folder and you want it to be accessible at <website-url>/coverage/index.html

The general approach is as follows:

  1. Create a folder with the path that you want the HTML web page to be available at.
  2. Exclude the files from being further processed by MarkBind by adding them to the pagesExclude attribute of the site.json file.
  3. Generate the HTML files and put them in that folder (This can be done automatically by your build tool, either locally, or as part of your continuous integration process).
  4. Run markbind build to generate your MarkBind site.
  5. Deploy the built files manually or using a continuous integration process.

In the event that you only generate the static webpages in your CI build process, you may receive an invalid intra-link warning if you serve the MarkBind site locally. To disable it on a per-link basis, add {no-validation} at the end like this:

This is [my cool page generated from another tool](/my-cool-page/index.html{no-validation})
-

See the link Validation section for more details.

Authoring Contents

MarkBind Syntax Overview


+

See the link Validation section for more details.

Authoring Contents

MarkBind Syntax Overview


@@ -15,9 +15,9 @@ const baseUrl = '' -

Authoring Contents

Authoring Contents

Adding Pages

It is easy to add files to a MarkBind site as any file inside the 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. @@ -33,7 +33,7 @@

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


+

More info in: User Guide β†’ Reusing Contents

Getting Started

Adding Pages


@@ -15,9 +15,9 @@ const baseUrl = '' -

CLI Commands

Overview

If you do not have MarkBind installed globally, you can still use MarkBind commands by prefixing the commands with npx. For example, markbind init becomes npx markbind-cli init.

If you have MarkBind installed locally, you may also refer to the scripts section of your package.json file for the commands you can use. For example, npm run init for markbind init.

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

$ markbind --help
+

CLI Commands

Overview

If you do not have MarkBind installed globally, you can still use MarkBind commands by prefixing the commands with npx. For example, markbind init becomes npx markbind-cli init.

If you have MarkBind installed locally, you may also refer to the scripts section of your package.json file for the commands you can use. For example, npm run init for markbind init.

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

$ markbind --help
 Usage: markbind <command>
  
  Options:
@@ -39,7 +39,7 @@
    serve|s [options] [root]           build then serve a website from a directory
    build|b [options] [root] [output]  build a website
    deploy|d [options] [root]          deploy the latest build of 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:

Options

  • -c, --convert
    -Convert an existing GitHub wiki or docs folder into a MarkBind website. See Converting an existing GitHub project for more information.

  • -t, --template
    -When initialising MarkBind, change the template that you start with. See templates.

Examples

  • markbind init : Initializes the site in the current working directory.
  • markbind init ./myWebsite : Initializes the site in ./myWebsite directory.
  • markbind init --convert --template minimal: Converts the GitHub wiki or docs folder in the current working directory into a minimal 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 by default.
  3. Opens a live preview of the website.

Arguments:

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.
    • 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 +Root directory. Default is the current directory.
    Example ./myWebsite

Options

  • -c, --convert
    +Convert an existing GitHub wiki or docs folder into a MarkBind website. See Converting an existing GitHub project for more information.

  • -t, --template
    +When initialising MarkBind, change the template that you start with. See templates.

Examples

  • markbind init : Initializes the site in the current working directory.
  • markbind init ./myWebsite : Initializes the site in ./myWebsite directory.
  • markbind init --convert --template minimal: Converts the GitHub wiki or docs folder in the current working directory into a minimal 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 by default.
  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.
    • 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.

  • -a <address>, --address <address>
    -Specify the server address/host (Default is 127.0.0.1).

  • -p <port>, --port <port>
    -Serve the website in the specified port (Default is 8080).

Examples

  • markbind serve : Serves the site from the current working directory.
  • markbind serve ./myWebsite : Serves the site from the ./myWebsite directory.
  • markbind serve -p 8888 -s otherSite.json : Serves the site in Port 8888 from the current working directory, using otherSite.json as the site configuration file.

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:

  • [root]
    +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.

  • -a <address>, --address <address>
    +Specify the server address/host (Default is 127.0.0.1).

  • -p <port>, --port <port>
    +Serve the website in the specified port (Default is 8080).

Examples

  • markbind serve : Serves the site from the current working directory.
  • markbind serve ./myWebsite : Serves the site from the ./myWebsite directory.
  • markbind serve -p 8888 -s otherSite.json : Serves the site in Port 8888 from the current working directory, using otherSite.json as the site configuration file.

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:

Options

  • --baseUrl <base>
    -Override the baseUrl property (read from the site.json) with the given <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 : Generates the site from the current working directory.
  • markbind build ./myWebsite : Generates the site from the ./myWebsite directory.
  • markbind build ./myWebsite ./myOutDir : Generates the site from the ./myWebsite directory to the ./myOutDir directory.
  • markbind build ./stagingDir --baseUrl staging : Generates the site from the ./stagingDir directory, with the baseUrl property in site.json set to staging.

deploy Command


Format: markbind deploy [options] [root]

Alias: markbind d

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

Arguments:

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

  • -n, --no-build
    -Skips the generation of the site before deploying it. By default, the deploy command generates the site before deploying the built site. This command should be used if the site needs to be generated with non-default arguments for the build command (e.g. baseUrl is specified using the --baseUrl flag for the markbind build command).

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

Related: User Guide: Deploying the Website.

Examples

  • markbind deploy : Deploys after generating the site from the current working directory.
  • markbind deploy ./myWebsite : Deploys after generating the site from the ./myWebsite directory.
  • markbind deploy --no-build : Deploys the site from the current working directory without generating it.

--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

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

Options

  • --baseUrl <base>
    +Override the baseUrl property (read from the site.json) with the given <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 : Generates the site from the current working directory.
  • markbind build ./myWebsite : Generates the site from the ./myWebsite directory.
  • markbind build ./myWebsite ./myOutDir : Generates the site from the ./myWebsite directory to the ./myOutDir directory.
  • markbind build ./stagingDir --baseUrl staging : Generates the site from the ./stagingDir directory, with the baseUrl property in site.json set to staging.

deploy Command


Format: markbind deploy [options] [root]

Alias: markbind d

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

Arguments:

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

  • -n, --no-build
    +Skips the generation of the site before deploying it. By default, the deploy command generates the site before deploying the built site. This command should be used if the site needs to be generated with non-default arguments for the build command (e.g. baseUrl is specified using the --baseUrl flag for the markbind build command).

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

Related: User Guide: Deploying the Website.

Examples

  • markbind deploy : Deploys after generating the site from the current working directory.
  • markbind deploy ./myWebsite : Deploys after generating the site from the ./myWebsite directory.
  • markbind deploy --no-build : Deploys the site from the current working directory without generating it.

--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

@@ -15,9 +15,9 @@ const baseUrl = '' -

Advanced Component Usage

User Guide β†’ Advanced Component Usage

Advanced

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>
@@ -43,7 +43,7 @@
   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

+

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>
+

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">
@@ -73,7 +73,7 @@
     <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">
+

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
+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 
<box type="info" add-class="lead font-italic text-center">
-  Easily apply Bootstrap classes without using a wrapper!
-</box>
-
Markup 
<box type="info" add-class="lead font-italic text-center">
+  Easily apply Bootstrap classes without using a wrapper!
+</box>
+

Other Components

Using HTML, JavaScript, CSS


+

Other Components

Using HTML, JavaScript, CSS


@@ -15,9 +15,9 @@ const baseUrl = '' -

Image & Diagram Components

User Guide β†’ Image & Diagram Components

Images & Diagrams

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">
+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" lazy>
   MarkBind Logo
 </pic>
-

OUTPUT:

Logo +

OUTPUT:

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.
<pic src="https://markbind.org/images/logo-lightbackground.png" width="300" alt="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.
lazy boolean false The <pic> component lazy loads if this attribute is specified.
Either the height or width should be specified to avoid layout shifts while lazy loading images.
<pic src="https://markbind.org/images/logo-lightbackground.png" width="300" alt="Logo" lazy>
   MarkBind Logo
 </pic>
-
Logo +
Logo MarkBind Logo

Annotations

An annotate component allows you to easily annotate over any images.

Annotate wrappers (<annotate>) are used in conjunction with Annotate -Points (<a-point>).

  • <annotate>: Annotate wrappers are used to hold the image and set its width and height.
  • <a-point>: Annotate points define the position, text and style of each point within the image. Insert them between the Annotate wrappers.

The x and y coordinates of each Annotate Point are relative to the image and are written in percentage of total width or height.

CODE:

<annotate src="../../images/annotateSampleImage.png" width="500" alt="Sample Image">
+Points (<a-point>).
 
  • <annotate>: Annotate wrappers are used to hold the image and set its width and height.
    •  
  • <a-point>: Annotate points define the position, text and style of each point within the image. Insert them between the Annotate wrappers.
 
The x and y coordinates of each Annotate Point are relative to the image and are written in percentage of total width or height.
 
CODE:
 
<annotate src="../../images/annotateSampleImage.png" width="500" alt="Sample Image" lazy>
   <!-- Minimal Point -->
   <a-point x="25%" y="25%" content="This point is 25% from the left and 25% from the top" />
   <!-- Customize Point Size (default size is 40px) -->
@@ -93,7 +93,7 @@
     <span class="badge bg-primary">Badge label</span>
   </a-point>
 </annotate>
-
 
OUTPUT:
 
 
 
  
Sample Image 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Use markdown in the header, label and content
 
Annotate Points supports markdown in the header, label and content.
 
CODE:
 
<annotate src="../../images/annotateSampleImage.png" width="500" alt="Sample Image">
+

OUTPUT:

Sample Image

Use markdown in the header, label and content

Annotate Points supports markdown in the header, label and content.

CODE:

<annotate src="../../images/annotateSampleImage.png" width="500" alt="Sample Image">
   <a-point x="25%" y="25%" content="# Content" />
   <a-point x="50%" y="25%" header=":blush:" />
   <a-point x="75%" y="25%" label=":heart:"/>
 </annotate>
-

OUTPUT:

Sample Image

Customising shapes for Annotate Point

Annotate Points supports different shapes and customisation.

The default shape used is a rounded button.

+

OUTPUT:

Sample Image

Customising shapes for Annotate Point

Annotate Points supports different shapes and customisation.

The default shape used is a rounded button.

When using a customised shape, the options shape, color and opacity will not work. -

Style the shape to achieve the same effect.

CODE:

<annotate src="../../images/annotateSampleImage.png" width="500" alt="Sample Image">
+
Style the shape to achieve the same effect.

CODE:

<annotate src="../../images/annotateSampleImage.png" width="500" alt="Sample Image">
   <a-point x="75%" y="50%" content="This point is 75% from the left and 50% from the top">
     <span class="badge bg-primary">Badge label</span>
   </a-point>
@@ -144,7 +144,7 @@
     <div style="opacity: 90%; color: red">Custom</div>
   </a-point>
 </annotate>
-

OUTPUT:

Sample Image

Using triggers and positions for Annotate Point

Similar to popovers, Annotate Points also support different types of triggers and positions +

OUTPUT:

Sample Image

Using triggers and positions for Annotate Point

Similar to popovers, Annotate Points also support different types of triggers and positions for users with different needs.

CODE:

<annotate src="../../images/annotateSampleImage.png" width="500" alt="Sample Image">
   <!-- Default Trigger (click)-->
   <a-point x="33%" y="33%" content="Lorem ipsum dolor sit amet" />
@@ -173,7 +173,7 @@
   <!-- Both trigger and popover placement hover focus -->
   <a-point x="50%" y="66%" content="Popover on the bottom" placement="bottom" trigger="hover focus"/>
 </annotate>
-

OUTPUT:

Sample Image

Displaying content as legends in Annotate Point

<a-point> allows users to display its content inside a popover or as a legend below the diagram or both. However, the label attribute must be specified in <a-point> in order to display the content below the image.

CODE:

<annotate src="../../images/annotateSampleImage.png" width="500" alt="Sample Image">
+

OUTPUT:

Sample Image

Displaying content as legends in Annotate Point

<a-point> allows users to display its content inside a popover or as a legend below the diagram or both. However, the label attribute must be specified in <a-point> in order to display the content below the image.

CODE:

<annotate src="../../images/annotateSampleImage.png" width="500" alt="Sample Image">
   <!-- Default Legend (popover only)-->
   <a-point x="25%" y="50%" content="There is only text when you click me" label="1"/>
   <!-- Set Legend to bottom only (no popover) -->
@@ -197,7 +197,7 @@
   <!-- Set Legend to both -->
   <a-point x="75%" y="50%" content="There is text at both locations"  label="3" legend="both" header="Headers are displayed at both positions"/>
 </annotate>
-

OUTPUT:

Sample Image
+

OUTPUT:

Sample Image
:

Clicking on this does nothing

: @@ -223,7 +223,7 @@ <a-point x="45%" y="50%" content="UML uses a hollow diamond to indicate an aggregation." label="3" header="Aggregation" color="blue" legend="both"/> <a-point x="64.5%" y="50%" content="Association labels describe the meaning of the association." label="4" header="Association labels" color="yellow" legend="both"/> </annotate> -

OUTPUT:

Sample Image
+

OUTPUT:

Sample Image
:

You can use a triangle and a solid line (not to be confused with an arrow) to indicate class inheritance.

: @@ -252,7 +252,7 @@ <a-point x="65%" y="50%" content="This is the period during which the method is being executed" header="Activation Bar" opacity="0.3" size="50" color="yellow"/> <a-point x="14%" y="85%" content="Return control and possibly some return value" header="Return Value" opacity="0.2" size="30" color="blue"/> </annotate> -

OUTPUT:

Sample Image

<a-point> Options

Name Type Default Description
x String This must be specified.
The x-coordinate of the point.
Supports range of values from 0% to 100%.
y String This must be specified.
The y-coordinate of the point.
Supports range of values from 0% to 100%.
content String '' Annotate Point content.
The annotation content will be omitted if this is not provided.
header String '' Annotate Point header.
The header will be omitted if this is not provided.
trigger String click Popover trigger type.
Supports: click, focus, hover, or any space-separated combination of these.
placement String top Position of the Popover.
Supports: top, left, right, bottom.
label String '' The label shown on the point itself.
The label will be omitted if this is not provided.
Note that labels should not be too long as they might overflow out of the point.
size String '40' The size of the point in pixels.
Does not work with customised shapes
color String 'green' The color of the point.
Supports any color in the CSS color format. E.g. red, #ffffff, rgb(66, 135, 245), etc.
Does not work with customised shapes
opacity String '0.3' The opacity of the point.
Supports range of values from 0 to 1.
Does not work with customised shapes
fontSize String '14' The font size of the label.
Supports any pixel size smaller than size of the point.
textColor String 'black' The color of the label.
Supports any color in the CSS color format. E.g. red, #ffffff, rgb(66, 135, 245), etc.
legend String 'popover' The position of the Annotate Point content and header.
Supports: popover, bottom, both.

<annotate> Options

This is effectively the same as the options used for the picture component.

Name Type Default Description
alt string This must be specified.
The alternative text of the image.
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
height string '' The height of the image in pixels.
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.
<annotate src="../../images/annotateSampleImage.png" width="500" alt="Sample Image">
+

OUTPUT:

Sample Image

<a-point> Options

Name Type Default Description
x String This must be specified.
The x-coordinate of the point.
Supports range of values from 0% to 100%.
y String This must be specified.
The y-coordinate of the point.
Supports range of values from 0% to 100%.
content String '' Annotate Point content.
The annotation content will be omitted if this is not provided.
header String '' Annotate Point header.
The header will be omitted if this is not provided.
trigger String click Popover trigger type.
Supports: click, focus, hover, or any space-separated combination of these.
placement String top Position of the Popover.
Supports: top, left, right, bottom.
label String '' The label shown on the point itself.
The label will be omitted if this is not provided.
Note that labels should not be too long as they might overflow out of the point.
size String '40' The size of the point in pixels.
Does not work with customised shapes
color String 'green' The color of the point.
Supports any color in the CSS color format. E.g. red, #ffffff, rgb(66, 135, 245), etc.
Does not work with customised shapes
opacity String '0.3' The opacity of the point.
Supports range of values from 0 to 1.
Does not work with customised shapes
fontSize String '14' The font size of the label.
Supports any pixel size smaller than size of the point.
textColor String 'black' The color of the label.
Supports any color in the CSS color format. E.g. red, #ffffff, rgb(66, 135, 245), etc.
legend String 'popover' The position of the Annotate Point content and header.
Supports: popover, bottom, both.

<annotate> Options

This is effectively the same as the options used for the picture component.

Name Type Default Description
alt string This must be specified.
The alternative text of the image.
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
height string '' The height of the image in pixels.
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.
lazy boolean false The <annotate> component lazy loads if this attribute is specified.
Either the height or width should be specified to avoid layout shifts while lazy loading images.
<annotate src="../../images/annotateSampleImage.png" width="500" alt="Sample Image">
   <a-point x="25%" y="25%" content="Lorem ipsum dolor sit amet" />
   <a-point x="50%" y="25%" content="Lorem ipsum dolor sit amet" label="1a"/>
   <a-point x="50%" y="25%" content="Lorem ipsum dolor sit amet" label="1b" legend="both"/>
 </annotate>
-
Sample Image

Thumbnails

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

CODE:

<thumbnail circle src="../../images/deer.jpg" size="100"/>
+
Sample Image

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"/>
@@ -298,7 +298,7 @@
 <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"/>
-

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.

The following additional dependencies are involved when using this feature (locally and in your )

  • Java 8 or higher (required - to run the PlantUML JAR executable)
  • Graphviz or higher (optional - you don't need this if you are on Windows, or only need sequence diagrams and activity (beta) diagrams) -
    • A warning will be displayed if you are using a non-Windows platform and don't have Graphviz installed. To disable this warning, you may modify your site.json like this.
    • An alternative layout engine, Smetana, is integrated into PlantUML and can be used to generate diagrams without a Graphviz installation. However, as the Smetana engine is a work in progress, certain layouts may not render correctly.

CODE:

<puml width="300">
+

Diagrams

You can use the PlantUML syntax to add diagrams.

The following additional dependencies are involved when using this feature (locally and in your )

  • Java 8 or higher (required - to run the PlantUML JAR executable)
  • Graphviz or higher (optional - you don't need this if you are on Windows, or only need sequence diagrams and activity (beta) diagrams) +
    • A warning will be displayed if you are using a non-Windows platform and don't have Graphviz installed. To disable this warning, you may modify your site.json like this.
    • An alternative layout engine, Smetana, is integrated into PlantUML and can be used to generate diagrams without a Graphviz installation. However, as the Smetana engine is a work in progress, certain layouts may not render correctly.

CODE:

<puml width="300">
 @startuml
 alice -> bob ++ : hello
 bob -> bob ++ : self call
@@ -344,7 +344,7 @@
 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
+

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
@@ -370,7 +370,7 @@
 bob -> george !! : delete
 return success
 @enduml
-

in another file:

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

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.
Avoid using the same name for different diagrams to prevent overwriting.
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>
+

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.
Avoid using the same name for different diagrams to prevent overwriting.
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:

Tree

A tree component allows you to generate tree-like visualisations, suitable for displaying folder structure.

Use indentation (2 spaces) to indicate the level of nesting.

CODE:

<tree>
+

Sequence Diagram:

Use Case Diagram:

Class Diagram:

Activity Diagram:

Component Diagram:

State Diagram:

Object Diagram:

Gantt Diagram:

Entity Relation Diagram:

Ditaa Diagram:

Archimate Diagram:

Tree

A tree component allows you to generate tree-like visualisations, suitable for displaying folder structure.

Use indentation (2 spaces) to indicate the level of nesting.

CODE:

<tree>
 C:/course/
   textbook/
     index.md
@@ -433,7 +433,7 @@
   reading.md
   site.json
 </tree>
-

OUTPUT:

C:/course/ +

OUTPUT:

C:/course/ β”œβ”€β”€ textbook/ β”‚ └── index.md β”œβ”€β”€ index.md @@ -466,7 +466,7 @@ + textbook/ + index.md </tree> -

OUTPUT:

C:/course/ +

OUTPUT:

C:/course/ β”œβ”€β”€ textbook/ └── index.md C:/course/ @@ -491,30 +491,30 @@ C:/course/ β”œβ”€β”€ textbook/ └── index.md -

Besides file system structures, you can use this for any lightweight tree-like structure.

CODE:

<tree>
-Enjoy MarkBind?
-  You may want to:
-    Like :heart:
-    Share :speech_balloon:
-    Contribute :pencil:
-</tree>
-

Besides file system structures, you can use this for any lightweight tree-like structure.

CODE:

<tree>
+Enjoy MarkBind?
+  You may want to:
+    Like :heart:
+    Share :speech_balloon:
+    Contribute :pencil:
+</tree>
+

OUTPUT:

Enjoy MarkBind? +

OUTPUT:

Enjoy MarkBind? └── You may want to: β”œβ”€β”€ Like ❀️ β”œβ”€β”€ Share πŸ’¬ @@ -538,7 +538,7 @@ :fas-file-code: :) </tree> -

OUTPUT:

Formatting is supported! +

OUTPUT:

Formatting is supported! β”œβ”€β”€ textbook/ -β”‚ └── index.md -β”œβ”€β”€ index.md -β”‚ β”œβ”€β”€ index.md -β”‚ β”œβ”€β”€ dimmed -β”‚ β”œβ”€β”€ Superscript -β”‚ β”œβ”€β”€ Super Bold -β”‚ β”œβ”€β”€ Underline -β”‚ β”œβ”€β”€ Underline with {text=danger} -β”‚ └── RED -β”œβ”€β”€ reading.md -β”œβ”€β”€ site.json -β”œβ”€β”€ hello +β”‚ └── index.md +β”œβ”€β”€ index.md +β”‚ β”œβ”€β”€ index.md +β”‚ β”œβ”€β”€ dimmed +β”‚ β”œβ”€β”€ Superscript +β”‚ β”œβ”€β”€ Super Bold +β”‚ β”œβ”€β”€ Underline +β”‚ β”œβ”€β”€ Underline with {text=danger} +β”‚ └── RED +β”œβ”€β”€ reading.md +β”œβ”€β”€ site.json +β”œβ”€β”€ hello β”œβ”€β”€ 🚧 -β”œβ”€β”€ +β”œβ”€β”€ └── πŸ˜ƒ -

Currently, Pop-Ups(tooltip/trigger) are not supported within a tree component.

You can refer to Formatting Contents to find more information about text styles and other supported inline syntax.

<tree>
+

Currently, Pop-Ups(tooltip/trigger) are not supported within a tree component.

You can refer to Formatting Contents to find more information about text styles and other supported inline syntax.

<tree>
 C:/course/
   textbook/
     index.md
@@ -579,7 +579,7 @@
   reading.md
   site.json
 </tree>
-

Presentational Components

Pop-Up Components


+

Presentational Components

Pop-Up Components


@@ -15,9 +15,9 @@ const baseUrl = '' -

Navigation Components

User Guide β†’ Navigation Components

Navigation

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">
@@ -66,7 +66,7 @@
   </dropdown>
   <a href="#dropdown" class="btn btn-success w-100" role="button">Right</a>
 </div>
-

OUTPUT:

Left

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 -->
+
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>
@@ -93,7 +93,7 @@
     <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">
+

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>
-

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>
+
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>
-

OUTPUT:

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

+

OUTPUT:

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

Search -

    +

      Search (Right-aligned 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>
-

          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>
+
          +
          Search -

            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">
+

              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>
@@ -257,7 +257,7 @@
     <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 via the add-class attribute. You can use built-in background styles or insert your own defined CSS classes.

              Navbar Link Highlighting

              <head-bottom>
+

              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 via the add-class attribute. You can use built-in background styles or insert your own defined CSS classes.

              Navbar Link Highlighting

              <head-bottom>
   <link rel="stylesheet" href="/css/main.css">
 </head-bottom>
 
@@ -296,7 +296,7 @@
   </navbar>
 </header>
 
-

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

              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 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 .
              +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>
@@ -352,7 +352,7 @@
     <page-nav-button />
   </div>
 </navbar>
-

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

              Breadcrumb components provide an easy way for readers to navigate the hierarchy of the site.

              Usage

              Simply include the breadcrumb component (<breadcrumb />) into the page you want and breadcrumbs for that page will be automatically generated.

              You can also insert the breadcrumb component into a layout file to generate breadcrumbs for all pages using that layout.

              CODE:

              <breadcrumb />
-

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

              Breadcrumb components provide an easy way for readers to navigate the hierarchy of the site.

              Usage

              Simply include the breadcrumb component (<breadcrumb />) into the page you want and breadcrumbs for that page will be automatically generated.

              You can also insert the breadcrumb component into a layout file to generate breadcrumbs for all pages using that layout.

              CODE:

              <breadcrumb />
+

              OUTPUT:

              +
              Breadcrumb components refer to the Site Navigation for the hierarchy of pages. -

              Breadcrumbs will not appear if there is no Site Navigation present on the page!

              <breadcrumb />
-
               
              <breadcrumb />
+

              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>
+

              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)
@@ -464,7 +464,7 @@
   * [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 to make it expand by default. In the example above, * Authoring Contents :expanded: makes the menu item Authoring Contents expand by default.

              Page Navigation Menus

              print page nav as table of content

              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 or a .

                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.

              5. (Optional) To make pageNav available on print, you can position the page navigation menu on individual pages with the <page-nav-print /> component.

              Additional details on printing pageNav

              You can specify the location of the page navigation menu on print by using either of the following syntaxes:

              • <page-nav-print />
              • <page-nav-print></page-nav-print>
                • This is useful if you want to include a custom title (or any other content) before the page navigation menu. For example, <page-nav-print>Table of Contents</page-nav-print>

              You can specify multiple <page-nav-print /> components in a page and they do not have to be at the top of the page. They also do not appear when viewed on a browser.

              Example -In the page that you want to have page navigation printed (i.e. to serve as a table of content when viewed on PDFs), use the <page-nav-print /> component to position the pageNav like so:

              <frontmatter>
-  pageNav: 2
-  pageNavTitle: "Chapters of This Page"
-</frontmatter>
-
-<page-nav-print />
-
-# Overview
-Content of the page...
-

              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 to make it expand by default. In the example above, * Authoring Contents :expanded: makes the menu item Authoring Contents expand by default.

              <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>
+

              To view the pageNav on print, open the print preview of the page using the browser's print function.

              If you are using Chrome, you can right-click on the page and select "Print" to open the print preview. -You can try it out by going to our CLI Commands page and printing it.

              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>
-

              Page Navigation Menus

              print page nav as table of content

              A Page Navigation Menu (pageNav for short) displays a list of the current page's headings. Page navigation menus are typically configured in layouts, but can also be utilized in individual pages.

              Adding a pageNav

              1. Specify the smallest heading level you want to be included within the <frontmatter> of a page with or a .

                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.

              5. (Optional) To make pageNav available on print, you can position the page navigation menu on individual pages with the <page-nav-print /> component.

              Additional details on printing pageNav

              You can specify the location of the page navigation menu on print by using either of the following syntaxes:

              • <page-nav-print />
              • <page-nav-print></page-nav-print>
                • This is useful if you want to include a custom title (or any other content) before the page navigation menu. For example, <page-nav-print>Table of Contents</page-nav-print>

              You can specify multiple <page-nav-print /> components in a page and they do not have to be at the top of the page. They also do not appear when viewed on a browser.

              Example +In the page that you want to have page navigation printed (i.e. to serve as a table of content when viewed on PDFs), use the <page-nav-print /> component to position the pageNav like so:

              <frontmatter>
+  pageNav: 2
+  pageNavTitle: "Chapters of This Page"
+</frontmatter>
+
+<page-nav-print />
+
+# Overview
+Content of the page...
+

              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.

              Scroll To Top Button

              The scroll-top-button component allows users to move to the top of the page.

              Adding a scroll-top-button

              Add <scroll-top-button></scroll-top-button> to layout file.

              Options

              Name Type Default Description
              icon[S] String :fas-arrow-circle-up: Inline MarkDown text of the icon displayed on the left.
              icon-size String lg Resizes the icon. Supports integer-scaling of the icon dimensions e.g. 2x, 3x, 4x, etc.
              bottom String 2% Distance from bottom edge of page.
              right String 2% Distance from right edge of page.
              <scroll-top-button
+

              To view the pageNav on print, open the print preview of the page using the browser's print function.

              If you are using Chrome, you can right-click on the page and select "Print" to open the print preview. +You can try it out by going to our CLI Commands page and printing it.

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

              Scroll To Top Button

              The scroll-top-button component allows users to move to the top of the page.

              Adding a scroll-top-button

              Add <scroll-top-button></scroll-top-button> to layout file.

              Options

              Name Type Default Description
              icon[S] String :fas-arrow-circle-up: Inline MarkDown text of the icon displayed on the left.
              icon-size String lg Resizes the icon. Supports integer-scaling of the icon dimensions e.g. 2x, 3x, 4x, etc.
              bottom String 2% Distance from bottom edge of page.
              right String 2% Distance from right edge of page.
              <scroll-top-button
     icon=":fas-arrow-circle-up:"
     icon-size="2x"
     bottom="2%"
     right="2%"
 ></scroll-top-button>
-

              You can see an example of a scroll to top button on the on the bottom right side of this page.


              Pop-Up Components

              Other Components


              +

              You can see an example of a scroll to top button on the on the bottom right side of this page.


              Pop-Up Components

              Other Components


              @@ -15,9 +15,9 @@ const baseUrl = '' -

              Other Components

              User Guide β†’ Other Components

              Others

              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, Fill-in-the-Blanks, 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:">
@@ -37,7 +37,7 @@
 
   <!-- Several hidden checkbox q-option components explained later -->
 </question>
-

              OUTPUT:

              Which of the following is correct?

              math question image

              Adapted from Daily Mail

              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, blanks, 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 . 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?">
+

              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, blanks, 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 . 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.
@@ -90,7 +90,7 @@
   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?

              +

              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:">
+
              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?
+  ###### Which of the following is true?
 
   <br>
   <q-option reason="lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum">
@@ -134,7 +134,7 @@
   11 / 11 = 1
   </q-option>
 </question>
-

              OUTPUT:

              Which of the following is true?

              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.

              Fill-in-the-Blanks Questions

              Fill-in-the-blanks questions are specified with the type="blanks" attribute.

              Unlike MCQ and checkbox questions, answer checking is performed for each blank by providing keywords to check for in the user's answer through the keywords attribute in each q-option. -If no keywords are provided, the answer for that blank will always be marked as correct.

              Keywords are validated by checking if the keyword matches the user's answer exactly (ignoring letter casing). +If no keywords are provided, the answer for that blank will always be marked as correct.

              Keywords are validated by checking if the keyword matches the user's answer exactly (ignoring letter casing). This works well for some and not others.

              CODE:

              <question type="blanks" hint="Google it!">
 
-  ##### German sociologist __________ called the process of simultaneously analyzing the behavior of individuals and the society that shapes that behavior __________.
+  ###### German sociologist __________ called the process of simultaneously analyzing the behavior of individuals and the society that shapes that behavior __________.
 
   <q-option keywords="Norbert Elias, Elias" reason="That's his name!"></q-option>
   <q-option keywords="figuration"></q-option>
 </question>
-

              OUTPUT:

              German sociologist __________ called the process of simultaneously analyzing the behavior of individuals and the society that shapes that behavior __________.

              OUTPUT:

              German sociologist __________ called the process of simultaneously analyzing the behavior of individuals and the society that shapes that behavior __________.

              By default, if the question has yet to be answered correctly, intermediate results will be shown beside each blank. You can specify a no-intermediate-result attribute to avoid this behvaiour (i.e. hide the result of each blank upon incorrect attempts).

              Since the validation is imperfect, the minimum proportion of correct blanks needed for the entire question to be marked as correct can also be changed using the threshold attribute.

              If you don't want to validate the answer at all, you may set the threshold attribute to 0. Doing so always marks the entire question correct, and users will be able to see all intended answers.

              CODE:

              <question type="blanks" hint="What properties would you want these database transactions to have?" threshold=0.75 no-intermediate-result>
+

              By default, if the question has yet to be answered correctly, intermediate results will be shown beside each blank. You can specify a no-intermediate-result attribute to avoid this behvaiour (i.e. hide the result of each blank upon incorrect attempts).

              Since the validation is imperfect, the minimum proportion of correct blanks needed for the entire question to be marked as correct can also be changed using the threshold attribute.

              If you don't want to validate the answer at all, you may set the threshold attribute to 0. Doing so always marks the entire question correct, and users will be able to see all intended answers.

              CODE:

              <question type="blanks" hint="What properties would you want these database transactions to have?" threshold=0.75 no-intermediate-result>
 
-  ##### In computer science, ACID is a set of properties of database transactions intended to guarantee data validity despite errors, power failures, and other mishaps. These properties are: A for __________, C for __________, I for __________, and D for __________.
+  ###### In computer science, ACID is a set of properties of database transactions intended to guarantee data validity despite errors, power failures, and other mishaps. These properties are: A for __________, C for __________, I for __________, and D for __________.
 
   <q-option keywords="Atomicity, Atomic" reason="Meaning: either all occurs or nothing occurs"></q-option>
   <q-option keywords="Consistency, Consistent"></q-option>
   <q-option keywords="Isolation, Isolated"></q-option>
   <q-option keywords="Durability, Durable"></q-option>
 </question>
-

              OUTPUT:

              In computer science, ACID is a set of properties of database transactions intended to guarantee data validity despite errors, power failures, and other mishaps. These properties are: A for __________, C for __________, I for __________, and D for __________.

              OUTPUT:

              In computer science, ACID is a set of properties of database transactions intended to guarantee data validity despite errors, power failures, and other mishaps. These properties are: A for __________, C for __________, I for __________, and D for __________.

              Fill-in-the-Blanks Question specific Options and Slots

              Name Type Default Description
              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.
              no-intermediate-result Boolean False Hides the result of each blank after an incorrect attempt.

              q-option Options and Slots

              Name Type Default Description
              keywords String '' Comma delimited string of keywords or phrases to match the user's answer against.
              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! +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 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?"
@@ -233,7 +233,7 @@
   :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza:
   </div>
 </question>
-

              OUTPUT:

              Which country did the Hawaiian pizza originate from?

              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.

              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>
+

              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.

              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="blanks">...</question>
   <question type="text">...</question>
 </quiz>
-

              OUTPUT:

              +

              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 -->
+

              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 -->
@@ -307,7 +307,7 @@
   </div>
 </question>
 
-
              Fill-in-the-Blanks questions
              
 <question type="blanks" hint="Google it!">
 
-  ##### German sociologist __________ called the process of simultaneously analyzing the behavior of individuals and the society that shapes that behavior __________.
+  ###### German sociologist __________ called the process of simultaneously analyzing the behavior of individuals and the society that shapes that behavior __________.
 
   <q-option keywords="Norbert Elias, Elias" reason="That's his name!"></q-option>
   <q-option keywords="figuration"></q-option>
 </question>
 
-

              +

              Click start to begin -

              0 questions

              Navigation Components

              Advanced Component Usage


              +

              Navigation Components

              Advanced Component Usage


              @@ -15,9 +15,9 @@ const baseUrl = '' -

              Pop-Up Components

              User Guide β†’ Pop-Up Components

              Pop-Ups

              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">Tooltip on top</button>
@@ -62,7 +62,7 @@
 
 **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:

              Trigger

              Markdown: -

              Free Text: +

              OUTPUT:

              Trigger

              Markdown: +

              Free Text:

              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 is the same trigger as last one.

              More about triggers

              Options

              Name Type Default Description
              trigger String hover focus How the tooltip is triggered.
              Supports: click, focus, hover, or any space-separated combination of these.
              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.
-

              OUTPUT:

              More about trigger. +
              +This is the same trigger as last one.

              More about triggers

              Options

              Name Type Default Description
              trigger String hover focus How the tooltip is triggered.
              Supports: click, focus, hover, or any space-separated combination of these.
              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.
+

              OUTPUT:

              Trigger

              Markdown

              Content using slot

              Content using src

              Wrap Text

              Using trigger for Popover:

              CODE:

              More about <trigger for="pop:trigger_id">trigger</trigger>.
+

              OUTPUT:

              Trigger

              Markdown

              Content using slot

              Content using src

              Wrap Text

              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 is the same trigger as last one.

              More about triggers


              Options

              Name Type Default Description
              trigger String hover focus How the Popover is triggered.
              Supports: click, focus, hover, or any space-separated combination of these.
              header[S] String '' Popover header, supports MarkDown text.
              content[S] String '' Popover content, supports MarkDown text.
              src String The URL to the remote page to be loaded as the content of the popover.
              Both .md and .html are accepted.
              placement String top How to position the Popover.
              Supports: top, left, right, bottom.

              MarkBind supports the src attribute, content attribute and content slot for popovers. -Usually, only one of these would be used at a time.

              If multiple of these are used, MarkBind will prioritise in the following order:

              1. content slot
              2. content attribute
              3. src attribute
              Hover over the <trigger for="pop:context-target">keyword</trigger> to see the popover.
+

              OUTPUT:

              More about trigger. +
              +This is the same trigger as last one.

              More about triggers


              Options

              Name Type Default Description
              trigger String hover focus How the Popover is triggered.
              Supports: click, focus, hover, or any space-separated combination of these.
              header[S] String '' Popover header, supports MarkDown text.
              content[S] String '' Popover content, supports MarkDown text.
              src String The URL to the remote page to be loaded as the content of the popover.
              Both .md and .html are accepted.
              placement String top How to position the Popover.
              Supports: top, left, right, bottom.

              MarkBind supports the src attribute, content attribute and content slot for popovers. +Usually, only one of these would be used at a time.

              If multiple of these are used, MarkBind will prioritise in the following order:

              1. content slot
              2. content attribute
              3. src attribute
              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">
@@ -230,7 +230,7 @@
 
 </div>
 </popover>
-

              OUTPUT:

              More about trigger.


              +

              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 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.
              Note: Ensure id for each Modal is unique.
              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.
+
              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 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.
              Note: Ensure id for each Modal is unique.
              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


              +

              Hover here to open a modal.


              Image & Diagram Components

              Navigation Components


              @@ -15,9 +15,9 @@ const baseUrl = '' -

              Presentational Components

              User Guide β†’ Presentational Components

              Presentation

              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.

              Use of markdown in content

              As presentational components are HTML-based, you need to follow the HTML syntax when using markdown in the content of the components. -More specifically, you should use either:

              • add a line break with no indentation before the markdown content
              • use the <markdown> (block level elements) or <md> (inline level elements) tags to wrap the markdown content.

              For more information, please refer to this section.

              Badges

              Example:

              CODE:

              <span class="badge bg-primary">
+

              Presentational Components

              User Guide β†’ Presentational Components

              Presentation

              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.

              Use of markdown in content

              As presentational components are HTML-based, you need to follow the HTML syntax when using markdown in the content of the components. +More specifically, you should use either:

              • add a line break with no indentation before the markdown content
              • use the <markdown> (block level elements) or <md> (inline level elements) tags to wrap the markdown content.

              For more information, please refer to this section.

              Badges

              Example:

              CODE:

              <span class="badge bg-primary">
 Some Plain Text
 </span>
 
 <span class="badge bg-primary">
 <md>_Some Markdown_</md>
 </span>
-

              OUTPUT:

              +

              OUTPUT:

              Some Plain Text - Some Markdown

              You can choose from a variety of colors for your badges. You can also use the rounded-pill class to make the badges pill-shaped.

              CODE:

              Normal:
+ Some Markdown

              You can choose from a variety of colors for your badges. You can also use the rounded-pill class to make the badges pill-shaped.

              CODE:

              Normal:
 <span class="badge bg-primary">Primary</span>
 <span class="badge bg-secondary">Secondary</span>
 <span class="badge bg-success">Success</span>
@@ -71,7 +71,7 @@
 <span class="badge rounded-pill bg-info text-dark">Info</span>
 <span class="badge rounded-pill bg-light text-dark">Light</span>
 <span class="badge rounded-pill bg-dark">Dark</span>
-

              OUTPUT:

              Normal: -Primary Secondary Success Danger Warning Info Light Dark
              Pills: -Primary Secondary Success Danger Warning Info Light Dark

              You can use Badges in combination with headings, buttons, links, etc.

              CODE:

              Links:
+

              OUTPUT:

              Normal: +Primary Secondary Success Danger Warning Info Light Dark
              Pills: +Primary Secondary Success Danger Warning Info Light Dark

              You can use Badges in combination with headings, buttons, links, etc.

              CODE:

              Links:
 <a href="#" class="badge bg-primary">Primary</a>
 <a href="#" class="badge rounded-pill bg-warning text-dark">Warning</a>
 
@@ -102,7 +102,7 @@
 
 ### Feature X <span class="badge bg-danger">beta</span> {.no-index}
 ##### Feature Y <span class="badge rounded-pill bg-success">stable</span> {.no-index}
-

              OUTPUT:

              Links: -Primary Warning

              Buttons: -

              Headings:

              Feature X beta

              Feature Y stable

              You can refer to Bootstrap documentation to find more information about Badges.

              <span class="badge bg-primary">Primary</span>
+

              OUTPUT:

              Links: +Primary Warning

              Buttons: +

              Headings:

              Feature X beta

              Feature Y stable

              You can refer to Bootstrap documentation to find more information about Badges.

              <span class="badge bg-primary">Primary</span>
 <span class="badge rounded-pill bg-success">Success</span>
 <button type="button" class="btn btn-primary">
   Difficulty Level <span class="badge bg-light text-dark">4</span>
 </button>
-

              OUTPUT:

              +

              OUTPUT:

              plain text -
              markdown

              Boxes come with different built-in types.

              CODE:

              <box type="info">
+
              markdown

              Boxes come with different built-in types.

              CODE:

              <box type="info">
     info
 </box>
 <box type="warning">
@@ -200,7 +200,7 @@
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
   </box>
 </box>
-

              OUTPUT:

              +

              OUTPUT:

              info -
              +
              warning -
              +
              success -
              +
              important -
              +
              wrong -
              +
              tip -
              +
              definition -
              +
              dismissible info -

              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.

              You can use markdown here! πŸ•

              +

              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.

              You can use markdown here! πŸ•

              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

              The built in types can be colored.

              CODE:

              <box type="info" theme="primary">
     primary
@@ -258,7 +258,7 @@
 <box type="info" theme="dark">
     dark
 </box>
-

              OUTPUT:

              +

              OUTPUT:

              primary -
              +
              secondary -
              +
              success -
              +
              danger -
              +
              warning -
              +
              info -
              +
              light -
              +
              dark

              MarkBind also supports a light color scheme for boxes

              CODE:

              <box light>
     default light
@@ -317,7 +317,7 @@
 <box type="definition" header="##### Header markdown :rocket:" light>
     definition light with header markdown
 </box>
-

              OUTPUT:

              +

              OUTPUT:

              default light -
              +
              info light -
              +
              warning light -
              +
              success light -
              +
              important light -
              +
              wrong light -
              +
              tip light -
              +
              definition light -
              Header markdown πŸš€
              +
              Header markdown πŸš€
              definition light with header markdown -

              MarkBind also supports a seamless style of boxes

              As light and seamless are mutually exclusive styles, light takes priority over seamless.

              CODE:

              <box seamless>
+

              MarkBind also supports a seamless style of boxes

              As light and seamless are mutually exclusive styles, light takes priority over seamless.

              CODE:

              <box seamless>
     default seamless
 </box>
 <box type="info" seamless>
@@ -378,7 +378,7 @@
 <box type="definition" header="##### Header markdown :rocket:" seamless>
     success seamless with header markdown
 </box>
-

              OUTPUT:

              +

              OUTPUT:

              default seamless -
              +
              info seamless -
              +
              warning seamless -
              +
              success seamless -
              +
              important seamless -
              +
              wrong seamless -
              +
              tip seamless -
              +
              dismissible definition seamless -
              Header markdown πŸš€
              +
              Header markdown πŸš€
              success seamless with header markdown

              You can further customize the Box's appearance.

              CODE:

              <box background-color="#ffca6a" border-color="grey" border-left-color="#8b5a01">
 default type, styled as an orange box with a brown left border
@@ -421,7 +421,7 @@
 
 You can use any inline markdown in the `icon` property.
 </box>
-

              OUTPUT:

              +

              OUTPUT:

              default type, styled as an orange box with a brown left border -
              πŸš€

              info, with a custom markdown rocket icon and red colored text.

              You can use any inline markdown in the icon property.

              You can remove the background, icon and borders of preset styles.

              CODE:

              <box no-icon no-background type="success">
+
              πŸš€

              info, with a custom markdown rocket icon and red colored text.

              You can use any inline markdown in the icon property.

              You can remove the background, icon and borders of preset styles.

              CODE:

              <box no-icon no-background type="success">
     success box without a tick icon and backgound
 </box>
 
 <box no-border type="definition" light>
     definition type box, light style without border
 </box>
-

              OUTPUT:

              +

              OUTPUT:

              success box without a tick icon and backgound -
              +
              definition type box, light style without border -

              Note

              Custom styles ( background-color, border-color, border-left-color, icon ) as introduced in the previous section, takes precedence over the no-background, no-border, no-icon attributes.

              You can also use icons, resize them and change their color accordingly.

              CODE:

              <box type="success" icon=":fas-camera:">
+

              Note

              Custom styles ( background-color, border-color, border-left-color, icon ) as introduced in the previous section, takes precedence over the no-background, no-border, no-icon attributes.

              You can also use icons, resize them and change their color accordingly.

              CODE:

              <box type="success" icon=":fas-camera:">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit
 </box>
 <box type="warning" icon=":fas-camera:" icon-size="2x">
@@ -478,7 +478,7 @@
 <box type="info" icon=":fas-camera:" icon-color="red" icon-size="3x">
     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.
 </box>
-

              OUTPUT:

              +

              OUTPUT:

              Lorem ipsum dolor sit amet, consectetur adipiscing elit -
              +
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. -
              +
              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. -
              +
              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.

              Options

              Name Type Default Description
              background-color String null
              border-color String null
              border-left-color String null Overrides border-color for the left border.
              color String null Color of the text.
              dismissible Boolean false Adds a button to close the box to the top right corner.
              icon[S] String null Inline MarkDown text of the icon displayed on the left.
              icon-size String null Resizes the icon. Supports integer-scaling of the icon dimensions e.g. 2x, 3x, 4x, etc.
              icon-color String null Color of the icon.
              header[S] String null Markdown text of the box header.
              type String '' Supports: info, warning, success, important, wrong, tip, definition, or empty for default.
              theme String '' Supports: primary, secondary, success, danger, warning, tip, light, dark or empty for default.
              light Boolean false Uses a light color scheme for the box.
              seamless Boolean false Uses a seamless style for the box. If light is specified, this style will not be activated.
              no-border Boolean false Removes border, except if styled by border-color or border-left-color.
              no-background Boolean false Removes background, except if styled by background-color option.
              no-icon Boolean false Removes icon, except if icon is displayed via icon option.
              <box type="warning">
   warning
 </box>
-
              +
              default -
              +
              info -
              +
              warning -
              +
              success -
              +
              important -
              +
              wrong -
              +
              tip -
              +
              definition

              Panels

              Panel is a flexible container that supports collapsing and expanding its content. It is expandable by default.

              CODE:

              <panel header="This is your header for a Panel, click me to expand!">
 <markdown>_markdown_</markdown>
 <p>plain text ...</p>
 </panel>
-

              OUTPUT:

              This is your header for a Panel, click me to expand!

              With minimized attribute, panel is minimized into an inline block element. The alt attribute is for you to specify the minimized block header.

              CODE:

              <panel header="How to cultivate a tomato plant at home" alt="Tomatoes" minimized>
+

              OUTPUT:

              This is your header for a Panel, click me to expand!

              With minimized attribute, panel is minimized into an inline block element. The alt attribute is for you to specify the minimized block header.

              CODE:

              <panel header="How to cultivate a tomato plant at home" alt="Tomatoes" minimized>
   Lorem ipsum ...
 </panel>
-

              OUTPUT:

              With expanded attribute, you can set the panels to be expanded when loaded in.

              CODE:

              <panel header="Have your readers click less to see the Panel's contents" expanded>
+

              OUTPUT:

              With expanded attribute, you can set the panels to be expanded when loaded in.

              CODE:

              <panel header="Have your readers click less to see the Panel's contents" expanded>
   Lorem ipsum ...
 </panel>
-

              OUTPUT:

              Have your readers click less to see the Panel's contents

              +

              OUTPUT:

              Have your readers click less to see the Panel's contents

              Lorem ipsum ... -

              With the expand-headerless attribute, you can hide the panel header when it is expanded.

              CODE:

              <panel header="This header will only show when the Panel is collapsed" expand-headerless>
+

              With the expand-headerless attribute, you can hide the panel header when it is expanded.

              CODE:

              <panel header="This header will only show when the Panel is collapsed" expand-headerless>
   Lorem ipsum ...
 </panel>
-

              OUTPUT:

              This header will only show when the Panel is collapsed

              With the peek attribute, you may showcase part of your content without expanding the panel.

              CODE:

              <panel header="Give your readers a peek of the content without expanding Panel" peek>
+

              OUTPUT:

              This header will only show when the Panel is collapsed

              With the peek attribute, you may showcase part of your content without expanding the panel.

              CODE:

              <panel header="Give your readers a peek of the content without expanding Panel" peek>
   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.
@@ -627,7 +627,7 @@
   dis parturient montes, nascetur ridiculus mus. Duis tincidunt diam eu dolor pellentesque, eget dignissim tortor 
   pellentesque. 
 </panel>
-

              OUTPUT:

              Give your readers a peek of the content without expanding Panel

              +

              OUTPUT:

              Give your readers a peek of the content without expanding Panel

              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. @@ -653,7 +653,7 @@ eget tincidunt. Maecenas vel mauris mattis nisl tempor sollicitudin. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis tincidunt diam eu dolor pellentesque, eget dignissim tortor pellentesque. -

              Panel provides many types that change its appearance.

              CODE:

              <panel header="**light type panel (DEFAULT)**" type="light" minimized>
+

              Panel provides many types that change its appearance.

              CODE:

              <panel header="**light type panel (DEFAULT)**" type="light" minimized>
   ...
 </panel>
 <panel header="**dark type panel**" type="dark" minimized>
@@ -683,7 +683,7 @@
 <panel header="**minimal type panel**" type="minimal" minimized>
   ...
 </panel>
-

              OUTPUT:

              Show/Hide buttons using no-switch, no-close, or no-minimized-switch.

              CODE:

              <panel header="**This minimized panel does not have a switch button**" minimized no-minimized-switch>
+

              OUTPUT:

              Show/Hide buttons using no-switch, no-close, or no-minimized-switch.

              CODE:

              <panel header="**This minimized panel does not have a switch button**" minimized no-minimized-switch>
   ...
 </panel>
 <panel header="This panel does not have a switch button" no-switch>
@@ -711,7 +711,7 @@
 <panel header="This panel does not have either buttons" no-close no-switch>
   ...
 </panel>
-

              OUTPUT:

              This panel does not have a switch button

              This panel does not have a close button

              This panel does not have either buttons

              Use markdown in the header (only inline level markdown are supported).

              CODE:

              <panel header="**Bold text** :rocket: ![](https://markbind.org/images/logo-lightbackground.png =x20)" type="seamless">
+

              OUTPUT:

              This panel does not have a switch button

              This panel does not have a close button

              This panel does not have either buttons

              Use markdown in the header (only inline level markdown are supported).

              CODE:

              <panel header="**Bold text** :rocket: ![](https://markbind.org/images/logo-lightbackground.png =x20)" type="seamless">
   ...
 </panel>
-

              OUTPUT:

              Bold text πŸš€

              If src attribute is provided, the panel will take content from the src specified and add it to the Panel body.

              CODE:

              <panel header="Content loaded in from 'src'" src="extra/loadContent.html#fragment" minimized></panel>
-

              OUTPUT:

              Bold text πŸš€

              If src attribute is provided, the panel will take content from the src specified and add it to the Panel body.

              CODE:

              <panel header="Content loaded in from 'src'" src="extra/loadContent.html#fragment" minimized></panel>
+

              OUTPUT:

              If popup-url attribute is provided, a popup button will be shown. If clicked, it opens the specified url in a new window.

              CODE:

              <panel header="Try clicking on my pop-up button" popup-url="/userGuide/syntax/extra/loadContent.html">
+

              OUTPUT:

              Global Effects of the Script and Styles from the Imported Externals

              Importing external resources that contains script or styles can inadvertently take global effects on your MarkBind website. Due to hoisting during processing, imported scripts and stylesheets affect the entire page. This could potentially alter its appearance and behavior beyond the intended scope.

              For example, if a CSS file imported via such means styles headings to be red, this change will be reflected page-wide.

              To safeguard against unintended consequences, consider directly incorporating the code or customizing styles to target specific elements or classes not used universally. This approach grants more precise control over your website's presentation and reduces the risk of unexpected changes.

              If popup-url attribute is provided, a popup button will be shown. If clicked, it opens the specified url in a new window.

              CODE:

              <panel header="Try clicking on my pop-up button" popup-url="/userGuide/syntax/extra/loadContent.html">
   This panel has a popup.
 </panel>
-

              OUTPUT:

              Try clicking on my pop-up button

              If preload attribute is provided, the panel body will load the HTML when the page renders instead of after being expanded.

              CODE:

              <panel header="Right click and inspect my HTML before expanding me!" src="extra/loadContent.html#fragment" preload>
+

              OUTPUT:

              Try clicking on my pop-up button

              If preload attribute is provided, the panel body will load the HTML when the page renders instead of after being expanded.

              CODE:

              <panel header="Right click and inspect my HTML before expanding me!" src="extra/loadContent.html#fragment" preload>
   <p>You should be able to find this text before expanding the Panel.</p>
 </panel>
-

              OUTPUT:

              Right click and inspect my HTML before expanding me!

              You should be able to find this text before expanding the Panel.

              +

              OUTPUT:

              Right click and inspect my HTML before expanding me!

              You should be able to find this text before expanding the Panel.

              Loading... -

              You can nest Panels or other components within a Panel.

              CODE:

              <panel header="Parent Panel">
+

              You can nest Panels or other components within a Panel.

              CODE:

              <panel header="Parent Panel">
   <panel header="Level 1 Nested Panel">
     <panel header="Level 2 Nested Panel">
       <box type="success">
@@ -818,7 +818,7 @@
     Some Text
   </panel>
 </panel>
-

              OUTPUT:

              Parent Panel

              Options

              Name Type Default Description
              header[S] String '' The clickable text on the Panel's header. Supports MarkDown text.
              alt String Panel header The clickable text on the minimised Panel. Supports MarkDown text.
              expandable Boolean true Whether Panel is expandable.
              expanded Boolean false Whether Panel is expanded or collapsed when loaded in.
              minimized Boolean false Whether Panel is minimized.
              expand-headerless Boolean false Whether to hide the header text when the Panel is expanded.
              peek Boolean false Whether to show part of the content when the Panel is collapsed.
              no-close Boolean false Whether to show the close button.
              no-switch Boolean false Whether to show the expand switch.
              bottom-switch Boolean true Whether to show an expand switch at the bottom of the panel. Independent of no-switch.
              popup-url String The URL that the popup window will navigate to. The URL can be absolute or relative.
              preload Boolean false Whether the content is loaded immediately from src.
              src String The URL to the remote page to be loaded as the content of the panel.
              type String light The type or color scheme of the panel (single).
              Supports: light, dark, primary, secondary, info, success, warning, danger, seamless, minimal.
              <panel header="primary type panel" type="primary" >
+

              OUTPUT:

              Parent Panel

              Options

              Name Type Default Description
              header[S] String '' The clickable text on the Panel's header. Supports MarkDown text.
              alt String Panel header The clickable text on the minimised Panel. Supports MarkDown text.
              expandable Boolean true Whether Panel is expandable.
              expanded Boolean false Whether Panel is expanded or collapsed when loaded in.
              minimized Boolean false Whether Panel is minimized.
              expand-headerless Boolean false Whether to hide the header text when the Panel is expanded.
              peek Boolean false Whether to show part of the content when the Panel is collapsed.
              no-close Boolean false Whether to show the close button.
              no-switch Boolean false Whether to show the expand switch.
              bottom-switch Boolean true Whether to show an expand switch at the bottom of the panel. Independent of no-switch.
              popup-url String The URL that the popup window will navigate to. The URL can be absolute or relative.
              preload Boolean false Whether the content is loaded immediately from src.
              src String The URL to the remote page to be loaded as the content of the panel.
              type String light The type or color scheme of the panel (single).
              Supports: light, dark, primary, secondary, info, success, warning, danger, seamless, minimal.
              <panel header="primary type panel" type="primary" >
   ...
 </panel>
-

              minimal type panel

              seamless type panel

              info type panel

              +

              minimal type panel

              seamless type panel

              info type panel

              ... -

              danger type panel

              warning type panel

              success type panel

              Tabs

              CODE:

              <tabs>
+

              danger type panel

              warning type panel

              success type panel

              Tabs

              CODE:

              <tabs>
   <tab header="First tab">
     Text in the first tab
     <markdown>_some markdown_</markdown>
@@ -878,7 +878,7 @@
     </tab>
   </tab-group>
 </tabs>
-

              OUTPUT:

                First tab
                +

                OUTPUT:

                  First tab
                  Text in the first tab

                  some markdown

                  Disabled second tab ❌
                  Tab not printed
                  This tab will not be printed. @@ -902,7 +902,7 @@ Some stuff about stars ...
                  Disabled Moon πŸŒ‘
                  Disabled fourth tab group
                  Hidden tab
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis. -

                  Options

                  tabs:

                  Name Type Default Description
                  active Number 0 Active Tab index (0-based)

                  tab:

                  Name Type Default Description
                  header String null Tab title.
                  disabled Boolean false Whether Tab is clickable and can be activated.

                  tab-group:

                  Name Type Default Description
                  header String null Tab Group title.
                  disabled Boolean false Whether Tab Group is clickable and can be activated.

                  Tabs, tab group and individual tab can be omitted during printing by adding Bootstrap's display property class="d-print-none" to the respective components.

                  <tabs>
+

                  Options

                  tabs:

                  Name Type Default Description
                  active Number 0 Active Tab index (0-based)

                  tab:

                  Name Type Default Description
                  header String null Tab title.
                  disabled Boolean false Whether Tab is clickable and can be activated.

                  tab-group:

                  Name Type Default Description
                  header String null Tab Group title.
                  disabled Boolean false Whether Tab Group is clickable and can be activated.

                  Tabs, tab group and individual tab can be omitted during printing by adding Bootstrap's display property class="d-print-none" to the respective components.

                  <tabs>
   <tab header="First tab">
     Content of the first tab
   </tab>
@@ -918,7 +918,7 @@
     </tab>
   </tab-group>
 </tabs>
-

                  Relevant Tips & Tricks

                  Indent components

                  Using Components

                  Image & Diagram Components


                  +

                  Relevant Tips & Tricks

                  Indent components

                  Using Components

                  Image & Diagram Components


                  @@ -15,9 +15,9 @@ const baseUrl = '' -

                  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.

                  Then, navigate to the Settings > Pages section on GitHub for that repository and set the source to the root of the gh-pages branch. You can read this source on GitHub Pages for more details.

                  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 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 generates the static site from your source by default; hence, it is not necessary to run markbind build first to generate the site before deploying. To skip the site generation, you can use the --no-build option for markbind deploy.

                  More information can be found in the CLI Commands section.

                  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.

                  GitHub Token Repo Permissions
                  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@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: '16'
-      - run: npm i -g markbind-cli
-      - run: markbind deploy --ci
-

                  markbind deploy generates the static site from your source by default; hence, it is not necessary to run markbind build first to generate the site before deploying. To skip the site generation, you can use the --no-build option for markbind deploy.

                  More information can be found in the CLI Commands section.

                  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.

                  GitHub Token Repo Permissions
                  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@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+      - run: npm i -g markbind-cli
+      - 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.

                  MarkBind provides a helper GitHub Action that you can use to simplify your workflow file. A sample workflow file utilizing the action is as follows:

                  name: Deploy MarkBind Site
-on:
-  push:
-    branches: master
-
-jobs: 
-  build_and_deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Build & Deploy MarkBind site
-        uses: MarkBind/markbind-action@v2
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-

                  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.

                  MarkBind provides a helper GitHub Action that you can use to simplify your workflow file. A sample workflow file utilizing the action is as follows:

                  name: Deploy MarkBind Site
+on:
+  push:
+    branches: master
+
+jobs: 
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Build & Deploy MarkBind site
+        uses: MarkBind/markbind-action@v2
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+

                  Read the action documentation to understand the various configuration options.

                  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.
                    Activate Repo

                    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.

                      Add GITHUB_TOKEN

                    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:
-  - 16
-install:
-  - npm i -g markbind-cli
-script: markbind build
-deploy:
-  provider: script
-  script: markbind deploy --ci
-  skip_cleanup: true
-  on:
-    branch: master
-

                      Read the action documentation to understand the various configuration options.

                    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.
                      Activate Repo

                      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.

                        Add GITHUB_TOKEN

                      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:
+  - 16
+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
-

                      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.

                        Install AppVeyor GitHub App

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

                        Add a new Project on AppVeyor

                      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.

                        Add GitHub Token on AppVeyor

                      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 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: '16'
-
-branches:
-  only:
-    - master
-
-install:
-  - ps: Install-Product node $env:nodejs_version
-  - npm i -g markbind-cli
-  - markbind deploy --ci
-
-test: off
-
-build: off
-

                        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.

                        Install AppVeyor GitHub App

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

                        Add a new Project on AppVeyor

                      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.

                        Add GitHub Token on AppVeyor

                      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 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: '16'
+
+branches:
+  only:
+    - master
+
+install:
+  - ps: Install-Product node $env:nodejs_version
+  - npm i -g markbind-cli
+  - 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.

                        Set Up Project in Circle CI

                      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.

                        Add GitHub Token in Circle CI

                      3. Commit and push a config.yml file to the repo containing 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: "16"
-          npm-version: "8"
-          install-yarn: false
-      - run: node --version
-      - run: npm i -g markbind-cli
-      - run: markbind deploy --ci
-version: 2.1
-orbs:
-  node: circleci/node@4.1.0
-workflows:
-  Deploy-MarkBind-Site:
-    jobs:
-      - Build-And-Deploy
-

                      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.

                        Set Up Project in Circle CI

                      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.

                        Add GitHub Token in Circle CI

                      3. Commit and push a config.yml file to the repo containing 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: "16"
+          npm-version: "8"
+          install-yarn: false
+      - run: node --version
+      - run: npm i -g markbind-cli
+      - 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 -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

                        Create a new site

                      4. Select your MarkBind site repository

                        Select 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 16 or higher

                        Update build settings

                      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 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:

                      Preview deploy

                      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:

                        Create Surge account

                      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.

                        Get 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.

                        Add Surge token

                        After aquiring the surge token, you may want to utilize the provided MarkBind reusable workflows to conveniently set up your PR preview via Surge.sh.

                        If you would like to find out more about how it works behind the scene and how to do it yourself, read on to see the detailed steps that need to be specified in your workflow files.

                      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.

                      Surge PR bot

                      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


                      +

                      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 +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

                        Create a new site

                      4. Select your MarkBind site repository

                        Select 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 16 or higher

                        Update build settings

                      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 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:

                      Preview deploy

                      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:

                        Create Surge account

                      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.

                        Get 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.

                        Add Surge token

                        After aquiring the surge token, you may want to utilize the provided MarkBind reusable workflows to conveniently set up your PR preview via Surge.sh.

                        If you would like to find out more about how it works behind the scene and how to do it yourself, read on to see the detailed steps that need to be specified in your workflow files.

                      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.

                      Surge PR bot

                      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


                      @@ -15,9 +15,9 @@ const baseUrl = '' -

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

                      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.
+    
                      ### 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.
+

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

                      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:

                      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--,
+

                      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

                      Additional font colouring syntax:

                      CODE:

                      #r#Coloured Text##
-

                      OUTPUT:

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

                      Center-align

                      Additional font colouring syntax:

                      CODE:

                      #r#Coloured Text##
+

                      OUTPUT:

                      Coloured Text

                      Full list of colours:

                      Letter Colour
                      r red
                      g green
                      b blue
                      c cyan
                      m magenta
                      y yellow
                      k black
                      w white

                      To escape the syntax, simply put a backslash in front of it (e.g. \#b#, \##).

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

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

                      OUTPUT:

                      Coloured Text

                      Full list of colours:

                      Letter Colour
                      r red
                      g green
                      b blue
                      c cyan
                      m magenta
                      y yellow
                      k black
                      w white

                      To escape the syntax, simply put a backslash in front of it (e.g. \#b#, \##).

                      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~
-

                      OUTPUT:

                      Normal text

                      Blockquote, first paragraph

                      Second paragraph

                      Nested quoteblock

                      Alternatively, you can use <blockquote> tags:

                      CODE:

                      Normal text
+

                      OUTPUT:

                      Normal text

                      Blockquote, first paragraph

                      Second paragraph

                      Nested quoteblock

                      Alternatively, you can use <blockquote> tags:

                      CODE:

                      Normal text
 <blockquote>
 Blockquote, first paragraph
 
@@ -245,7 +264,7 @@
 Nested blockquote
 </blockquote>
 </blockquote>
-

                      OUTPUT:

                      Normal text

                      +

                      OUTPUT:

                      Normal text

                      Blockquote, first paragraph -

                      Second paragraph

                      +

                      Second paragraph

                      Nested blockquote

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

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

                      OUTPUT:

                      • Item 1 -
                        • Sub item 1.1
                        • Sub item 1.2
                          +

                      OUTPUT:

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

                      Customizing the Unordered list appearance:

                      To customize unordered lists' icons, add the configuration {icon="icon-name"} after a specific list item.

                      CODE:

                      * Item 1 { icon="glyphicon-education" }
-* Item 2
+
                      • Sub item 1.2.1
                       
                    • Item 2
                      •  
                    • Item 3

                      • Customizing the Unordered list appearance:

                      To customize unordered lists' icons, add the configuration {icon="icon-name"} and/or {text="text"} after a specific list item.

                      CODE:

                      * Item 1 { text="Step 1 :+1:" icon="glyphicon-education" }
+* Item 2 { text="Step 2" }
   * Item 2.1 { icon="fas-file-code" }
   * Item 2.2
-* Item 3 { icon="fas-code-branch" }
+* Item 3 { text="Step 3" }
   * Item 3.1 
-* Item 4 { icon="octicon-git-pull-request" }
+* Item 4 { text="\`PR`" icon="octicon-git-pull-request" }
   * Item 4.1 { icon="mif-perm-media" }
-* Item 5 { icon="glyphicon-education" }
+* Item 5 { text="Step 5" icon="glyphicon-education" }
   * Item 5.1 { icon="notebook_with_decorative_cover" }
-

                      OUTPUT:

                      • Item 1
                      • Item 2 -
                        • Item 2.1
                        • Item 2.2
                      • Item 3 -
                        • Item 3.1
                      • Item 4 -
                        • Item 4.1
                      • Item 5 -
                        • Item 5.1

                      You can use any of the icons supported by MarkBind. If an item has a specified icon, that icon will be used for it and for subsequent items at that level.

                      -If you customize any item on a certain level, you must also customize the first item on that level. If not, the list will revert to its uncustomized form. -

                      You can adjust the icon's size by using the i-size attribute.

                      CODE:

                      * Item 1 { icon="fas-file-code" i-size="35px" }
+

                      OUTPUT:

                      • Item 1
                      • Item 2 +
                        • Item 2.1
                        • Item 2.2
                      • Item 3 +
                        • Item 3.1
                      • Item 4 +
                        • Item 4.1
                      • Item 5 +
                        • Item 5.1

                      Customization will be carried over to the other items within the same level of the list. +Example:

                      CODE:

                      * Item 1 { icon="glyphicon-education" }
+  * Item 1.1
+* Item 2
+

                      OUTPUT:

                      • Item 1 +
                        • Item 1.1
                      • Item 2

                      The customised icon appears for Item 2 but not for Item 1.1.

                      Hence, if you customize any item on a certain level, you must also customize the first item on that level. If not, the list will revert to its uncustomized form. +If you wish to remove the customization from the following levels, you can set text and/or icon to be an empty string "".

                      Example:

                      CODE:

                      * Item 1 { icon="glyphicon-education" text="Only for this bullet" }
+* Item 2 { icon="" }
+

                      OUTPUT:

                      • Item 1
                      • Item 2

                      You can use any of the icons supported by MarkBind. If an item has a specified icon, that icon will be used for it and for subsequent items at that level.

                      Markdown can also be used in texts.

                      +You may need to add escape characters when using special characters for Markdown in text. +

                      You can adjust the icon and text's size by using the i-size and t-size attribute respectively.

                      CODE:

                      * Item 1 { icon="fas-file-code" i-size="35px" }
 * Item 2 { icon="fas-file-code" i-size="4rem" }
 * Item 3 { icon="fas-file-code" i-size="5em" }
-

                      OUTPUT:

                      • Item 1
                      • Item 2
                      • Item 3

                      CODE:

                      * Item 1 { text="Step 1" t-size="35px" }
+* Item 2 { text="Step 2" t-size="4rem" }
+* Item 3 { text="Step 3" t-size="5em" }
+

                      OUTPUT:

                      • Item 1
                      • Item 2
                      • Item 3

                      You can utilize any CSS size unit.

                      You can also use images as icons.

                      CODE:

                      * Item 1 { icon="/images/deer.jpg" i-width="30px" }
+

                      OUTPUT:

                      • Item 1
                      • Item 2
                      • Item 3

                      You can utilize any CSS size unit.

                      You can also use images as icons.

                      CODE:

                      * Item 1 { icon="/images/deer.jpg" i-width="30px" }
 * Item 2 { i-width="60px" i-height="44px" }
 * Item 3 { i-width="90px" i-height="61px" }
-

                      OUTPUT:

                      • Icon​​
                        Item 1
                      • Icon​​
                        Item 2
                      • Icon​​
                        Item 3

                      If either the i-width or the i-height of an image is not specified, the unspecified dimension will adjust to maintain the image's original aspect ratio. For example, for an image of size 800x600 (4:3), if i-width is set to 400px, its height will be 300px.

                      The icon's appearance can be further customized by adding a i-class attribute.

                      CODE:

                      * Item 1 { icon="/images/deer.jpg" i-width="60px" height="17px" i-class="rounded" }
-* Item 2
+

                      OUTPUT:

                      • Icon​​
                        Item 1
                      • Icon​​
                        Item 2
                      • Icon​​
                        Item 3

                      If either the i-width or the i-height of an image is not specified, the unspecified dimension will adjust to maintain the image's original aspect ratio. For example, for an image of size 800x600 (4:3), if i-width is set to 400px, its height will be 300px.

                      The icon and text's appearance can be further customized by adding a i-class and t-class attribute respectively.

                      CODE:

                      * Item 1 { icon="/images/deer.jpg" text="Deer" i-width="60px" height="17px" i-class="rounded" t-class="text-warning my-2" }
+* Item 2 { t-class="text-info my-2" }
   * Item 2.1 { icon="fas-question-circle" i-class="badge rounded-pill my-1 bg-success text-white" }
   * Item 2.2
   * Item 2.3 { i-class="badge rounded-pill my-1 bg-primary text-white"}
-* Item 3
+* Item 3 { t-class="text-primary my-2" }
   * Item 3.1 
   * Item 3.2  { icon="fas-question-circle" i-class="badge rounded my-1 bg-danger text-white" }
   * Item 3.3
-

                      OUTPUT:

                      • Icon​​
                        Item 1
                      • Icon​​
                        Item 2 +
                        • Item 2.1
                        • Item 2.2
                        • Item 2.3
                      • Icon​​
                        Item 3 +
                        • Item 3.1
                        • Item 3.2
                        • Item 3.3

                      The spacing between the icon and the content can be customized by using a i-spacing attribute.

                      CODE:

                      * Item 1 { icon="+1" }
+* Item 2 { i-spacing="1rem" }
+* Item 3 { i-spacing="2rem" }
+

                      OUTPUT:

                      • Item 1
                      • Item 2
                      • Item 3

                      Similar to the icon and text attribute, other icon attributes such as i-class, i-width, i-height, i-spacing, t-size and t-class apply for subsequent list items at the same level, until they are overridden by the same attribute. For example, Item 2.3's i-class overrides Item 2.1's and applies up to Item 3.1.

                      The spacing between the icon and the content can be customized by using a i-spacing attribute.

                      CODE:

                      * Item 1 { icon="+1" text="Yay" }
+* Item 2 { i-spacing="1rem" }
+* Item 3 { i-spacing="2rem" }
+

                      OUTPUT:

                      • Icon​​
                        Item 1
                      • Icon​​
                        Item 2 -
                        • Item 2.1
                        • Item 2.2
                        • Item 2.3
                      • Icon​​
                        Item 3 -
                        • Item 3.1
                        • Item 3.2
                        • Item 3.3

                      Similar to the icon attribute, other icon attributes such as i-class, i-width, i-height apply for subsequent list items at the same level, until they are overridden by the same attribute. For example, Item 2.3's i-class overrides Item 2.1's and applies up to Item 3.1.

                      You can apply Markdown's heading and paragraph syntax within the list.

                      CODE:

                      * #### Heading 1: Overview {icon="/images/overview-d.png" i-width="65px" i-class="rounded" }
+

                      OUTPUT:

                      • Item 1
                      • Item 2
                      • Item 3

                      You can apply Markdown's heading and paragraph syntax within the list.

                      CODE:

                      * #### Heading 1: Overview {icon="/images/overview-d.png" i-width="65px" i-class="rounded" }
    Content 1: This section provides a summary of the document or topic. 
    It sets the context and purpose of the content to follow.
 * #### Heading 2: Detailed Description { icon="/images/detailed-d.png" i-width="65px" i-class="rounded" }
    Content 2: This section delves deeper into the topic, offering comprehensive information and detailed explanations.
    It might also include evidence, examples, or justifications.
-

                      OUTPUT:

                      • Icon​​

                        Heading 1: Overview

                        +

                      OUTPUT:

                      • Icon​​

                        Heading 1: Overview

                        Content 1: This section provides a summary of the document or topic. -It sets the context and purpose of the content to follow.
                      • Icon​​

                        Heading 2: Detailed Description

                        +It sets the context and purpose of the content to follow.
                      • Icon​​

                        Heading 2: Detailed Description

                        Content 2: This section delves deeper into the topic, offering comprehensive information and detailed explanations. It might also include evidence, examples, or justifications.

                      Icon specifications should be attached only to the first element of a list item (for the example above, the icon specification should be attached to the heading, not the content below the heading).

                      Ordered lists:

                      CODE:

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

                      OUTPUT:

                      1. Item 1 -
                        1. Sub item 1.1
                        2. Sub item 1.2
                      2. Item 2
                      3. 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 !

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

                      Task lists (from GFMD):

                      CODE:

                      - [ ] Item 1
@@ -464,7 +580,7 @@
    - [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
+

                      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
+

                      OUTPUT:

                      1. Item 1
    1. Sub item 1.1
    1. Sub item 1.2
 * Item 2
@@ -508,7 +624,7 @@
 - [ ] Item 3
 - [x] Item 4
 - ( ) Item 5
-

                      OUTPUT:

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

                      OUTPUT:

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

                      OUTPUT:

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

                      OUTPUT:

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

                      OUTPUT:

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

                      OUTPUT:

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

                      OUTPUT:

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

                      OUTPUT:

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

                      OUTPUT:

                      function add(a, b) {
-    const sum = a + b;
-    console.log(`${a} + ${b} = ${sum}`);
-    return sum;
-}
-

                      OUTPUT:

                      function add(a, b) {
+    const sum = a + b;
+    console.log(`${a} + ${b} = ${sum}`);
+    return sum;
+}
+

                      OUTPUT:

                      function subtract(a, b) {
-    const diff = a - b;
-    console.log(`${a} + ${b} = ${diff}`);
-    return diff;
-}
-

                      OUTPUT:

                      function subtract(a, b) {
+    const diff = a - b;
+    console.log(`${a} + ${b} = ${diff}`);
+    return diff;
+}
+

                      OUTPUT:

                      function multiply(a, b) {
-    const product = a * b;
-    console.log('Product = ${product}');
-    return product;
-}
-

                      OUTPUT:

                      function multiply(a, b) {
+    const product = a * b;
+    console.log('Product = ${product}');
+    return product;
+}
+

                      OUTPUT:

                      // Function returns the distance travelled assuming constant speed
-function calculateDistance(speed, time) {
-    const distance = speed * time;
-    console.log(`Distance travelled = ${distance}`);
-    return distance;
-}
-

                      OUTPUT:

                      // Function returns the distance travelled assuming constant speed
+function calculateDistance(speed, time) {
+    const distance = speed * time;
+    console.log(`Distance travelled = ${distance}`);
+    return distance;
+}
+

                      OUTPUT:

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

                      OUTPUT:

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

                      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);
-    }
-}
-

                      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);
+    }
+}
+

                      OUTPUT:

                      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>
-

                      OUTPUT:

                      Bold, Italic, Bold and Italic, Strike through, Super Bold, Underline, Highlight, πŸ‘ ❗️ ❌ 🚧
                      We support page breaks
                      <foo></foo>
+

                      OUTPUT:

                      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>
+
                      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


                      Printing optimization
                      +Markbind enhances the readability of your code blocks for printing by +
                      • Applying soft wrapping, ensuring code doesn't get cut off
                      • Adding line numbers to maintain context when wrapping occurs
                      • Automatically changing dark code theme to light
                      • Removing codeBlockCopyButtons and codeBlockWrapButtons
                      + There are some issues with printing in Firefox. Please use other browsers such as Chrome if these issues persist. +

                      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).

                      Displaying content within curly braces: {{ content }}

                      If your code contains special Nunjucks tags like {{ or }}, use a raw-endraw block:

                      {% raw %} {{ content }} {% endraw %}
-

                      OUTPUT:

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

                      Displaying content within curly braces: {{ content }}

                      If your code contains special Nunjucks tags like {{ or }}, use a raw-endraw block:

                      {% raw %} {{ content }} {% endraw %}
+
                      `<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}
+

                      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}
+

                      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}
+

                      OUTPUT:

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

                      • border-info
                      • border-primary
                      • etc

                      CODE:

                      --- {.border-primary}
 
 --- {.border-secondary}
 
@@ -1302,7 +1422,7 @@
 --- {.border-info}
 
 --- {.border-success}
-

                      OUTPUT:

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

                      CODE:

                      --- {.dashed .thick-3}
+

                      OUTPUT:

                      Add a combination 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:

                      *****
+

                      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].
+

                      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

                      A or an email address in plain text will be auto converted into clickable links.

                      CODE:

                      **These will be converted:**
+

                      OUTPUT:

                      MarkBind home is at here.

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

                      A or an email address in plain text will be auto converted into clickable links.

                      CODE:

                      **These will be converted:**
 
 https://www.google.com
 
@@ -1415,7 +1535,7 @@
 `https://markbind.org`
 
 https://<span></span>markbind.org
-

                      OUTPUT:

                      These will be converted:

                      https://www.google.com

                      https://markbind.org

                      foobar@gmail.com

                      These will not be converted:

                      google.com

                      markbind.org

                      foo@bar

                      Tricks to prevent autolink:

                      https://markbind.org

                      https://markbind.org

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

                      Relative links to resources (e.g. images, hrefs) should be valid relative to the file where the link is defined.

                      In the example above, image.png is in the same directory as subsite.md. Thus, the correct path is image.png and not textbook/image.png.

                      Link validation

                      Links will be validated when generating a site and a warning will be displayed in the console for every link that is invalid.

                      Disabling link validation

                      Link validation is enabled by default.

                      If you wish to only disable validation for a specific link, you may use the no-validation attribute.

                      Example Click [here](index.md){no-validation}

                      However, if you wish to disable this feature entirely, you may simply modify your site.json like this .

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

                      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:**
+

                      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.
@@ -1540,7 +1660,7 @@
 [^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)
-

                      1 + 1 = 2 [1]

                      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")
-

                      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")
+

                      alt text here

                      Adjusting image dimension

                      MarkBind also supports the =Wx shorthand for specifying image width:

                      CODE:

                      This image has a width of 100px: ![](https://markbind.org/images/logo-lightbackground.png =100x)
-

                      OUTPUT:

                      This image has a width of 100px:

                      +

                      OUTPUT:

                      This image has a width of 100px:

                      The width of images cannot exceed that of their parent container. If the specified width is too large, it will be ignored.

                      MarkBind does not support setting the height of images through the =WxH or =xH syntax. This is because images are automatically resized to ensure responsiveness based on their width.

                      Auto-linkify

                      MarkBind automatically wraps images with link to the image URL such that one can click on the image to view the full image.

                      CODE:

                      Click on the image to open the image: ![logo](https://markbind.org/images/logo-lightbackground.png =150x)
-

                      OUTPUT:

                      Click on the image to open the image: logo

                      If the image is wrapped with a link, the link will be used instead.

                      CODE:

                      Clicking on this image will bring you to the MarkBind homepage (instead of opening the image):
+

                      OUTPUT:

                      Click on the image to open the image: logo

                      If the image is wrapped with a link, the link will be used instead.

                      CODE:

                      Clicking on this image will bring you to the MarkBind homepage (instead of opening the image):
 [![logo](https://markbind.org/images/logo-lightbackground.png =150x)](https://markbind.org)
-

                      OUTPUT:

                      Clicking on this image will bring you to the MarkBind homepage (instead of opening the image): -logo

                      Classes, Attributes & Identifiers

                      Most markdown syntax above this section supports adding classes, attributes and identifiers +

                      OUTPUT:

                      Clicking on this image will bring you to the MarkBind homepage (instead of opening the image): +logo

                      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}
@@ -1660,7 +1778,7 @@
 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}
+

                      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

                      +

                      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
-

                      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
+

                      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: :) :/ :D
-

                      OUTPUT:

                      πŸ‘ ❗️ ❌ 🚧 πŸ˜ƒ πŸ˜• πŸ˜„

                      The list of supported emoji and emoticon shortcuts.

                      :+1: :exclamation: :x: :construction: :) :/ :D
-

                      OUTPUT:

                      πŸ‘ ❗️ ❌ 🚧 πŸ˜ƒ πŸ˜• πŸ˜„

                      The list of supported emoji and emoticon shortcuts.

                      :+1: :exclamation: :x: :construction: :) :/ :D
+

                      πŸ‘ ❗️ ❌ 🚧 πŸ˜ƒ πŸ˜• πŸ˜„

                      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 its cover! πŸ‘Ž
                      • font icons: Don't judge the by its cover!
                      Using Font Awesome Icons

                      MarkBind currently supports Version 6 of Font Awesome (Free plan). For detailed changes between versions, refer to Font Awesome's documentation.

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

                      πŸ‘ ❗️ ❌ 🚧 πŸ˜ƒ πŸ˜• πŸ˜„

                      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 its cover! πŸ‘Ž
                      • font icons: Don't judge the by its cover!
                      Using Font Awesome Icons

                      MarkBind currently supports Version 6 of Font Awesome (Free plan). For detailed changes between versions, refer to Font Awesome's documentation.

                      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 two different styles for their icons, each with their own type prefix. Here is an example from each type:

                        • Solid (prefix: fa-solid-) e.g., (actual name file-code, MarkBind name fa-solid-file-code)
                        • Brands (prefix: fa-brands-): e.g., (actual name github-alt, MarkBind name fa-brands-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: :fa-brands-github: :fa-solid-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:

                      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)
+

                      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)

                      Nunjucks variables

                      Dates can be supplied using Nunjucks variables for convenience.

                      Inside the .md file of a page:

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

                      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)

                      Nunjucks variables

                      Dates can be supplied using Nunjucks variables for convenience.

                      Inside the .md file of a 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 and here.

                      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.

                      Two types of delimiters are supported and can be used interchangeably:

                      • 'dollars'
                        • Insert inline equations by enclosing them in $...$ or $$...$$
                        • Insert display equations by enclosing them in $$...$$
                        • Insert display + equation number: $$...$$ (1)
                      • 'brackets'
                        • Insert inline equations by enclosing them in \(...\)
                        • Insert display equations by enclosing them in \[...\]
                        • Insert display + equation number: \[...\] (1)

                      CODE:

                      Solve the following simultaneous equations:
+

                      {{ 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 and here.

                      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

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

                      Math Formulae

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

                      Two types of delimiters are supported and can be used interchangeably:

                      • 'dollars'
                        • Insert inline equations by enclosing them in $...$ or $$...$$
                        • Insert display equations by enclosing them in $$...$$
                        • Insert display + equation number: $$...$$ (1)
                      • 'brackets'
                        • Insert inline equations by enclosing them in \(...\)
                        • Insert display equations by enclosing them in \[...\]
                        • Insert display + equation number: \[...\] (1)

                      CODE:

                      Solve the following simultaneous equations:
 
 \[ 3x + y = 11 \] (1)
 
@@ -1893,7 +2011,7 @@
 $$\frac{10x}{3} + \frac{5y}{3} = 8$$ (4)
 
 Finally, the Pythagoras theorem: $c^2 = a^2 + b^2$.
-

                      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=0e^{i\pi}+1=0 is a beautiful equation.

                      4x+5y=16 4x + 5y = 16 (3)
                      10x3+5y3=8\frac{10x}{3} + \frac{5y}{3} = 8(4)

                      Finally, the Pythagoras theorem: c2=a2+b2c^2 = a^2 + b^2.

                      Additional delimiters are possible by enabling the mathDelimiters plugin.

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

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

                      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=0e^{i\pi}+1=0 is a beautiful equation.

                      4x+5y=16 4x + 5y = 16 (3)
                      10x3+5y3=8\frac{10x}{3} + \frac{5y}{3} = 8(4)

                      Finally, the Pythagoras theorem: c2=a2+b2c^2 = a^2 + b^2.

                      Additional delimiters are possible by enabling the mathDelimiters plugin.

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

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

                      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


                      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. Inline notes are easier to write, since +

                      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


                      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. Inline notes are easier to write, since you don't have to pick an identifier and move down to type the -note.

                      +note.

                    • Math

                      • - - - - - - - - -

                      Full Syntax Reference

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

                      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. Inline 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 deleted file mode 100644 index f94533c..0000000 --- a/userGuide/fullSyntaxReference.page-vue-render.js +++ /dev/null @@ -1,22 +0,0 @@ - - var pageVueRenderFn = function anonymous( -) { -with(this){return _c('div',{attrs:{"id":"app"}},[_c('header',{attrs:{"sticky":""}},[_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 environment--combined"}},[_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',{attrs:{"id":"site-nav","tag-name":"nav","to":"site-nav"}},[_c('div',{staticClass:"site-nav-top"},[_c('div',{staticClass:"fw-bold mb-2",staticStyle:{"font-size":"1.25rem"}},[_v("\n User Guide\n ")])]),_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"}},[_v("Getting Started")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_v("Authoring Contents \n\n"),_c('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.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('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.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)"}},[_v("Working with Sites \n\n"),_c('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.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-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/redirectingToACustom404Page.html"}},[_v("Redirecting to a Custom 404 Page")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingNavigationButtons.html"}},[_v("Adding Navigation Buttons")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/templates.html"}},[_v("Templates")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_v("References \n\n"),_c('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.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/gitignoreFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".gitignore")]),_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/troubleshooting.html"}},[_v("Troubleshooting")])])]),_v(" "),_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',{attrs:{"id":"content-wrapper"}},[_c('breadcrumb'),_v(" "),_c('div',[_c('modal',{attrs:{"id":"on-slots","large":""},scopedSlots:_u([{key:"header",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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])]),_v(" "),_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("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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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(0),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"annotations"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"annotations"}},[_c('strong',[_v("Annotations")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#annotations","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"annotations-2"}},[_v("Annotations"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#annotations-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("An "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("annotate")]),_v(" component allows you to easily annotate over any images.")])]),_v(" "),_c('p',[_v("Annotate wrappers ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(") are used in conjunction with Annotate\nPoints ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(").")]),_v(" "),_c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(": Annotate wrappers are used to hold the image and set its width and height.")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(": Annotate points define the position, text and style of each point within the image. Insert them between the Annotate wrappers.")])]),_v(" "),_c('p',[_v("The x and y coordinates of each Annotate Point are relative to the image and are written in percentage of total width or height.")]),_v(" "),_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("annotate")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../../images/annotateSampleImage.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"500\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sample Image\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This point is 25% from the left and 25% from the top\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This point is 50% from the left and 25% from the top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"60\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"75%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This point is 75% from the left and 25% from the top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This has a header\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This point is 25% from the left and 50% from the top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"red\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This point is 50% from the left and 50% from the top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("opacity")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"0.7\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"75%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This point is 25% from the left and 75% from the top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("label")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"1\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"75%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This point is 50% from the left and 75% from the top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("textColor")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"white\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"black\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("label")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"2\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("opacity")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"1\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"75%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"75%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This point is 75% from the left and 75% from the top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fontSize")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"30\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("label")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"3\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"75%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This point is 75% from the left and 50% from the 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("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge bg-primary\"")]),_v(">")]),_v("Badge label"),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('annotate',{attrs:{"src":"../../images/annotateSampleImage.png","width":"500","alt":"Sample Image"}},[_c('a-point',{attrs:{"x":"25%","y":"25%"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("This point is 25% from the left and 25% from the top")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"25%","size":"60"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("This point is 50% from the left and 25% from the top")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"25%"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This has a header")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("This point is 75% from the left and 25% from the top")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"25%","y":"50%","color":"red"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("This point is 25% from the left and 50% from the top")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"50%","opacity":"0.7"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("This point is 50% from the left and 50% from the top")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"25%","y":"75%"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("1")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("This point is 25% from the left and 75% from the top")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"75%","textColor":"white","color":"black","opacity":"1"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("2")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("This point is 50% from the left and 75% from the top")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"75%","fontSize":"30"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("3")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("This point is 75% from the left and 75% from the top")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"50%"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("This point is 75% from the left and 50% from the top")])]},proxy:true}])},[_v(" "),_c('span',{staticClass:"badge bg-primary"},[_v("Badge label")])])],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Use markdown in the header, label and content")])]),_v(" "),_c('p',[_v("Annotate Points supports markdown in the header, label and content.")]),_v(" "),_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("annotate")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../../images/annotateSampleImage.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"500\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sample Image\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"# Content\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":blush:\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"75%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("label")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":heart:\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('annotate',{attrs:{"src":"../../images/annotateSampleImage.png","width":"500","alt":"Sample Image"}},[_c('a-point',{attrs:{"x":"25%","y":"25%"},scopedSlots:_u([{key:"content",fn:function(){return [_c('h1',{attrs:{"id":"content"}},[_v("Content"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#content","onclick":"event.stopPropagation()"}})])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"25%"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("😊")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"25%"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("❀️")])]},proxy:true}])})],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Customising shapes for Annotate Point")]),_v(" "),_c('br')]),_v(" "),_c('p',[_v("Annotate Points supports different shapes and customisation.")]),_v(" "),_c('p',[_v("The default shape used is a rounded button.")]),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_v("\nWhen using a customised shape, the options shape, color and opacity will not work. \n"),_c('p',[_v("Style the shape to achieve the same effect.")])]),_v(" "),_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(" \n")]),_c('span',[_v(" Badge label\n")]),_c('span',[_v(" \n")]),_c('span',[_v(" \n")]),_c('span',[_v(" \n")]),_c('span',[_v(" \n")]),_c('span',[_v(" \n")]),_c('span',[_v(" \n")]),_c('span',[_v("
                      Custom
                      \n")]),_c('span',[_v("                       \n")]),_c('span',[_v("                      \n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('annotate',{attrs:{"src":"../../images/annotateSampleImage.png","width":"500","alt":"Sample Image"}},[_c('a-point',{attrs:{"x":"75%","y":"50%"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("This point is 75% from the left and 50% from the top")])]},proxy:true}])},[_v(" "),_c('span',{staticClass:"badge bg-primary"},[_v("Badge label")])]),_v(" "),_c('a-point',{attrs:{"x":"25%","y":"50%"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("This point is 25% from the left and 50% from the top")])]},proxy:true}])},[_v(" "),_c('pic',{attrs:{"src":"/images/deer.jpg","width":"50","height":"50"}})],1),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"50%"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("This point is 25% from the left and 50% from the top")])]},proxy:true}])},[_v(" "),_c('div',{staticStyle:{"opacity":"90%","color":"red"}},[_v("Custom")])])],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Using triggers and positions for Annotate Point")]),_v(" "),_c('br')]),_v(" "),_c('p',[_v("Similar to "),_c('strong',[_c('a',{attrs:{"href":"/userGuide/components/popups.html#popovers"}},[_v("popovers")])]),_v(", Annotate Points also support different types of triggers and positions\nfor users with different needs.")]),_v(" "),_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("annotate")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../../images/annotateSampleImage.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"500\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sample Image\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"33%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"33%\"")]),_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(" />")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"66%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"33%\"")]),_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("trigger")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hover focus\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"66%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Popover on the left\"")]),_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("a-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"66%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Popover on the bottom\"")]),_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("a-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"75%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"66%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Popover on the right\"")]),_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-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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"66%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Popover on the bottom\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"bottom\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trigger")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hover focus\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('annotate',{attrs:{"src":"../../images/annotateSampleImage.png","width":"500","alt":"Sample Image"}},[_c('a-point',{attrs:{"x":"33%","y":"33%"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("Lorem ipsum dolor sit amet")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"66%","y":"33%","trigger":"hover focus"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("Lorem ipsum dolor sit amet")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"25%","y":"66%","placement":"left"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("Popover on the left")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"66%","placement":"bottom"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("Popover on the bottom")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"66%","placement":"right"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("Popover on the right")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"66%","placement":"bottom","trigger":"hover focus"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("Popover on the bottom")])]},proxy:true}])})],1)],1)],1)]),_v(" "),_c('br'),_v(" "),_c('p',[_c('strong',[_v("Displaying content as legends in Annotate Point")])]),_v(" "),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" allows users to display its content "),_c('span',{staticClass:"underline"},[_v("inside a popover")]),_v(" or "),_c('span',{staticClass:"underline"},[_v("as a legend below the diagram")]),_v(" or "),_c('span',{staticClass:"underline"},[_v("both")]),_v(". However, the label attribute must be specified in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" in order to display the content 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":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("annotate")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../../images/annotateSampleImage.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"500\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sample Image\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"There is only text when you click me\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("label")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"1\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Clicking on this does nothing\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("label")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"2\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("legend")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"bottom\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Headers are displayed as well\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"75%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"There is text at both locations\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("label")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"3\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("legend")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"both\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Headers are displayed at both positions\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('annotate',{attrs:{"src":"../../images/annotateSampleImage.png","width":"500","alt":"Sample Image"}},[_c('a-point',{attrs:{"x":"25%","y":"50%"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("1")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("There is only text when you click me")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"50%","legend":"bottom"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("2")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Headers are displayed as well")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("Clicking on this does nothing")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"50%","legend":"both"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("3")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Headers are displayed at both positions")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("There is text at both locations")])]},proxy:true}])})],1)],1)],1)]),_v(" "),_c('br'),_v(" "),_c('p',[_c('strong',[_v("Sample use cases for Annotate")]),_v(" "),_c('br')]),_v(" "),_c('p',[_v("Here we showcase some use cases of the Annotate feature.")]),_v(" "),_c('p',[_c('strong',[_v("Example 1: Describing elements in an image")]),_v(" "),_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":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("annotate")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../../images/annotateSampleObject.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("height")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"500\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sample Image\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"6%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"You can use a triangle and a solid line (not to be confused with an arrow) to indicate class inheritance.\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("label")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"1\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Class inheritance\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("legend")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"both\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25.5%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"UML uses a solid diamond symbol to denote composition.\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("label")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"2\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Composition\"")]),_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("legend")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"both\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"45%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"UML uses a hollow diamond to indicate an aggregation.\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("label")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"3\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Aggregation\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"blue\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("legend")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"both\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"64.5%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Association labels describe the meaning of the association.\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("label")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"4\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Association labels\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"yellow\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("legend")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"both\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('annotate',{attrs:{"src":"../../images/annotateSampleObject.png","height":"500","alt":"Sample Image"}},[_c('a-point',{attrs:{"x":"6%","y":"50%","legend":"both"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("1")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Class inheritance")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("You can use a triangle and a solid line (not to be confused with an arrow) to indicate class inheritance.")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"25.5%","y":"50%","color":"red","legend":"both"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("2")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Composition")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("UML uses a solid diamond symbol to denote composition.")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"45%","y":"50%","color":"blue","legend":"both"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("3")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Aggregation")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("UML uses a hollow diamond to indicate an aggregation.")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"64.5%","y":"50%","color":"yellow","legend":"both"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("4")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Association labels")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("Association labels describe the meaning of the association.")])]},proxy:true}])})],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Example 2: Drawing over elements")]),_v(" "),_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":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("annotate")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../../images/annotateSampleSequence.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("height")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"500\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sample Image\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"35%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"18.5%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Operation is invoked\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Operation\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("opacity")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"0.2\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"30\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"65%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This is the period during which the method is being executed\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Activation Bar\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("opacity")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"0.3\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"yellow\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"14%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"85%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Return control and possibly some return value\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Return Value\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("opacity")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"0.2\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"30\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"blue\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('annotate',{attrs:{"src":"../../images/annotateSampleSequence.png","height":"500","alt":"Sample Image"}},[_c('a-point',{attrs:{"x":"35%","y":"18.5%","opacity":"0.2","size":"30"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Operation")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("Operation is invoked")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"65%","y":"50%","opacity":"0.3","size":"50","color":"yellow"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Activation Bar")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("This is the period during which the method is being executed")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"14%","y":"85%","opacity":"0.2","size":"30","color":"blue"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Return Value")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("Return control and possibly some return value")])]},proxy:true}])})],1)],1)],1)]),_v(" "),_c('br'),_v(" "),_c('p',[_c('strong',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_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("x")]),_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 x-coordinate of the point."),_c('br'),_v("Supports range of values from "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0%")]),_v(" to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("100%")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("y")]),_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 y-coordinate of the point."),_c('br'),_v("Supports range of values from "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0%")]),_v(" to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("100%")]),_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("Annotate Point content."),_c('br'),_v("The annotation content will be omitted if this is not provided.")])]),_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("Annotate Point header."),_c('br'),_v("The header will be omitted if this is not provided.")])]),_v(" "),_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("click")])]),_v(" "),_c('td',[_v("Popover trigger type."),_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(", or any space-separated combination of these.")])]),_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("Position of 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(".")])]),_v(" "),_c('tr',[_c('td',[_v("label")]),_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 label shown on the point itself."),_c('br'),_v("The label will be omitted if this is not provided."),_c('br'),_v("Note that labels should not be too long as they might overflow out of the point.")])]),_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',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("'40'")])]),_v(" "),_c('td',[_v("The size of the point in pixels. "),_c('br'),_v(" Does not work with customised shapes")])]),_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("'green'")])]),_v(" "),_c('td',[_v("The color of the point."),_c('br'),_v("Supports any color in the CSS color format. E.g. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("red")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("#ffffff")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("rgb(66, 135, 245)")]),_v(", etc. "),_c('br'),_v(" Does not work with customised shapes")])]),_v(" "),_c('tr',[_c('td',[_v("opacity")]),_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("'0.3'")])]),_v(" "),_c('td',[_v("The opacity of the point."),_c('br'),_v("Supports range of values from "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0")]),_v(" to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("1")]),_v(". "),_c('br'),_v(" Does not work with customised shapes")])]),_v(" "),_c('tr',[_c('td',[_v("fontSize")]),_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("'14'")])]),_v(" "),_c('td',[_v("The font size of the label."),_c('br'),_v("Supports any pixel size smaller than size of the point.")])]),_v(" "),_c('tr',[_c('td',[_v("textColor")]),_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("'black'")])]),_v(" "),_c('td',[_v("The color of the label."),_c('br'),_v("Supports any color in the CSS color format. E.g. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("red")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("#ffffff")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("rgb(66, 135, 245)")]),_v(", etc.")])]),_v(" "),_c('tr',[_c('td',[_v("legend")]),_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("'popover'")])]),_v(" "),_c('td',[_v("The position of the Annotate Point content and header."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("popover")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bottom")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("both")]),_v(".")])])])])]),_c('p',[_c('strong',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" Options")])])]),_v(" "),_c('p',[_v("This is effectively the same as the options used for the "),_c('a',{attrs:{"href":"#pictures"}},[_v("picture")]),_v(" component.")]),_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("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("height")]),_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 height of the image in pixels.")])]),_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',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_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('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("\n")]),_c('span',[_v(" \n")]),_c('span',[_v(" \n")]),_c('span',[_v(" \n")]),_c('span',[_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('annotate',{attrs:{"src":"https://markbind.org/userGuide/diagrams/object.png","height":"500","alt":"Sample Image"}},[_c('a-point',{attrs:{"x":"6%","y":"50%"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("1")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Class inheritance")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("You can use a triangle and a solid line (not to be confused with an arrow) to indicate class inheritance.")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"25.5%","y":"50%","color":"red"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("2")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Composition")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("UML uses a solid diamond symbol to denote composition.")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"45%","y":"50%","color":"blue"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("3")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Aggregation")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("UML uses a hollow diamond to indicate an aggregation.")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"64.5%","y":"50%","color":"yellow"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("4")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Association labels")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("Association labels describe the meaning of the association.")])]},proxy:true}])})],1)],1)],1)]),_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('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"}},[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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"}},[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{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('div',{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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_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('panel',{attrs:{"type":"seamless","panelId":"badges"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{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"}},[_v("Badges"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#badges-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Example:")])]),_v(" "),_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("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge bg-primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v("Some Plain Text\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(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge bg-primary\"")]),_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("_Some Markdown_"),_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:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{staticClass:"badge bg-primary"},[_v("\nSome Plain Text\n")]),_v(" "),_c('span',{staticClass:"badge bg-primary"},[_c('span',[_c('em',[_v("Some Markdown")])])])])],1)]),_v(" "),_c('p',[_c('strong',[_v("You can choose from a variety of colors for your badges. You can also use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("rounded-pill")]),_v(" class to make the badges pill-shaped.")])]),_v(" "),_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',[_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 bg-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 bg-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 bg-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 bg-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 bg-warning text-dark\"")]),_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 bg-info text-dark\"")]),_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 bg-light text-dark\"")]),_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 bg-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 rounded-pill bg-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 rounded-pill bg-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 rounded-pill bg-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 rounded-pill bg-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 rounded-pill bg-warning text-dark\"")]),_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 rounded-pill bg-info text-dark\"")]),_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 rounded-pill bg-light text-dark\"")]),_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 rounded-pill bg-dark\"")]),_v(">")]),_v("Dark"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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 bg-primary"},[_v("Primary")]),_v(" "),_c('span',{staticClass:"badge bg-secondary"},[_v("Secondary")]),_v(" "),_c('span',{staticClass:"badge bg-success"},[_v("Success")]),_v(" "),_c('span',{staticClass:"badge bg-danger"},[_v("Danger")]),_v(" "),_c('span',{staticClass:"badge bg-warning text-dark"},[_v("Warning")]),_v(" "),_c('span',{staticClass:"badge bg-info text-dark"},[_v("Info")]),_v(" "),_c('span',{staticClass:"badge bg-light text-dark"},[_v("Light")]),_v(" "),_c('span',{staticClass:"badge bg-dark"},[_v("Dark")]),_v(" "),_c('br'),_v("Pills:\n"),_c('span',{staticClass:"badge rounded-pill bg-primary"},[_v("Primary")]),_v(" "),_c('span',{staticClass:"badge rounded-pill bg-secondary"},[_v("Secondary")]),_v(" "),_c('span',{staticClass:"badge rounded-pill bg-success"},[_v("Success")]),_v(" "),_c('span',{staticClass:"badge rounded-pill bg-danger"},[_v("Danger")]),_v(" "),_c('span',{staticClass:"badge rounded-pill bg-warning text-dark"},[_v("Warning")]),_v(" "),_c('span',{staticClass:"badge rounded-pill bg-info text-dark"},[_v("Info")]),_v(" "),_c('span',{staticClass:"badge rounded-pill bg-light text-dark"},[_v("Light")]),_v(" "),_c('span',{staticClass:"badge rounded-pill bg-dark"},[_v("Dark")])])])],1)]),_v(" "),_c('p',[_c('strong',[_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":"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 bg-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 rounded-pill bg-warning text-dark\"")]),_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 bg-light text-dark\"")]),_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 bg-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 rounded-pill bg-success\"")]),_v(">")]),_v("stable"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" {.no-index}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("Links:\n"),_c('a',{staticClass:"badge bg-primary",attrs:{"href":"#"}},[_v("Primary")]),_v(" "),_c('a',{staticClass:"badge rounded-pill bg-warning text-dark",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 bg-light text-dark"},[_v("4")])])]),_v(" "),_c('p',[_v("Headings:")]),_v(" "),_c('h3',{staticClass:"no-index",attrs:{"id":"feature-x-beta"}},[_v("Feature X "),_c('span',{staticClass:"badge bg-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"}},[_v("Feature Y "),_c('span',{staticClass:"badge rounded-pill bg-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/5.1/components/badge/"}},[_v("Bootstrap documentation")]),_v(" to find more information about Badges.")])])]),_v(" "),_c('div',{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 bg-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 rounded-pill bg-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 bg-light text-dark\"")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_c('span',{staticClass:"badge bg-primary"},[_v("Primary")]),_v(" "),_c('span',{staticClass:"badge rounded-pill bg-success"},[_v("Success")]),_v(" "),_c('button',{staticClass:"btn btn-primary",attrs:{"type":"button"}},[_v("\nDifficulty Level "),_c('span',{staticClass:"badge bg-light text-dark"},[_v("4")])])]),_v(" "),_c('h5',{staticClass:"no-index",attrs:{"id":"feature-y-stable-2"}},[_v("Feature Y "),_c('span',{staticClass:"badge rounded-pill bg-warning text-dark"},[_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('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"}},[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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")])])])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"boxes"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{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"}},[_v("Boxes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#boxes-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Simple Example")])]),_v(" "),_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("box")]),_v(">")]),_v("\n")]),_c('span',[_v("plain text\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(">")]),_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("_markdown_"),_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:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("\nplain text\n")]),_v(" "),_c('box',[_c('span',[_c('em',[_v("markdown")])])])],1)],1)]),_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":"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(" 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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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"}},[_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":"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("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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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"}},[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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"}},[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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-background")]),_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("background-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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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":"breadcrumbs"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"breadcrumbs"}},[_c('strong',[_v("Breadcrumbs")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#breadcrumbs","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"breadcrumbs-2"}},[_v("Breadcrumbs"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#breadcrumbs-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Breadcrumb components provide an easy way for readers to navigate the hierarchy of the site.")]),_v(" "),_c('h4',{attrs:{"id":"usage"}},[_v("Usage"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#usage","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Simply include the breadcrumb component ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(") into the page you want and breadcrumbs for that page will be automatically generated.")]),_v(" "),_c('p',[_v("You can also insert the breadcrumb component into a layout file to generate breadcrumbs for all pages using that layout.")]),_v(" "),_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("breadcrumb")]),_v(" />")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('blockquote',[_c('breadcrumb')],1)]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_v("\n Breadcrumb components refer to the Site Navigation for the hierarchy of pages.\n"),_c('p',[_c('strong',[_v("Breadcrumbs will not appear if there is no Site Navigation present on the page!")])])]),_v(" "),_c('div',{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("breadcrumb")]),_v(" />")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('breadcrumb')],1)],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"code"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{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"}},[_v("Code"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#code-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('h4',{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 "),_c('trigger',{attrs:{"for":"modal:code-dark-example","trigger":"click"}},[_c('em',[_v("(click for an example)")])]),_v(".")],1),_v(" "),_c('modal',{attrs:{"id":"modal:code-dark-example"},scopedSlots:_u([{key:"header",fn:function(){return [_v("Dark Code Theme")]},proxy:true}])},[_v(" "),_c('p',[_c('pic',{attrs:{"src":"/images/codeDarkTheme.png","alt":"Theme example"}})],1)]),_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"}},[_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"}},[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])],1)])]),_v(" "),_c('h5',{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 "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("Line numbers were provided by default in version v3.1.1 and below. To preserve the exact line numbers behavior of sites generated in previous versions, simply set the codeLineNumbers option in site.json to true")]},proxy:true}])},[_v("hidden by default")]),_v(". To enable line numbers for the entire site by default,\nadd "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"codeLineNumbers\": true")]),_v(" to the "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#style"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")])]),_v(" file:")],1),_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-comment"}},[_v("// ...")]),_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(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"codeLineNumbers\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-literal"}},[_v("true")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// optional, false if omitted")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// code below omitted for brevity")]),_v("\n")]),_c('span',[_v("}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_c('p',[_v("For each code block, you may also use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("line-numbers")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-line-numbers")]),_v(" classes to override the site-wide setting as such:")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```xml {.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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])],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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"line-numbers 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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])],1)]),_v(" "),_c('h5',{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 examples\nbelow for a visual demonstration of all the possible ways of highlighting a code block.")]),_v(" "),_c('p',[_c('strong',[_v("Full text highlight")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```js {start-from=6 .line-numbers highlight-lines=\"7, 9\"}")]),_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(" const sum = a + b;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" console.log(`${a} + ${b} = ${sum}`);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return sum;")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"line-numbers hljs js","style":"counter-reset: line 5;"}},[_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":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("const")]),_v(" sum = a + b;")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-built_in"}},[_v("console")]),_v(".log("),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("`"),_c('span',{pre:true,attrs:{"class":"hljs-subst"}},[_v("${a}")]),_v(" + "),_c('span',{pre:true,attrs:{"class":"hljs-subst"}},[_v("${b}")]),_v(" = "),_c('span',{pre:true,attrs:{"class":"hljs-subst"}},[_v("${sum}")]),_v("`")]),_v(");\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" sum;")]),_v("\n")]),_c('span',[_v("}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])],1)]),_v(" "),_c('p',[_c('strong',[_v("Substring highlight")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```js {.line-numbers highlight-lines=\"1['function'], 2['a'], 2['b'], 4['diff']\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("function subtract(a, b) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" const diff = a - b;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" console.log(`${a} + ${b} = ${diff}`);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return diff;")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"line-numbers hljs js"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword highlighted"}},[_v("function")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("subtract")]),_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("const")]),_c('span',[_v(" diff = "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("a")]),_c('span',[_v(" - "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("b")]),_v(";\n")])])]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-built_in"}},[_v("console")]),_v(".log("),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("`"),_c('span',{pre:true,attrs:{"class":"hljs-subst"}},[_v("${a}")]),_v(" + "),_c('span',{pre:true,attrs:{"class":"hljs-subst"}},[_v("${b}")]),_v(" = "),_c('span',{pre:true,attrs:{"class":"hljs-subst"}},[_v("${diff}")]),_v("`")]),_v(");\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("diff")]),_v(";\n")])]),_c('span',[_v("}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])],1)]),_v(" "),_c('p',[_c('strong',[_v("Character-bounded highlight")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```js {.line-numbers highlight-lines=\"1[0:3], 1[6:10], 2[5:], 3[:6]\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("function multiply(a, b) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" const product = a * b;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" console.log('Product = ${product}');")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return product;")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"line-numbers hljs js"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("fun")]),_c('span',[_v("cti"),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("on")])])])]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")]),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("m")]),_v("ultiply")])]),_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("const")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" product = a * b;")]),_v("\n")])]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-built_in"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("consol")]),_v("e")])]),_v(".log("),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'Product = ${product}'")]),_v(");\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" product;\n")]),_c('span',[_v("}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])],1)]),_v(" "),_c('p',[_c('strong',[_v("Word-bounded highlight")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```js {.line-numbers highlight-lines=\"1[1::3], 1[5::7], 2[2::], 3[::3]\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("// Function returns the distance travelled assuming constant speed")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("function calculateDistance(speed, time) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" const distance = speed * time;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" console.log(`Distance travelled = ${distance}`);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return distance;")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"line-numbers hljs js"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_c('span',[_v("// "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("Function returns")]),_c('span',[_v(" the distance "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("travelled assuming")]),_v(" constant speed")])])]),_v("\n")]),_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("calculateDistance")]),_v("("),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_c('span',[_v("speed, "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("time")])])]),_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":"hljs-keyword highlighted"}},[_v("const")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" distance =")]),_v(" speed * time;\n")])]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-built_in"}},[_v("console")]),_v(".log("),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("`Distance travelled = "),_c('span',{pre:true,attrs:{"class":"hljs-subst"}},[_v("${distance}")]),_v("`")]),_v(");\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" distance;\n")]),_c('span',[_v("}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])],1)]),_v(" "),_c('p',[_c('strong',[_v("Full-line highlight")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```js {start-from=10 .line-numbers highlight-lines=\"11[:]\"}")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"line-numbers hljs js","style":"counter-reset: line 9;"}},[_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',{pre:true,attrs:{"class":"highlighted"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" a + b;\n")]),_c('span',[_v("}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])],1)]),_v(" "),_c('p',[_c('strong',[_v("Sample Combined Usage")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```java {.line-numbers highlight-lines=\"1[:],3['Inventory'],3[4::6],4['It\\'s designed'],5,6[8:15],6[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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"line-numbers 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")]),_c('span',[_v(" is a "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("class that")]),_v(" 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"),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" items;")]),_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 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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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"}},[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])])],1)]),_v(" "),_c('h5',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])])],1)]),_v(" "),_c('h5',{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"}},[_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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"}},[_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"}},[_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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"}},[_v("Inline Code"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#inline-code","onclick":"event.stopPropagation()"}})]),_v(" "),_c('h5',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("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('h5',{attrs:{"id":"displaying-content-within-curly-braces-content"}},[_v("Displaying content within curly braces: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{{ content }}")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#displaying-content-within-curly-braces-content","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("If your code contains 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 "),_c('a',{attrs:{"href":"/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 %} {{ content }} {% endraw %}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_c('div',{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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("`goo`{.xml}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('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"}},[_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"}},[_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"}},[_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"}},[_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":"nunjucks-variables"}},[_v("Nunjucks variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#nunjucks-variables","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Dates can be supplied using "),_c('a',{attrs:{"href":"/userGuide/reusingContents.html#variables"}},[_v("Nunjucks variables")]),_v(" for convenience.")]),_v(" "),_c('p',[_v("Inside the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".md")]),_v(" file of a page:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("{% set date_pagevar = \"2020-03-06\" %}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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"}},[_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('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Token")]),_v(" "),_c('th',[_v("Output")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("D")]),_v(" "),_c('td',[_v("1")])]),_v(" "),_c('tr',[_c('td',[_v("Do")]),_v(" "),_c('td',[_v("1st")])]),_v(" "),_c('tr',[_c('td',[_v("DD")]),_v(" "),_c('td',[_v("01")])]),_v(" "),_c('tr',[_c('td',[_v("M")]),_v(" "),_c('td',[_v("1")])]),_v(" "),_c('tr',[_c('td',[_v("MM")]),_v(" "),_c('td',[_v("01")])]),_v(" "),_c('tr',[_c('td',[_v("MMM")]),_v(" "),_c('td',[_v("Jan")])]),_v(" "),_c('tr',[_c('td',[_v("MMMM")]),_v(" "),_c('td',[_v("January")])]),_v(" "),_c('tr',[_c('td',[_v("YY")]),_v(" "),_c('td',[_v("19")])]),_v(" "),_c('tr',[_c('td',[_v("YYYY")]),_v(" "),_c('td',[_v("2019")])])])])])]),_v(" "),_c('p',[_v("Full formatting reference available "),_c('a',{attrs:{"href":"https://day.js.org/docs/en/parse/string-format#list-of-all-available-parsing-tokens"}},[_v("here")]),_v(" and "),_c('a',{attrs:{"href":"https://day.js.org/docs/en/plugin/advanced-format"}},[_v("here")]),_v(".")]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_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('div',{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")])],1)],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"diagrams"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{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"}},[_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',[_v("The following additional dependencies are involved when using this feature")]),_v(" "),_c('em',[_v("("),_c('strong',[_v("locally")]),_v(" and in your "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("E.g: Building & deploying the site via GitHub Actions")]},proxy:true}])},[_c('strong',[_v("CI/CD environment")])]),_v(")")],1)]),_v(" "),_c('ul',[_c('li',[_v("Java 8 or higher (required - to run the PlantUML JAR executable)")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.graphviz.org/download/"}},[_v("Graphviz")]),_v(" "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("Some versions are not recommended, as mentioned "),_c('a',{attrs:{"href":"https://plantuml.com/graphviz-dot#:~:text=Important%20note%20about%20version"}},[_v("here")])]},proxy:true}])},[_v("v2.38")]),_v(" or higher (optional - you don't need this if you are on Windows, or only need "),_c('a',{attrs:{"href":"https://plantuml.com/sequence-diagram"}},[_v("sequence diagrams")]),_v(" and "),_c('a',{attrs:{"href":"https://plantuml.com/activity-diagram-beta"}},[_v("activity (beta) diagrams")]),_v(")\n"),_c('ul',[_c('li',[_v("A warning will be displayed if you are using a non-Windows platform and don't have Graphviz installed. To disable this warning, you may modify your "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" like "),_c('trigger',{attrs:{"for":"pop:prerequisite-disable","placement":"bottom","trigger":"click"}},[_v("this")]),_v(".")],1),_v(" "),_c('li',[_v("An alternative layout engine, "),_c('a',{attrs:{"href":"https://plantuml.com/smetana02"}},[_v("Smetana")]),_v(", is integrated into PlantUML and can be used to generate diagrams without a Graphviz installation. However, as the Smetana engine is a work in progress, certain layouts may not render correctly.")])])],1)]),_v(" "),_c('modal',{attrs:{"id":"pop:prerequisite-disable","backdrop":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Disabling PlantUML's prerequisite check 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("\"plantumlCheck\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-literal"}},[_v("false")]),_v(",\n")]),_c('span',[_v("...\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])]),_v(" "),_c('panel',{attrs:{"minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Example: Installing the above dependencies in GitHub Actions")])]},proxy:true}])},[_v("\nThe following steps can be "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("Before the build step")]},proxy:true}])},[_v("added")]),_v(" in your workflow file to install Graphviz and Java in Ubuntu.\n"),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("action.yml")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"action.yml","class":"hljs yaml"}},[_c('span',[_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("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Install")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Graphviz")]),_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("sudo")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("apt-get")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("install")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("graphviz")]),_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("Java")]),_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-java@v3")]),_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("java-version:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'11'")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("distribution:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'temurin'")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])]),_c('p',[_v("See "),_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html#deploying-via-github-actions"}},[_v("Deploying via Github Actions")]),_v(" for more information.")])],1)],1),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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:{"width":"300","src":"/d630202036a147797be33619bbe2f07b.png"}})],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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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(" />")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"/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 plantuml.com/guide")])]),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("More examples")])]},proxy:true}])},[_v(" "),_c('div',{attrs:{"id":"puml-examples"}},[_c('p',[_c('strong',[_v("Sequence Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/sequence.png"}}),_v(" "),_c('p',[_c('strong',[_v("Use Case Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/usecase.png"}}),_v(" "),_c('p',[_c('strong',[_v("Class Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/class.png"}}),_v(" "),_c('p',[_c('strong',[_v("Activity Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/activity.png"}}),_v(" "),_c('p',[_c('strong',[_v("Component Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/component.png"}}),_v(" "),_c('p',[_c('strong',[_v("State Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/state.png"}}),_v(" "),_c('p',[_c('strong',[_v("Object Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/object.png"}}),_v(" "),_c('p',[_c('strong',[_v("Gantt Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/gantt.png"}}),_v(" "),_c('p',[_c('strong',[_v("Entity Relation Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/entityrelation.png"}}),_v(" "),_c('p',[_c('strong',[_v("Ditaa Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/ditaa.png"}}),_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."),_c('br'),_v("Avoid using the same name for different diagrams to prevent overwriting.")])]),_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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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"}}),_v(" "),_c('p',[_c('strong',[_v("Use Case Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/usecase.png"}}),_v(" "),_c('p',[_c('strong',[_v("Class Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/class.png"}}),_v(" "),_c('p',[_c('strong',[_v("Activity Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/activity.png"}}),_v(" "),_c('p',[_c('strong',[_v("Component Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/component.png"}}),_v(" "),_c('p',[_c('strong',[_v("State Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/state.png"}}),_v(" "),_c('p',[_c('strong',[_v("Object Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/object.png"}}),_v(" "),_c('p',[_c('strong',[_v("Gantt Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/gantt.png"}}),_v(" "),_c('p',[_c('strong',[_v("Entity Relation Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/entityrelation.png"}}),_v(" "),_c('p',[_c('strong',[_v("Ditaa Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/ditaa.png"}}),_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('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"}},[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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/5.1/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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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('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"}},[_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"}},[_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":"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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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",staticStyle:{"position":"relative","padding-bottom":"60.9375%"}},[_c('iframe',{attrs:{"type":"text/html","src":"//www.youtube.com/embed/v40b3ExbM0c","frameborder":"0","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"}},[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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-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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("Embedded YouTube video:")]),_v(" "),_c('div',{staticClass:"block-embed block-embed-service-youtube",staticStyle:{"position":"relative","padding-bottom":"60.9375%"}},[_c('iframe',{attrs:{"type":"text/html","src":"//www.youtube.com/embed/v40b3ExbM0c","frameborder":"0","webkitallowfullscreen":"","mozallowfullscreen":"","allowfullscreen":""}})]),_v(" "),_c('p',[_v("Embedded slide deck:")]),_v(" "),_c('div',{staticClass:"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('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"}},[_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":"hljs markdown"}},[_c('span',[_v(":+1: :exclamation: :x: :construction: :) :/ :D\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("πŸ‘ ❗️ ❌ 🚧 πŸ˜ƒ πŸ˜• πŸ˜„")])])],1)])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" The list of supported "),_c('a',{attrs:{"href":"https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md"}},[_v("emoji")]),_v(" and "),_c('a',{attrs:{"href":"https://github.com/markdown-it/markdown-it-emoji/blob/master/lib/data/shortcuts.mjs"}},[_v("emoticon shortcuts")]),_v(".")])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v(":+1: :exclamation: :x: :construction: :) :/ :D\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("πŸ‘ ❗️ ❌ 🚧 πŸ˜ƒ πŸ˜• πŸ˜„")])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"footnotes"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{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"}},[_v("Footnotes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#footnotes-2","onclick":"event.stopPropagation()"}})]),_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":"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.^[Inline 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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("Normal footnotes:")]),_v("\nHere is a footnote reference,"),_c('trigger',{attrs:{"for":"pop:footnotefn-65-1"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-65-1"}},[_v("[1]")])])]),_v(" and another."),_c('trigger',{attrs:{"for":"pop:footnotefn-65-2"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-65-2"}},[_v("[2]")])])])],1),_v(" "),_c('p',[_c('strong',[_v("Inline footnotes:")]),_v("\nHere is an inline note."),_c('trigger',{attrs:{"for":"pop:footnotefn-65-3"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-65-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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_v("\n1 + 1 = 2 ^[Math]\n")])],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"frontmatter"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"frontmatter"}},[_c('strong',[_v("Frontmatter")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#frontmatter","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"frontmatter-2"}},[_v("Frontmatter"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#frontmatter-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("You can use a "),_c('em',[_v("frontmatter")]),_v(" section to specify page properties such as the title and keywords of the page.")]),_v("\nTo specify frontmatter 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."),_c('br'),_v("\nYou can use YAML-style frontmatter syntax "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("---")]),_v(" as well.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('table',{staticStyle:{"width":"100%"}},[_c('tbody',[_c('tr',[_c('th',{staticStyle:{"width":"45%","padding-right":"5%"}},[_v("Frontmatter")]),_v(" "),_c('th',{staticStyle:{"width":"45%","padding-left":"5%"}},[_v("YAML-style Frontmatter Syntax")])]),_v(" "),_c('tr',[_c('td',{staticStyle:{"padding-right":"5%"}},[_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:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('td',{staticStyle:{"padding-left":"5%"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("---\n")]),_c('span',[_v(" property1: value1\n")]),_c('span',[_v(" property2: value2\n")]),_c('span',[_v("---\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])])])])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-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(".")]),_v(" "),_c('div',[_c('table',{staticStyle:{"width":"100%"}},[_c('tbody',[_c('tr',[_c('th',{staticStyle:{"width":"45%","padding-right":"5%"}},[_v("Frontmatter")]),_v(" "),_c('th',{staticStyle:{"width":"45%","padding-left":"5%"}},[_v("YAML-style Frontmatter Syntax")])]),_v(" "),_c('tr',[_c('td',{staticStyle:{"padding-right":"5%"}},[_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('td',{staticStyle:{"padding-left":"5%"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("---\n")]),_c('span',[_v(" title: Binary Search Tree\n")]),_c('span',[_v("---\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('box',{attrs:{"type":"warning","seamless":""}},[_c('p',[_v("If a page has multiple frontmatters, it will take the last frontmatter by default. You may make use of "),_c('a',{attrs:{"href":"/userGuide/reusingContents.html#includes"}},[_v("omitFrontmatter")]),_v(", which is an attribute of MarkBind's feature to omit the frontmatters that are not needed.")])]),_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',[_c('a',{attrs:{"href":"#pages"}},[_v("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 frontmatter of the page. For example, if we declare a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("title")]),_v(" within the frontmatter of the page (say "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("index.md")]),_v(") like such:")]),_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',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_c('p',[_v("But the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("title")]),_v(" property in the corresponding "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" is set as such:")]),_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("\"Landing Page\"")]),_v(",\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v("}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_c('p',[_v("Then, the title of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("index.md")]),_v(" will be set as \"Landing Page\" instead of \"Hello World\".")]),_v(" "),_c('p',[_v("In this manner, setting the property "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("title")]),_v(" in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" will always override the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("title")]),_v(" declared within the frontmatter of the page.")])])],1),_v(" "),_c('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"headings"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{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"}},[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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"}},[_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"}},[_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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('h3',{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"}},[_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('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"}},[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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"}},[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{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 combination 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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{staticClass:"dashed thick-3"}),_v(" "),_c('hr',{staticClass:"double border-secondary"}),_v(" "),_c('hr',{staticClass:"dotted thick-1 border-primary"})])],1)]),_v(" "),_c('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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('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"}},[_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 its cover! πŸ‘Ž")])]),_v(" "),_c('li',[_v("font icons: "),_c('span',{staticStyle:{"color":"purple"}},[_v("Don't judge the "),_c('span',{staticClass:"fa-solid fa-book",attrs:{"aria-hidden":"true"}}),_v(" by its cover! "),_c('span',{staticClass:"fas fa-thumbs-down",attrs:{"aria-hidden":"true"}})])])])])],1),_v(" "),_c('h6',{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('box',{attrs:{"type":"info","seamless":""}},[_c('p',[_v("MarkBind currently supports Version 6 of Font Awesome (Free plan). For detailed changes between versions, refer to "),_c('a',{attrs:{"href":"https://fontawesome.com/docs/web/setup/upgrade/whats-changed"}},[_v("Font Awesome's documentation")]),_v(".")])]),_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 two 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("fa-solid-")]),_v(") e.g., "),_c('span',{staticClass:"fa-solid 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("fa-solid-file-code")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Brands")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fa-brands-")]),_v("): e.g., "),_c('span',{staticClass:"fa-brands 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("fa-brands-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"}},[_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('div',{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("fa-brands-github:")]),_v(" "),_c('code',{pre:true},[_v(":"),_c('span'),_v("fa-solid-home:")])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fa-brands fa-github",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fa-solid 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:"fa-brands fa-github",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fa-solid 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:"fa-brands fa-github",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fa-solid fa-home",attrs:{"aria-hidden":"true"}})])])]),_v(" "),_c('h6',{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"}},[_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('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"}},[_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":"hljs markdown"}},[_c('span',[_v("![](https://markbind.org/images/logo-lightbackground.png)\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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":"alt text here","title":"title here"}})])])]),_v(" "),_c('p',[_c('strong',[_v("Adjusting image dimension")])]),_v(" "),_c('p',[_v("MarkBind also supports the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("=Wx")]),_v(" shorthand for specifying image width:")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("This image has a width of 100px: ![](https://markbind.org/images/logo-lightbackground.png =100x)\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("This image has a width of 100px: "),_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":"","width":"100"}})])])])],1)]),_v(" "),_c('box',{attrs:{"type":"info"}},[_v("\n The width of images cannot exceed that of their parent container. If the specified width is too large, it will be ignored.\n")]),_v(" "),_c('p',[_v("MarkBind does not support setting the height of images through the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("=WxH")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("=xH")]),_v(" syntax. This is because images are automatically resized to ensure responsiveness based on their width.")]),_v(" "),_c('p',[_c('strong',[_v("Auto-linkify")])]),_v(" "),_c('p',[_v("MarkBind automatically wraps images with link to the image URL such that one can click on the image to view the full 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":"hljs markdown"}},[_c('span',[_v("Click on the image to open the image: !["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("logo")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org/images/logo-lightbackground.png =150x")]),_v(")\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("Click on the image to open the image: "),_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":"logo","width":"150"}})])])])],1)]),_v(" "),_c('p',[_v("If the image is wrapped with a link, the link will be used instead.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("Clicking on this image will bring you to the MarkBind homepage (instead of opening the image):\n")]),_c('span',[_v("["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("![logo")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org/images/logo-lightbackground.png =150x")]),_v(")]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org")]),_v(")\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("Clicking on this image will bring you to the MarkBind homepage (instead of opening the image):\n"),_c('a',{attrs:{"href":"https://markbind.org"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","alt":"logo","width":"150"}})])])])],1)])],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"includes"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{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"}},[_v("Includes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#includes-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{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.")])]),_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-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.")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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(" tag with the matching "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(".")]),_v(" "),_c('box',{attrs:{"type":"important","seamless":""}},[_c('p',[_v("Choose "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<div>")]),_v(" over "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<span>")]),_v(" when wrapping block-level elements, to prevent invalid HTML markup which causes "),_c('a',{attrs:{"href":"https://vuejs.org/guide/scaling-up/ssr.html#hydration-mismatch"}},[_v("hydration issues")]),_v(".")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Including a fragment from a file:")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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('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("frontmatter")]),_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('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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("omitFrontmatter")])]),_v(" (optional): omit the frontmatter of the file/fragment from being included (if any)."),_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("omitFrontmatter")]),_v(" />")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])]),_v(" "),_c('h5',{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('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("i.e., the file containing the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")])]},proxy:true}])},[_v("host file")]),_v(" is included from another file.")],1)]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Suppose you have a MarkBind project with the following file structure.")]),_v(" "),_c('div',{staticClass:"tree"},[_v("C:/mySite/\nβ”œβ”€β”€ bookFiles/\nβ”‚ β”œβ”€β”€ book.md\nβ”‚ β”œβ”€β”€ chapter1.md\nβ”‚ └── chapter2.md\n└── reviewFiles/\n └── review.md\n")]),_v(" "),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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"}},[_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-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:")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-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:")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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.\nThis is to allow the outer context to adapt the reused content without changing its actual content.")]),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Preventing cyclical errors when using multiple includes with same variables")])]},proxy:true}])},[_v(" "),_c('p',[_v("Since outer variables override inner variables, this may result in errors if attempting to use an "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("include")]),_v(" within another "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("include")]),_v(" with the same variables.")]),_v(" "),_c('p',[_v("This is because the inner variable of the same name will be replaced with the outer variable, which contains the inner variable.\nThis inner variable is once again overridden to result in another inner variable and so on, causing a cyclical error.")]),_v(" "),_c('p',[_v("To fix this issue, do not use an inner "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("include")]),_v(" if they use the same variables.\nInstead, copy the content of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" file and replace the variables with the defined values.")]),_v(" "),_c('p',[_v("Example:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"line-numbers 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("\"boilerplate.md\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("boilerplate")]),_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("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_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("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"boilerplate.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("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"variable\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" VALUE_OF_VARIABLE\n")]),_c('span',[_v(" "),_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(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_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(">")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_c('p',[_v("The inner "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("variable")]),_v(" would be replaced by the outer "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("variable")]),_v(" resulting in a cyclical error:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"line-numbers 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("\"boilerplate.md\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("boilerplate")]),_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("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_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("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"boilerplate.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("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"variable\"")]),_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("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"boilerplate.md\"")]),_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("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"variable\"")]),_v(">")])]),_v("\n")]),_c('span',[_v(" "),_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-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_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("include")]),_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(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_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(">")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_c('p',[_v("To fix this problem, copy the content of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" file and replace the variables with the defined values as such:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"line-numbers 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("\"boilerplate.md\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("boilerplate")]),_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("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"variable\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("Boilerplate content: VALUE_OF_VARIABLE "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Replace {{ variable }} in boilerplate with VALUE_OF_VARIABLE -->")])]),_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(">")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('hr'),_v(" "),_c('h5',{attrs:{"id":"excluding-files-from-rendering-as-pages"}},[_v("Excluding Files from Rendering as Pages"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#excluding-files-from-rendering-as-pages","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("MarkBind supports the exclusion of files from page generation")]),_v(". For example, you can exclude files containing "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("A fragment is a piece of content that can be reused across multiple pages.")]},proxy:true}])},[_v("custom fragments")]),_v(" that are only meant to be used in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(".")],1),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Note: This example below is assuming that you have included the following glob pattern in the "),_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 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("\"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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_c('p',[_v("Else, if each page is included individually, there is no need to exclude the fragments as they will not be included in the page generation.")])]),_v(" "),_c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Suppose you have a fragment file "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("content-fragment.md")]),_v(" and you want to include it in some pages of the site "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("course")]),_v(" without rendering "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("content-fragment.md")]),_v(" as a page.")]),_v(" "),_c('div',{staticClass:"tree"},[_v("C:/course/\nβ”œβ”€β”€ content-fragment.md\nβ”œβ”€β”€ index.md\nβ”œβ”€β”€ reading.md\n└── site.json\n")]),_v(" "),_c('p',[_v("In "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("reading.md")]),_v(" (note how it reuses content from the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("content-fragment.md")]),_v("):")]),_v(" "),_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("\"content-fragment.md\"")]),_v(" />")])]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_c('p',[_v("In "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" we then exclude the fragment from the page generation with "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#pagesexclude"}},[_v("pagesExclude")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs json"}},[_c('span',[_v("...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pagesExclude\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**/*-fragment.md\"")]),_v("\n")]),_c('span',[_v("],\n")]),_c('span',[_v("...\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("\nYou may use any custom name you wish for your fragments but be sure to update the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pagesExclude")]),_v(" list with the appropriate glob pattern.")])])],1),_v(" "),_c('hr'),_v(" "),_c('h3',{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 yourself duplicating a "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("code that needs to stay relative to the directory in which it used")]},proxy:true}])},[_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.")],1),_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Suppose you have a MarkBind project with the following file structure.")]),_v(" "),_c('div',{staticClass:"tree"},[_v("C:/mySite/\nβ”œβ”€β”€ chapter1/\nβ”‚ β”œβ”€β”€ chapter.md\nβ”‚ β”œβ”€β”€ text.md\nβ”‚ └── exercises.md\nβ”œβ”€β”€ chapter2/\nβ”‚ β”œβ”€β”€ chapter.md\nβ”‚ β”œβ”€β”€ text.md\nβ”‚ └── exercises.md\n└── book.md\n")]),_v(" "),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-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(":")]),_v(" "),_c('div',{staticClass:"tree"},[_v("C:/mySite/\nβ”œβ”€β”€ _markbind/boilerplates/\nβ”‚ └── chapter.md\nβ”œβ”€β”€ chapter1/\nβ”‚ β”œβ”€β”€ text.md\nβ”‚ └── exercises.md\nβ”œβ”€β”€ chapter2/\nβ”‚ β”œβ”€β”€ text.md\nβ”‚ └── exercises.md\n└── book.md\n")]),_v(" "),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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(" even though there is no such file. MarkBind will use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter.md")]),_v(" file from "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("/_markbind/boilerplates/")]),_v(" but interpret it as if the file exists in the "),_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("chapter.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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-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:")]),_v(" "),_c('div',{staticClass:"tree"},[_v("C:/mySite/\n└── _markbind/boilerplates/\n └── book/\n └── chapter.md\n")]),_v(" "),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"keywords"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{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"}},[_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_c('p',[_c('span',{staticClass:"fas fa-arrow-down",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('box',[_c('p',[_c('span',{staticClass:"large"},[_c('strong',[_v("Developer Testing")])]),_c('br')]),_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('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"}},[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("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('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"}},[_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":"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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"autolinks"}},[_v("Autolinks"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#autolinks","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("A "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("with "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("http(s)://")]),_v(" head")]},proxy:true}])},[_v("URL")]),_v(" or an email address in plain text will be auto converted into clickable links.")],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":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**These will be converted:**")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("https://www.google.com\n")]),_c('span',[_v("\n")]),_c('span',[_v("https://markbind.org\n")]),_c('span',[_v("\n")]),_c('span',[_v("foobar@gmail.com\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**These will not be converted:**")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("google.com\n")]),_c('span',[_v("\n")]),_c('span',[_v("markbind.org\n")]),_c('span',[_v("\n")]),_c('span',[_v("foo@bar\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**Tricks to prevent autolink:**")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("`https://markbind.org`")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("https://"),_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":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(">")])]),_v("markbind.org\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("These will be converted:")])]),_v(" "),_c('p',[_c('a',{attrs:{"href":"https://www.google.com"}},[_v("https://www.google.com")])]),_v(" "),_c('p',[_c('a',{attrs:{"href":"https://markbind.org"}},[_v("https://markbind.org")])]),_v(" "),_c('p',[_c('a',{attrs:{"href":"mailto:foobar@gmail.com"}},[_v("foobar@gmail.com")])]),_v(" "),_c('p',[_c('strong',[_v("These will not be converted:")])]),_v(" "),_c('p',[_v("google.com")]),_v(" "),_c('p',[_v("markbind.org")]),_v(" "),_c('p',[_v("foo@bar")]),_v(" "),_c('p',[_c('strong',[_v("Tricks to prevent autolink:")])]),_v(" "),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("https://markbind.org")])]),_v(" "),_c('p',[_v("https://"),_c('span'),_v("markbind.org")])])],1)]),_v(" "),_c('h4',{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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-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)")])]),_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-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),_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-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(":")]),_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Assuming that we have the following folder structure:")]),_v(" "),_c('div',{staticClass:"tree"},[_v("C:\\course"),_c('br'),_v("\nβ”œβ”€β”€ textbook\\\nβ”‚ β”œβ”€β”€ subsite.md\nβ”‚ β”œβ”€β”€ image.png\nβ”‚ └── site.json\nβ”œβ”€β”€ index.md\n└── site.json\n")]),_v(" "),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-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}")])]),_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('modal',{attrs:{"id":"pop:global-intralink-disable","backdrop":""},scopedSlots:_u([{key:"header",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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])],1)],1)]),_v(" "),_c('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("MarkBind home is at "),_c('a',{attrs:{"href":"https://markbind.org"}},[_v("here")]),_v(".")])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"lists"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{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"}},[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("Customizing the Unordered list appearance:")])])]),_v(" "),_c('p',[_c('strong',[_v("To customize unordered lists' icons, add the configuration "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{icon=\"icon-name\"}")]),_v(" after a specific list item.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 1 { icon=\"glyphicon-education\" }\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 { icon=\"fas-file-code\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Item 2.2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 3 { icon=\"fas-code-branch\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Item 3.1 \n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 4 { icon=\"octicon-git-pull-request\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Item 4.1 { icon=\"mif-perm-media\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 5 { icon=\"glyphicon-education\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Item 5.1 { icon=\"notebook"),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_with_")]),_v("decorative"),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_cover\" }")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"glyphicon glyphicon-education",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"glyphicon glyphicon-education",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 2\n"),_c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 2.1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 2.2")])])])])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-code-branch",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 3\n"),_c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 3.1")])])])])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('svg',{staticClass:"octicon octicon-git-pull-request",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},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('div',[_v("Item 4\n"),_c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"material-icons align-middle",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("perm_media​")]),_c('div',[_v("Item 4.1")])])])])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"glyphicon glyphicon-education",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 5\n"),_c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("πŸ“”β€‹")]),_c('div',[_v("Item 5.1")])])])])])])])],1)]),_v(" "),_c('p',[_v("You can use any of the "),_c('a',{attrs:{"href":"/userGuide/formattingContents.html#icons"}},[_v("icons")]),_v(" supported by MarkBind. If an item has a specified icon, that icon will be used for it and for subsequent items at that level.")]),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_v("\nIf you customize any item on a certain level, you must also customize the first item on that level. If not, the list will revert to its uncustomized form.\n")]),_v(" "),_c('p',[_c('strong',[_v("You can adjust the icon's size by using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("i-size")]),_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":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 1 { icon=\"fas-file-code\" i-size=\"35px\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 2 { icon=\"fas-file-code\" i-size=\"4rem\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 3 { icon=\"fas-file-code\" i-size=\"5em\" }\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code",staticStyle:{"font-size":"35px","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code",staticStyle:{"font-size":"4rem","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 2")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code",staticStyle:{"font-size":"5em","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 3")])])])])],1)]),_v(" "),_c('p',[_v("You can utilize any "),_c('a',{attrs:{"href":"https://www.w3schools.com/cssref/css_units.php"}},[_v("CSS size unit")]),_v(".")]),_v(" "),_c('p',[_c('strong',[_v("You can also use images as 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":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 1 { icon=\"/images/deer.jpg\" i-width=\"30px\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 2 { i-width=\"60px\" i-height=\"44px\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 3 { i-width=\"90px\" i-height=\"61px\" }\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticStyle:{"width":"30px","display":"inline-block"},attrs:{"src":"/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('div',[_v("Item 1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticStyle:{"width":"60px","height":"44px","display":"inline-block"},attrs:{"src":"/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('div',[_v("Item 2")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticStyle:{"width":"90px","height":"61px","display":"inline-block"},attrs:{"src":"/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('div',[_v("Item 3")])])])])],1)]),_v(" "),_c('p',[_v("If either the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("i-width")]),_v(" or the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("i-height")]),_v(" of an image is not specified, the unspecified dimension will adjust to maintain the image's original aspect ratio. For example, for an image of size 800x600 (4:3), if "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("i-width")]),_v(" is set to 400px, its height will be 300px.")]),_v(" "),_c('p',[_c('strong',[_v("The icon's appearance can be further customized by adding a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("i-class")]),_v(" attribute.")])]),_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":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 1 { icon=\"/images/deer.jpg\" i-width=\"60px\" height=\"17px\" i-class=\"rounded\" }\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 { icon=\"fas-question-circle\" i-class=\"badge rounded-pill my-1 bg-success text-white\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Item 2.2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Item 2.3 { i-class=\"badge rounded-pill my-1 bg-primary text-white\"}\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(" Item 3.1 \n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Item 3.2 { icon=\"fas-question-circle\" i-class=\"badge rounded my-1 bg-danger text-white\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Item 3.3\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"},attrs:{"height":"17px"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticClass:"rounded",staticStyle:{"width":"60px","display":"inline-block"},attrs:{"src":"/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('div',[_v("Item 1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticClass:"rounded",staticStyle:{"width":"60px","display":"inline-block"},attrs:{"src":"/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('div',[_v("Item 2\n"),_c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-question-circle badge rounded-pill my-1 bg-success text-white",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 2.1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-question-circle badge rounded-pill my-1 bg-success text-white",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 2.2")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-question-circle badge rounded-pill my-1 bg-primary text-white",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 2.3")])])])])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticClass:"rounded",staticStyle:{"width":"60px","display":"inline-block"},attrs:{"src":"/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('div',[_v("Item 3\n"),_c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-question-circle badge rounded-pill my-1 bg-primary text-white",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 3.1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-question-circle badge rounded my-1 bg-danger text-white",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 3.2 ")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-question-circle badge rounded my-1 bg-danger text-white",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 3.3")])])])])])])])],1)]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_c('p',[_v("Similar to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("icon")]),_v(" attribute, other icon attributes such as "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("i-class")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("i-width")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("i-height")]),_v(" apply for subsequent list items at the same level, until they are overridden by the same attribute. For example, Item 2.3's "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("i-class")]),_v(" overrides Item 2.1's and applies up to Item 3.1.")])])],1),_v(" "),_c('p',[_c('strong',[_v("You can apply Markdown's heading and paragraph syntax within the list.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" #### Heading 1: Overview {icon=\"/images/overview-d.png\" i-width=\"65px\" i-class=\"rounded\" }\n")]),_c('span',[_v(" Content 1: This section provides a summary of the document or topic. \n")]),_c('span',[_v(" It sets the context and purpose of the content to follow.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" #### Heading 2: Detailed Description { icon=\"/images/detailed-d.png\" i-width=\"65px\" i-class=\"rounded\" }\n")]),_c('span',[_v(" Content 2: This section delves deeper into the topic, offering comprehensive information and detailed explanations.\n")]),_c('span',[_v(" It might also include evidence, examples, or justifications.\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticClass:"rounded",staticStyle:{"width":"65px","display":"inline-block"},attrs:{"src":"/images/overview-d.png","alt":"Icon"}}),_v("​​")]),_c('div',[_c('h4',{attrs:{"id":"heading-1-overview"}},[_v("Heading 1: Overview"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-1-overview","onclick":"event.stopPropagation()"}})]),_v("\nContent 1: This section provides a summary of the document or topic.\nIt sets the context and purpose of the content to follow.")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticClass:"rounded",staticStyle:{"width":"65px","display":"inline-block"},attrs:{"src":"/images/detailed-d.png","alt":"Icon"}}),_v("​​")]),_c('div',[_c('h4',{attrs:{"id":"heading-2-detailed-description"}},[_v("Heading 2: Detailed Description"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-2-detailed-description","onclick":"event.stopPropagation()"}})]),_v("\nContent 2: This section delves deeper into the topic, offering comprehensive information and detailed explanations.\nIt might also include evidence, examples, or justifications.")])])])])],1)]),_v(" "),_c('p',[_v("Icon specifications should be attached only to the first element of a list item (for the example above, the icon specification should be attached to the heading, not the content below the heading).")]),_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":"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(" 2.")]),_v(" Sub item 1.2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("2.")]),_v(" Item 2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("3.")]),_v(" Item 3\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('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('popover',{scopedSlots:_u([{key:"content",fn:function(){return [_c('div',{staticStyle:{"text-align":"center","margin-bottom":"5px"}},[_v("++"),_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('ol',{staticClass:"ps-0 ms-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)])]},proxy:true}])},[_v("\nfirst number\n")]),_v("!\n")],1),_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('div',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{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',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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":"292b4"}},[_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":"292b4","type":"radio"}}),_v(" Item 5")])])])])],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"math-formulae"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{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"}},[_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("Two types of delimiters are supported and can be used interchangeably:")]),_v(" "),_c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("'dollars'")]),_v(" "),_c('ul',[_c('li',[_v("Insert "),_c('strong',[_v("inline")]),_v(" equations by enclosing them in "),_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(" "),_c('li',[_v("Insert "),_c('strong',[_v("display")]),_v(" equations by enclosing them in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("$$...$$")])]),_v(" "),_c('li',[_v("Insert "),_c('strong',[_v("display")]),_v(" + "),_c('strong',[_v("equation number")]),_v(": "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("$$...$$ (1)")])])])]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("'brackets'")]),_v(" "),_c('ul',[_c('li',[_v("Insert "),_c('strong',[_v("inline")]),_v(" equations by enclosing them in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\\(...\\)")])]),_v(" "),_c('li',[_v("Insert "),_c('strong',[_v("display")]),_v(" equations by enclosing them in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\\[...\\]")])]),_v(" "),_c('li',[_v("Insert "),_c('strong',[_v("display")]),_v(" + "),_c('strong',[_v("equation number")]),_v(": "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\\[...\\] (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":"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")]),_c('span',[_v("\n")]),_c('span',[_v("$$ 4x + 5y = 16 $$ (3)\n")]),_c('span',[_v("\n")]),_c('span',[_v("$$\\frac{10x}{3} + \\frac{5y}{3} = 8$$ (4)\n")]),_c('span',[_v("\n")]),_c('span',[_v("Finally, the Pythagoras theorem: $c^2 = a^2 + b^2$.\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("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.7278em;vertical-align:-0.0833em;"}}),_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.2222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.625em;vertical-align:-0.1944em;"}}),_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.2778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.6444em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("11")])])])])])]),_c('span',[_v("(1)")])],1),_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.0074em;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.3214em;"}},[_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.2222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:2.0074em;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.3214em;"}},[_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.2778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.6444em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("8")])])])])])]),_c('span',[_v("(2)")])],1),_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.908em;vertical-align:-0.0833em;"}}),_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.8247em;"}},[_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","style":"margin-right:0.03588em;"}},[_v("iΟ€")])])])])])])])])]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.6444em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("1")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.6444em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("0")])])])])]),_v(" is a beautiful equation.")],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('mn',{pre:true},[_v("4")]),_c('mi',{pre:true},[_v("x")]),_c('mo',{pre:true},[_v("+")]),_c('mn',{pre:true},[_v("5")]),_c('mi',{pre:true},[_v("y")]),_c('mo',{pre:true},[_v("=")]),_c('mn',{pre:true},[_v("16")])],1),_c('annotation',{pre:true,attrs:{"encoding":"application/x-tex","v-pre":""}},[_v(" 4x + 5y = 16 ")])],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.7278em;vertical-align:-0.0833em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("4")]),_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("x")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.8389em;vertical-align:-0.1944em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("5")]),_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.2778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.6444em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("16")])])])])])]),_c('span',[_v("(3)")])],1),_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("10")]),_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("5")]),_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{10x}{3} + \\frac{5y}{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.0074em;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.3214em;"}},[_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("10")]),_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.2222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:2.0074em;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.3214em;"}},[_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("5")]),_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.2778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.6444em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("8")])])])])])]),_c('span',[_v("(4)")])],1),_c('p',[_v("Finally, the Pythagoras theorem: "),_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("c")]),_c('mn',{pre:true},[_v("2")])],1),_c('mo',{pre:true},[_v("=")]),_c('msup',{pre:true},[_c('mi',{pre:true},[_v("a")]),_c('mn',{pre:true},[_v("2")])],1),_c('mo',{pre:true},[_v("+")]),_c('msup',{pre:true},[_c('mi',{pre:true},[_v("b")]),_c('mn',{pre:true},[_v("2")])],1)],1),_c('annotation',{pre:true,attrs:{"encoding":"application/x-tex","v-pre":""}},[_v("c^2 = a^2 + b^2")])],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.8141em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("c")]),_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.8141em;"}},[_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"}},[_v("2")])])])])])])])]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.8974em;vertical-align:-0.0833em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("a")]),_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.8141em;"}},[_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"}},[_v("2")])])])])])])])]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.8141em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("b")]),_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.8141em;"}},[_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"}},[_v("2")])])])])])])])])])])])]),_v(".")],1)])],1)]),_v(" "),_c('p',[_v("Additional delimiters are possible by enabling the "),_c('a',{attrs:{"href":"/userGuide/usingPlugins.html#plugin-mathdelimiters"}},[_v("mathDelimiters")]),_v(" plugin.")]),_v(" "),_c('box',{attrs:{"type":"info"}},[_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":"/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 %}\n")]),_c('span',[_v("\n")]),_c('span',[_v("\\(e^{{\\frac{1}{3}} + 1}\\)\n")]),_c('span',[_v("\n")]),_c('span',[_v("{% endraw %}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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.7278em;vertical-align:-0.0833em;"}}),_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.2222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.625em;vertical-align:-0.1944em;"}}),_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.2778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.6444em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("11")])])])])])]),_c('span',[_v("(1)")])],1),_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.0074em;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.3214em;"}},[_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.2222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:2.0074em;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.3214em;"}},[_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.2778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.6444em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("8")])])])])])]),_c('span',[_v("(2)")])],1),_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.908em;vertical-align:-0.0833em;"}}),_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.8247em;"}},[_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","style":"margin-right:0.03588em;"}},[_v("iΟ€")])])])])])])])])]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.6444em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("1")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.6444em;"}}),_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('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"}},[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('modal',{attrs:{"id":"modal:loremipsum"},scopedSlots:_u([{key:"header",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('modal',{attrs:{"id":"modal:centered","center":""},scopedSlots:_u([{key:"header",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('modal',{attrs:{"id":"modal:ok-text","ok-text":"Custom OK"},scopedSlots:_u([{key:"header",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 focus")]),_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 focus")])]),_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(", or any space-separated combination of these.")])]),_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")]),_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."),_c('br'),_c('strong',[_v("Note: Ensure id for each Modal is unique.")])])]),_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 small Modal.")])]),_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 large Modal.")])]),_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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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('modal',{attrs:{"ok-text":"OK","id":"modal:unused"},scopedSlots:_u([{key:"header",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('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"}},[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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 insert your own custom styles via the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("add-class")]),_v(" attribute. You can "),_c('trigger',{attrs:{"trigger":"click","for":"modal:built-in-bg"}},[_v("use built-in background styles")]),_v(" or "),_c('a',{attrs:{"href":"/userGuide/components/advanced.html#inserting-custom-classes-into-components"}},[_v("insert your own defined CSS classes")]),_v(".")],1)]),_v(" "),_c('modal',{attrs:{"id":"modal:built-in-bg"},scopedSlots:_u([{key:"header",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("sticky")]),_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 environment--combined\"")]),_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 environment--combined\"")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("e.g. adding an image to the site nav")]},proxy:true}])},[_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.")],1),_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('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<a>")]),_v(" tags in particular")]},proxy:true}])},[_v("links")]),_v("."),_c('br'),_v("\nIf absent, the navigation buttons to open the menus are "),_c('em',[_v("automatically hidden")]),_v(".")],1)]),_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":"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:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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:{"heading":"CSS class attached to the root navigation element","class":"hljs css"}},[_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"heading":"","class":"hljs css"}},[_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('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"}},[_v("Page Navigation Menus"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#page-navigation-menus-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('span',{staticClass:"keyword d-none"},[_v("print page nav as table of content")])]),_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('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_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(".")]},proxy:true}])},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"default\"")])]),_v(" or a "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_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(".")]},proxy:true}])},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("heading level")])]),_v(".")],1),_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('li',[_c('p',[_c('strong',[_v("(Optional) To make pageNav available on print, you can position the page navigation menu on individual pages with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<page-nav-print />")]),_v(" component.")])])])]),_v(" "),_c('panel',{staticClass:"ms-4",attrs:{"type":"seamless","expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("Additional details on printing pageNav")])])]},proxy:true}])},[_v(" "),_c('p',[_v("You can specify the location of the page navigation menu on print by using either of the following syntaxes:")]),_v(" "),_c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<page-nav-print />")])]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<page-nav-print></page-nav-print>")]),_v(" "),_c('ul',[_c('li',[_v("This is useful if you want to include a custom title (or any other content) before the page navigation menu. For example, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<page-nav-print>Table of Contents</page-nav-print>")])])])])]),_v(" "),_c('p',[_v("You can specify multiple "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<page-nav-print />")]),_v(" components in a page and they do not have to be at the top of the page. They also do not appear when viewed on a browser.")]),_v(" "),_c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v("\nIn the page that you want to have page navigation printed (i.e. to serve as a table of content when viewed on PDFs), use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<page-nav-print />")]),_v(" component to position the pageNav like so:")]),_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('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("page-nav-print")]),_v(" />")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("# Overview\n")]),_c('span',[_v("Content of the page...\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_c('p',[_v("To view the pageNav on print, open the print preview of the page using the browser's print function.")]),_v(" "),_c('box',{attrs:{"type":"info","seamless":""}},[_c('p',[_v("If you are using Chrome, you can right-click on the page and select \"Print\" to open the print preview.\nYou can try it out by going to our "),_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands page")]),_v(" and printing it.")])])],1),_v(" "),_c('div',{staticClass:"indented",attrs:{"id":"short"}},[_c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-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:")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('trigger',{attrs:{"for":"modal:page-nav-example","trigger":"click"}},[_v("Example usage of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<page-nav />")]),_v(" component")])],1),_v(" "),_c('modal',{attrs:{"id":"modal:page-nav-example","large":""},scopedSlots:_u([{key:"header",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":"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("<!-- Create a sticky header using the sticky 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("sticky")]),_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 environment--combined\"")]),_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 environment--combined\"")]),_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-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(">")]),_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("\"fw-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(">")]),_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(">")]),_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":"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":"highlighted"}},[_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])],1)],1),_v(" "),_c('div',{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(".")])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"panels"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{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"}},[_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":"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',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("markdown")]),_v(">")]),_v("_markdown_"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("markdown")]),_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("plain text ..."),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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(" "),_c('div',[_c('p',[_c('em',[_v("markdown")])])]),_v(" "),_c('p',[_v("plain text ...")])])],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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-close")]),_v(", or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-minimized-switch")]),_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":"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 minimized panel does not have a switch button**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-minimized-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 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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"","no-minimized-switch":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("This minimized panel does not have a switch button")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"","height":"20"}})])])]},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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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("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 box\n")]),_c('span',[_v(" "),_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(" "),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('box',{attrs:{"type":"success"}},[_v("\n I'm a nested 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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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('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"}},[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("This is the first paragraph.")]),_v(" "),_c('p',[_v("This is another paragraph. This is the second sentence.")])])],1)]),_v(" "),_c('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"pictures"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{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"}},[_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":"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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])],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.")])])])])]),_c('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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('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"}},[_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":"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("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("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("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("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("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("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("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("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("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("popover")]),_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("div")]),_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("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("popover")]),_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("div")]),_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("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("popover")]),_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',[_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("div")]),_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 src"),_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("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("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"From a HTML file\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/syntax/extra/loadContent.html#fragment\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" This is loaded from a .html file\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("div")]),_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(" "),_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("\"From a MarkDown file\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/formattingContents.md#overview\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" This is loaded from a .md file\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("div")]),_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("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("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")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('popover',{attrs:{"placement":"top"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on top")])]),_v(" "),_c('popover',{attrs:{"placement":"left"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on left")])]),_v(" "),_c('popover',{attrs:{"placement":"right"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on right")])]),_v(" "),_c('popover',{attrs:{"placement":"bottom"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on bottom")])]),_v(" "),_c('hr'),_v(" "),_c('h4',{staticClass:"no-index",attrs:{"id":"header-2"}},[_v("Header"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#header-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('popover',{attrs:{"placement":"top"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true},{key:"header",fn:function(){return [_v("Header")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on top")])]),_v(" "),_c('popover',{attrs:{"placement":"left"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true},{key:"header",fn:function(){return [_v("Header")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on left")])]),_v(" "),_c('popover',{attrs:{"placement":"right"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true},{key:"header",fn:function(){return [_v("Header")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on right")])]),_v(" "),_c('popover',{attrs:{"placement":"bottom"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true},{key:"header",fn:function(){return [_v("Header")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on bottom")])]),_v(" "),_c('hr'),_v(" "),_c('h4',{staticClass:"no-index",attrs:{"id":"trigger"}},[_v("Trigger"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#trigger","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('popover',{attrs:{"placement":"top","trigger":"hover"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true},{key:"header",fn:function(){return [_v("Header")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Mouseenter")])])],1),_v(" "),_c('h4',{staticClass:"no-index",attrs:{"id":"markdown"}},[_v("Markdown"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#markdown","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('popover',{scopedSlots:_u([{key:"content",fn:function(){return [_c('span',{staticClass:"underline"},[_v("emoji")]),_v(" content 🐱")]},proxy:true},{key:"header",fn:function(){return [_c('strong',[_v("Emoji header")]),_v(" πŸš€")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Hover")])])],1),_v(" "),_c('h4',{staticClass:"no-index",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('div',[_c('popover',{scopedSlots:_u([{key:"header",fn:function(){return [_c('strong',[_v("Emoji header")]),_v(" πŸš€")]},proxy:true},{key:"content",fn:function(){return [_c('div',[_v("\n This is a long content...\n ")])]},proxy:true}])},[_v(" "),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Hover")])])],1),_v(" "),_c('h4',{staticClass:"no-index",attrs:{"id":"content-using-src"}},[_v("Content using src"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#content-using-src","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('popover',{scopedSlots:_u([{key:"content",fn:function(){return [_v("Fragment loading test")]},proxy:true},{key:"header",fn:function(){return [_v("From a HTML file")]},proxy:true}])},[_v("\n This is loaded from a .html file\n ")])],1),_v(" "),_c('div',[_c('popover',{scopedSlots:_u([{key:"content",fn:function(){return [_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.")])]},proxy:true},{key:"header",fn:function(){return [_v("From a MarkDown file")]},proxy:true}])},[_v("\n This is loaded from a .md file\n ")])],1),_v(" "),_c('h4',{staticClass:"no-index",attrs:{"id":"wrap-text"}},[_v("Wrap Text"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#wrap-text","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('popover',{scopedSlots:_u([{key:"content",fn:function(){return [_v("Nice!")]},proxy:true},{key:"header",fn:function(){return [_v("false")]},proxy:true}])},[_v("What do you say")])],1)],1)],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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"pop:trigger_id"}},[_v("trigger")]),_v(".\n"),_c('popover',{attrs:{"id":"pop:trigger_id"},scopedSlots:_u([{key:"content",fn:function(){return [_v("This popover is triggered by a trigger")]},proxy:true}])}),_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 focus")]),_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 focus")])]),_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(", or any space-separated combination of these.")])]),_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(".")])])])])])])]),_v(" "),_c('br'),_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 focus")])]),_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(", or any space-separated combination of these.")])]),_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("Popover header, supports MarkDown text.")])]),_v(" "),_c('tr',[_c('td',[_v("content"),_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("Popover content, supports MarkDown text.")])]),_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 popover."),_c('br'),_v("Both "),_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(".html")]),_v(" are accepted.")])]),_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('box',{attrs:{"type":"info","light":""}},[_c('p',[_v("MarkBind supports the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" attribute, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("content")]),_v(" attribute and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("content")]),_v(" slot for popovers.\nUsually, only one of these would be used at a time.")]),_v(" "),_c('p',[_v("If multiple of these are used, MarkBind will prioritise in the following order:")]),_v(" "),_c('ol',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("content")]),_v(" slot")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("content")]),_v(" attribute")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" attribute")])])]),_v(" "),_c('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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('popover',{attrs:{"id":"pop:context-target","placement":"top"},scopedSlots:_u([{key:"header",fn:function(){return [_v("Popover header")]},proxy:true},{key:"content",fn:function(){return [_c('div',[_c('p',[_v("description πŸ‘")])])]},proxy:true}])})],1)],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('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"}},[_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"}},[_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(", "),_c('strong',[_v("Fill-in-the-Blanks")]),_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:{"heading":"Header and Hint syntax","class":"hljs html"}},[_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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:{"heading":"Headers and Hints using slots","class":"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("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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("Two of the answers are correct!")]},proxy:true}])},[_v("Hover over me!")]),_v(" "),_c('span',{staticClass:"fas fa-mouse-pointer",attrs:{"aria-hidden":"true"}})],1)])]},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(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("blanks")]),_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"}},[_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('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_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!")]},proxy:true}])},[_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.")],1),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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"}},[_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":"fill-in-the-blanks-questions"}},[_v("Fill-in-the-Blanks Questions"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#fill-in-the-blanks-questions","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Fill-in-the-blanks questions are specified with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"blanks\"")]),_v(" attribute.")]),_v(" "),_c('p',[_v("Unlike MCQ and checkbox questions, answer checking is performed for each blank 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 in each "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("q-option")]),_v(".\nIf no keywords are provided, the answer for that blank will always be marked as correct.")]),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_c('p',[_v("Keywords are validated by checking if the keyword matches the user's answer exactly (ignoring letter casing).\nThis works well for some\n"),_c('popover',{scopedSlots:_u([{key:"header",fn:function(){return [_v("When does validation work?")]},proxy:true},{key:"content",fn:function(){return [_c('span',[_v("\nWhen the keywords given are short and specific to the blank (eg. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("abstraction")]),_v("), it increases the chances that the blank will be validated correctly.\n"),_c('br'),_c('br'),_v("\nIn contrast, something long and vague like "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("after discussing for a period of time")]),_v(" which can easily be expressed in a different way (eg. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("after deliberating for a while")]),_v(") would likely cause the blank to be validated incorrectly.\n")])]},proxy:true}])},[_v("cases\n")]),_v("\nand not others.")],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":"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("\"blanks\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hint")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Google it!\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" ##### German sociologist __________ called the process of simultaneously analyzing the behavior of individuals and the society that shapes that behavior __________.\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("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Norbert Elias, Elias\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"That's his name!\"")]),_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("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"figuration\"")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"blanks"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Google it!")])]},proxy:true}])},[_v(" "),_c('h5',{attrs:{"id":"german-sociologist-called-the-process-of-simultaneously-analyzing-the-behavior-of-individuals-and-the-society-that-shapes-that-behavior"}},[_v("German sociologist __________ called the process of simultaneously analyzing the behavior of individuals and the society that shapes that behavior __________."),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#german-sociologist-called-the-process-of-simultaneously-analyzing-the-behavior-of-individuals-and-the-society-that-shapes-that-behavior","onclick":"event.stopPropagation()"}})]),_v(" "),_c('q-option',{attrs:{"keywords":"Norbert Elias, Elias"},scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("That's his name!")])]},proxy:true}])}),_v(" "),_c('q-option',{attrs:{"keywords":"figuration"}})],1)],1)],1)]),_v(" "),_c('p',[_v("By default, if the question has yet to be answered correctly, intermediate results will be shown beside each blank. You can specify a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-intermediate-result")]),_v(" attribute to avoid this behvaiour (i.e. hide the result of each blank upon incorrect attempts).")]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_c('p',[_v("Since the validation is imperfect, the minimum proportion of correct blanks needed for the entire question to be marked as correct 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 set the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("threshold")]),_v(" attribute to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0")]),_v(". Doing so always marks the entire question correct, and users will be able to see all intended answers.")])]),_v(" "),_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("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"blanks\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hint")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"What properties would you want these database transactions to have?\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("threshold")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("0.75")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-intermediate-result")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" ##### In computer science, ACID is a set of properties of database transactions intended to guarantee data validity despite errors, power failures, and other mishaps. These properties are: A for __________, C for __________, I for __________, and D for __________.\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("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atomicity, Atomic\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Meaning: either all occurs or nothing occurs\"")]),_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("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Consistency, Consistent\"")]),_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("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Isolation, Isolated\"")]),_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("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Durability, Durable\"")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"blanks","threshold":"0.75","no-intermediate-result":""},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("What properties would you want these database transactions to have?")])]},proxy:true}])},[_v(" "),_c('h5',{attrs:{"id":"in-computer-science-acid-is-a-set-of-properties-of-database-transactions-intended-to-guarantee-data-validity-despite-errors-power-failures-and-other-mishaps-these-properties-are-a-for-c-for-i-for-and-d-for"}},[_v("In computer science, ACID is a set of properties of database transactions intended to guarantee data validity despite errors, power failures, and other mishaps. These properties are: A for __________, C for __________, I for __________, and D for __________."),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#in-computer-science-acid-is-a-set-of-properties-of-database-transactions-intended-to-guarantee-data-validity-despite-errors-power-failures-and-other-mishaps-these-properties-are-a-for-c-for-i-for-and-d-for","onclick":"event.stopPropagation()"}})]),_v(" "),_c('q-option',{attrs:{"keywords":"Atomicity, Atomic"},scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Meaning: either all occurs or nothing occurs")])]},proxy:true}])}),_v(" "),_c('q-option',{attrs:{"keywords":"Consistency, Consistent"}}),_v(" "),_c('q-option',{attrs:{"keywords":"Isolation, Isolated"}}),_v(" "),_c('q-option',{attrs:{"keywords":"Durability, Durable"}})],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Fill-in-the-Blanks 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("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("no-intermediate-result")]),_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("Hides the result of each blank after an incorrect attempt.")])])])])]),_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("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("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"}},[_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('popover',{scopedSlots:_u([{key:"header",fn:function(){return [_v("When does validation work?")]},proxy:true},{key:"content",fn:function(){return [_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")])]},proxy:true}])},[_v("cases\n")]),_v("\nand not others.")],1)]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('h4',{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":"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("\"blanks\"")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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"}},[_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":"blanks"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Google it!")])]},proxy:true}])},[_v(" "),_c('h5',{attrs:{"id":"german-sociologist-called-the-process-of-simultaneously-analyzing-the-behavior-of-individuals-and-the-society-that-shapes-that-behavior-2"}},[_v("German sociologist __________ called the process of simultaneously analyzing the behavior of individuals and the society that shapes that behavior __________."),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#german-sociologist-called-the-process-of-simultaneously-analyzing-the-behavior-of-individuals-and-the-society-that-shapes-that-behavior-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('q-option',{attrs:{"keywords":"Norbert Elias, Elias"},scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("That's his name!")])]},proxy:true}])}),_v(" "),_c('q-option',{attrs:{"keywords":"figuration"}})],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('div',{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:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])]),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Fill-in-the-Blanks questions")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Fill-in-the-Blanks 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("\"blanks\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hint")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Google it!\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" ##### German sociologist __________ called the process of simultaneously analyzing the behavior of individuals and the society that shapes that behavior __________.\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("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Norbert Elias, Elias\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"That's his name!\"")]),_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("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"figuration\"")]),_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")]),_c('span',[_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("\"blanks\"")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_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-3"}},[_v("Which of the following is true?"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#which-of-the-following-is-true-3","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":"blanks"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Google it!")])]},proxy:true}])},[_v(" "),_c('h5',{attrs:{"id":"german-sociologist-called-the-process-of-simultaneously-analyzing-the-behavior-of-individuals-and-the-society-that-shapes-that-behavior-3"}},[_v("German sociologist __________ called the process of simultaneously analyzing the behavior of individuals and the society that shapes that behavior __________."),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#german-sociologist-called-the-process-of-simultaneously-analyzing-the-behavior-of-individuals-and-the-society-that-shapes-that-behavior-3","onclick":"event.stopPropagation()"}})]),_v(" "),_c('q-option',{attrs:{"keywords":"Norbert Elias, Elias"},scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("That's his name!")])]},proxy:true}])}),_v(" "),_c('q-option',{attrs:{"keywords":"figuration"}})],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('panel',{attrs:{"type":"seamless","panelId":"scroll-to-top-button"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"scroll-to-top-button"}},[_c('strong',[_v("Scroll To Top Button")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#scroll-to-top-button","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"scroll-to-top-button-2"}},[_v("Scroll To Top Button"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#scroll-to-top-button-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{attrs:{"id":"content"}},[_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("scroll-top-button")]),_v(" component allows users to move to the top of the page.")]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Adding a scroll-top-button")])])]),_v(" "),_c('p',[_v("Add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<scroll-top-button></scroll-top-button>")]),_v(" to layout file.")]),_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("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(":fas-arrow-circle-up:")])]),_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("lg")])]),_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("bottom")]),_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("2%")])]),_v(" "),_c('td',[_v("Distance from bottom edge of page.")])]),_v(" "),_c('tr',[_c('td',[_v("right")]),_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("2%")])]),_v(" "),_c('td',[_v("Distance from right edge of page.")])])])])])]),_v(" "),_c('div',{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("scroll-top-button")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-arrow-circle-up:\"")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon-size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"2x\"")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bottom")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"2%\"")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("right")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"2%\"")])]),_v("\n")]),_c('span',[_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("scroll-top-button")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("You can see an example of a scroll to top button on the "),_c('mark',[_v("on the bottom right side")]),_v(" of this page.")])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"search-bars"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{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"}},[_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('div',{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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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(".")])])],1),_v(" "),_c('div',{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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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('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"}},[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.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('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("a menu item with sub menu-items")]},proxy:true}])},[_v("parent menu item")]),_v(" to make it expand by default.")],1),_v(" In the example above, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("* Authoring Contents :expanded:")]),_v(" makes the menu item "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Authoring Contents")]),_v(" expand by default.")])]),_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('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"}},[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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:"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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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('panel',{attrs:{"type":"seamless","panelId":"tabs"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{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"}},[_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":"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(" Text in 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("markdown")]),_v(">")]),_v("_some markdown_"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("markdown")]),_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("\"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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 Text in the first tab\n "),_c('div',[_c('p',[_c('em',[_v("some markdown")])])])]),_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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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('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"}},[_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"}},[_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Attaching tags to elements:")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Attaching multiple tags to an element:")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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 frontmatter.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Specifying tags in frontmatter:")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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 frontmatter, and are processed after frontmatter 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"}},[_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Using general tags:")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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"}},[_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Using general tags:")]),_v(" "),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_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:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('div',{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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])]),_v(" "),_c('div',{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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('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"}},[_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('div',{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":"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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"hljs markdown"}},[_c('span',[_v("~~Strike through~~\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('s',[_v("Strike through")])])])],1)]),_v(" "),_c('p',[_v("Syntax added by MarkBind:")]),_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":"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--,\n")]),_c('span',[_v("Super^script^, Sub~script~,\n")]),_c('span',[_v("->Center-align<-\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',[_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(",\nSuper"),_c('sup',[_v("script")]),_v(", Sub"),_c('sub',[_v("script")]),_v(",\n")]),_c('div',{staticClass:"text-center"},[_v("Center-align")]),_c('p')])],1)])]),_v(" "),_c('p',[_v("Additional font colouring syntax:")]),_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":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("#r#Coloured Text##")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('span',{staticClass:"mkb-text-red"},[_v("Coloured Text")])])])],1)]),_v(" "),_c('p',[_v("Full list of colours:")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Letter")]),_v(" "),_c('th',[_v("Colour")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("r")]),_v(" "),_c('td',[_v("red")])]),_v(" "),_c('tr',[_c('td',[_v("g")]),_v(" "),_c('td',[_v("green")])]),_v(" "),_c('tr',[_c('td',[_v("b")]),_v(" "),_c('td',[_v("blue")])]),_v(" "),_c('tr',[_c('td',[_v("c")]),_v(" "),_c('td',[_v("cyan")])]),_v(" "),_c('tr',[_c('td',[_v("m")]),_v(" "),_c('td',[_v("magenta")])]),_v(" "),_c('tr',[_c('td',[_v("y")]),_v(" "),_c('td',[_v("yellow")])]),_v(" "),_c('tr',[_c('td',[_v("k")]),_v(" "),_c('td',[_v("black")])]),_v(" "),_c('tr',[_c('td',[_v("w")]),_v(" "),_c('td',[_v("white")])])])])]),_c('box',{attrs:{"type":"tip","seamless":""}},[_c('p',[_v("To escape the syntax, simply put a backslash in front of it (e.g. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\\#b#")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\\##")]),_v(").")])])],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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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")])])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"thumbnails"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{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"}},[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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('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"}},[_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":"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("Tooltip 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("Tooltip 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("Tooltip 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("Tooltip 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("\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',[_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("\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',[_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("\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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('tooltip',{attrs:{"placement":"top"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Tooltip on top")])]),_v(" "),_c('tooltip',{attrs:{"placement":"left"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Tooltip on left")])]),_v(" "),_c('tooltip',{attrs:{"placement":"right"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Tooltip on right")])]),_v(" "),_c('tooltip',{attrs:{"placement":"bottom"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Tooltip on bottom")])]),_v(" "),_c('hr'),_v(" "),_c('p',[_v("Trigger")]),_v(" "),_c('p',[_c('tooltip',{attrs:{"placement":"top","trigger":"click"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Click")])])],1),_v(" "),_c('p',[_c('tooltip',{attrs:{"placement":"top","trigger":"focus"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true}])},[_v(" "),_c('input',{attrs:{"placeholder":"Focus"}})])],1),_v(" "),_c('hr'),_v(" "),_c('p',[_c('strong',[_v("Markdown")]),_v(":\n"),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_c('em',[_v("Hello")]),_v(" "),_c('strong',[_v("World")])]},proxy:true}])},[_v(" "),_c('a',{attrs:{"href":""}},[_v("Hover me")])]),_v(" "),_c('br')],1),_v(" "),_c('p',[_c('strong',[_v("Free Text")]),_v(":\n"),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_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.")]},proxy:true}])},[_c('i',[_v("coupling")])])],1)],1)],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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"tt:trigger_id"}},[_v("trigger")]),_v(".\n"),_c('tooltip',{attrs:{"id":"tt:trigger_id"},scopedSlots:_u([{key:"content",fn:function(){return [_v("This tooltip triggered by a trigger")]},proxy:true}])}),_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 focus")]),_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 focus")])]),_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(", or any space-separated combination of these.")])]),_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 focus")])]),_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(", or any space-separated combination of these.")])]),_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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("Hover "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("An explanation, "),_c('strong',[_v("supports simple Markdown")])]},proxy:true}])},[_v("here")]),_v(" to see a tooltip.")],1)])],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"tree"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"tree"}},[_c('strong',[_v("Tree")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tree","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"tree-2"}},[_v("Tree"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tree-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("A "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tree")]),_v(" component allows you to generate tree-like visualisations, suitable for displaying folder structure.")])]),_v(" "),_c('p',[_v("Use indentation (2 spaces) to indicate the level of nesting.")]),_v(" "),_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("tree")]),_v(">")]),_v("\n")]),_c('span',[_v("C:/course/\n")]),_c('span',[_v(" textbook/\n")]),_c('span',[_v(" index.md\n")]),_c('span',[_v(" index.md\n")]),_c('span',[_v(" reading.md\n")]),_c('span',[_v(" site.json\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tree")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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:"tree"},[_v("C:/course/\nβ”œβ”€β”€ textbook/\nβ”‚ └── index.md\nβ”œβ”€β”€ index.md\nβ”œβ”€β”€ reading.md\n└── site.json\n")])])],1)]),_v(" "),_c('p',[_v("Markdown unordered lists are also 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":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tree")]),_v(">")]),_v("\n")]),_c('span',[_v("C:/course/\n")]),_c('span',[_v(" - textbook/\n")]),_c('span',[_v(" - index.md\n")]),_c('span',[_v("C:/course/\n")]),_c('span',[_v(" * textbook/\n")]),_c('span',[_v(" * index.md\n")]),_c('span',[_v("C:/course/\n")]),_c('span',[_v(" + textbook/\n")]),_c('span',[_v(" + index.md\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tree")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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:"tree"},[_v("C:/course/\nβ”œβ”€β”€ textbook/\n└── index.md\nC:/course/\nβ”œβ”€β”€ textbook/\n└── index.md\nC:/course/\nβ”œβ”€β”€ textbook/\n└── index.md\n")])])],1)]),_v(" "),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("Besides file system structures, you can use this for any lightweight tree-like structure.")]),_v(" "),_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("tree")]),_v(">")]),_v("\n")]),_c('span',[_v("Enjoy MarkBind?\n")]),_c('span',[_v(" You may want to:\n")]),_c('span',[_v(" Like :heart:\n")]),_c('span',[_v(" Share :speech_balloon:\n")]),_c('span',[_v(" Contribute :pencil:\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tree")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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:"tree"},[_v("Enjoy MarkBind?\n└── You may want to:\n β”œβ”€β”€ Like ❀️\n β”œβ”€β”€ Share πŸ’¬\n └── Contribute πŸ“\n")])])],1)])]),_v(" "),_c('p',[_v("You can use Tree in combination with inline Markdown or inline HTML elements.")]),_v(" "),_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("tree")]),_v(">")]),_v("\n")]),_c('span',[_v("Formatting is supported!\n")]),_c('span',[_v(" textbook/\n")]),_c('span',[_v(" `index.md`\n")]),_c('span',[_v(" **index.md**\n")]),_c('span',[_v(" ~~index.md~~\n")]),_c('span',[_v(" %%dimmed%%\n")]),_c('span',[_v(" Super^script^\n")]),_c('span',[_v(" ****Super Bold****\n")]),_c('span',[_v(" !!Underline!!\n")]),_c('span',[_v(" !!Underline with {text=danger}!!{.text-danger}\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("\"text-danger\"")]),_v(">")]),_v("RED"),_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(" __reading.md__\n")]),_c('span',[_v(" ++site.json++\n")]),_c('span',[_v(" ==hello==\n")]),_c('span',[_v(" :construction:\n")]),_c('span',[_v(" :fas-file-code:\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("tree")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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:"tree"},[_v("Formatting is supported!\nβ”œβ”€β”€ textbook/\nβ”‚ └── "),_c('code',{staticClass:"hljs inline no-lang"},[_v("index.md")]),_v("\nβ”œβ”€β”€ "),_c('strong',[_v("index.md")]),_v("\nβ”‚ β”œβ”€β”€ "),_c('s',[_v("index.md")]),_v("\nβ”‚ β”œβ”€β”€ "),_c('span',{staticClass:"dimmed"},[_v("dimmed")]),_v("\nβ”‚ β”œβ”€β”€ Super"),_c('sup',[_v("script")]),_v("\nβ”‚ β”œβ”€β”€ "),_c('strong',[_c('strong',[_v("Super Bold")])]),_v("\nβ”‚ β”œβ”€β”€ "),_c('span',{staticClass:"underline"},[_v("Underline")]),_v("\nβ”‚ β”œβ”€β”€ "),_c('span',{staticClass:"underline text-danger"},[_v("Underline with {text=danger}")]),_v("\nβ”‚ └── "),_c('span',{staticClass:"text-danger"},[_v("RED")]),_v("\nβ”œβ”€β”€ "),_c('strong',[_v("reading.md")]),_v("\nβ”œβ”€β”€ "),_c('span',{staticClass:"large"},[_v("site.json")]),_v("\nβ”œβ”€β”€ "),_c('mark',[_v("hello")]),_v("\nβ”œβ”€β”€ 🚧\nβ”œβ”€β”€ "),_c('span',{staticClass:"fas fa-file-code",attrs:{"aria-hidden":"true"}}),_v("\n└── πŸ˜ƒ\n")])])],1)]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Currently, Pop-Ups(tooltip/trigger) are "),_c('span',{staticClass:"underline"},[_v("not")]),_v(" supported within a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tree")]),_v(" component.")])]),_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":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")]),_v(" to find more information about text styles and other supported inline syntax.")])])]),_v(" "),_c('div',{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("tree")]),_v(">")]),_v("\n")]),_c('span',[_v("C:/course/\n")]),_c('span',[_v(" textbook/\n")]),_c('span',[_v(" index.md\n")]),_c('span',[_v(" index.md\n")]),_c('span',[_v(" reading.md\n")]),_c('span',[_v(" site.json\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tree")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('div',{staticClass:"tree"},[_v("C:/course/\nβ”œβ”€β”€ textbook/\nβ”‚ └── index.md\nβ”œβ”€β”€ index.md\nβ”œβ”€β”€ reading.md\n└── site.json\n")])])],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"variables"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{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"}},[_v("Variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#variables-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{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.")])]),_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"}},[_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-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(":")]),_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("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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-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.")])]),_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"}},[_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])]),_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, 24 Feb 2024, 7:48:51 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 5.3.0")])])])])])]),_c('h3',{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('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("similar to how you assign filepaths for other Nunjucks tags")]},proxy:true}])},[_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.")],1),_v(" "),_c('tabs',[_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Importing from JSON files")]},proxy:true}])},[_v(" "),_c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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('div',{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("variable")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('popover',{attrs:{"id":"pop:footnotefn-65-1"},scopedSlots:_u([{key:"content",fn:function(){return [_c('div',[_c('p',[_v("Here is the footnote. Footnotes will appear at the bottom of the page.")])])]},proxy:true}])}),_c('popover',{attrs:{"id":"pop:footnotefn-65-2"},scopedSlots:_u([{key:"content",fn:function(){return [_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.")])])]},proxy:true}])}),_c('popover',{attrs:{"id":"pop:footnotefn-65-3"},scopedSlots:_u([{key:"content",fn:function(){return [_c('div',[_c('p',[_v("Inline notes are easier to write, since\nyou don't have to pick an identifier and move down to type the\nnote.")])])]},proxy:true}])}),_v(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3)],1)])],1),_v(" "),_c('overlay-source',{attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"})]),_v(" "),_c('scroll-top-button')],1),_v(" "),_m(4)])} -}; - var pageVueStaticRenderFns = [function anonymous( -) { -with(this){return _c('h1',{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('li',{staticClass:"footnote-item",attrs:{"id":"fn-65-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-65-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-65-3"}},[_c('p',[_v("Inline 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 5.3.0")]),_v(" on Sat, 24 Feb 2024, 7:48:51 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 689c9be..0b2d627 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 5.3.0"> + <meta name="generator" content="MarkBind 5.4.0"> <meta name="viewport" content="width=device-width, initial-scale=1"><title>MarkBind - User Guide - Getting Started @@ -15,9 +15,9 @@ 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 or higher installed

                      There are a few ways to install MarkBind, select one that is most suitable for your use case. If you are unsure, we recommend using the first method.

                      Method 1: Install MarkBind globally with npm

                      This method is recommended for most users. It allows you to use MarkBind commands directly in your terminal, particularly useful if you have multiple MarkBind sites.

                      1. Install MarkBind

                      Run the following command to install MarkBind globally. This will make the markbind command available in your terminal.

                      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   or higher installed
                       
                      There are a few ways to install MarkBind, select one that is most suitable for your use case. If you are unsure, we recommend using the first method.
                       
                      Method 1: Install MarkBind globally with npm
                       
                       
                       
                        
                      This method is recommended for most users. It allows you to use MarkBind commands directly in your terminal, particularly useful if you have multiple MarkBind sites.
                       
                       
                      1. Install MarkBind
                       
                      Run the following command to install MarkBind globally. This will make the markbind command available in your terminal.
                       
                      npm install -g markbind-cli
+
                      2. Initialize a new Project (or Start with an existing Project)
                       
                         
                        Initializing a new project
                          
                        Navigate into an empty directory and run the following command to initialize a skeletal MarkBind site in that directory. It will create several new files in the directory e.g., index.md, site.json.
                         
                        markbind init
-
                         
                         
                          
                        
-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  .
                         
                         
                        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
-
                         
                         
                          
                        
+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 .

                        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.

                        5. Updating your MarkBind version

                        After you have installed MarkBind, you may want to update to the latest version of MarkBind in the future.

                        npm install -g markbind-cli@latest
-

                        To update to a specific version of MarkBind, replace latest with the version number e.g., 5.0.2.

                        npm install -g markbind-cli@5.0.2
-

                        If you are using any CI/CD tools, ensure the version of MarkBind is updated in the CI/CD pipeline as well.

                        • For example, update your GitHub Actions workflow file to use the correct version of MarkBind, if you are using markbind-action.

                        Method 2: Install MarkBind locally as a dev-dependency in package.json

                        This method is recommended if you

                        • are creating a documentation site that more than one person will be working on
                        • want to specify the version of MarkBind to use in your project and manage it via package.json

                        1. Initialize a package.json file

                        If you already have a package.json file, skip to step 2.

                        If you are working on a MarkBind project that is set up with this method, run npm ci to install the dependencies and refer to step 3 for how to run MarkBind commands.

                        To initialize a npm project in your current working directory, run the following command.

                        npm init
-

                        If you are using any CI/CD tools, ensure the version of MarkBind is updated in the CI/CD pipeline as well.

                        • For example, update your GitHub Actions workflow file to use the correct version of MarkBind, if you are using markbind-action.

                        Method 2: Install MarkBind locally as a dev-dependency in package.json

                        This method is recommended if you

                        • are creating a documentation site that more than one person will be working on
                        • want to specify the version of MarkBind to use in your project and manage it via package.json

                        1. Initialize a package.json file

                        If you already have a package.json file, skip to step 2.

                        If you are working on a MarkBind project that is set up with this method, run npm ci to install the dependencies and refer to step 3 for how to run MarkBind commands.

                        To initialize a npm project in your current working directory, run the following command.

                        npm init
+

                        You will need to answer the prompts to create a package.json file.

                        To get a default package.json file, run the following command.

                        npm init -y
-

                        You will need to answer the prompts to create a package.json file.

                        To get a default package.json file, run the following command.

                        npm init -y
+

                        You can always adjust the content of your package.json later.

                        2. Install markbind-cli locally as a dev-dependency

                        npm install markbind-cli --save-dev
-

                        You can always adjust the content of your package.json later.

                        2. Install markbind-cli locally as a dev-dependency

                        npm install markbind-cli --save-dev
+

                        You are now ready to run MarkBind commands with npm run xxx (e.g. npm run init for markbind init).

                        • Alternatively, you can use npx to run the commands with npx markbind-cli xxx (e.g. npx markbind-cli init for markbind init).

                        If you are using Git to version control your source files, view the User Guide: .gitignore File section for more info.

                        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.

                        5. Updating your MarkBind version

                        After you have installed MarkBind, you may want to update to the latest version of MarkBind in the future.

                        Go to your project directory that contains the package.json file and run the following command.

                        npm install markbind-cli@latest --save-dev
-

                        You are now ready to run MarkBind commands with npm run xxx (e.g. npm run init for markbind init).

                        • Alternatively, you can use npx to run the commands with npx markbind-cli xxx (e.g. npx markbind-cli init for markbind init).

                        If you are using Git to version control your source files, view the User Guide: .gitignore File section for more info.

                        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.

                        5. Updating your MarkBind version

                        After you have installed MarkBind, you may want to update to the latest version of MarkBind in the future.

                        Go to your project directory that contains the package.json file and run the following command.

                        npm install markbind-cli@latest --save-dev
+

                        To update to a specific version of MarkBind, replace latest with the version number e.g., 5.0.2.

                        npm install markbind-cli@5.0.2 --save-dev
-

                        If you are using any CI/CD tools, ensure the version of MarkBind is updated in the CI/CD pipeline as well.

                        • For example, update your GitHub Actions workflow file to use the correct version of MarkBind, if you are using markbind-action.

                        The command will modify your package.json and package-lock.json file to update the version of MarkBind.

                        Method 3: Install MarkBind via npx

                        This method is recommended if you want to try out MarkBind without installing it (by using ).

                        1. Initialize a MarkBind site

                        npx markbind-cli init mySite
-

                        If you are using any CI/CD tools, ensure the version of MarkBind is updated in the CI/CD pipeline as well.

                        • For example, update your GitHub Actions workflow file to use the correct version of MarkBind, if you are using markbind-action.

                        The command will modify your package.json and package-lock.json file to update the version of MarkBind.

                        Method 3: Install MarkBind via npx

                        This method is recommended if you want to try out MarkBind without installing it (by using ).

                        1. Initialize a MarkBind site

                        npx markbind-cli init mySite
+

                        2. Preview the site

                        cd mySite
 npx markbind-cli serve
-

                        3. See usage information

                        npx markbind-cli --help
-

                        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.

                        5. Updating your MarkBind version

                        To use the latest version of MarkBind in the future, specify latest in the command.

                        npx markbind-cli@latest init mySite
-

                        Or, specify the version number.

                        npx markbind-cli@5.0.2 init mySite
-

                        Authoring Contents


                        +

                        Authoring Contents


                        @@ -15,9 +15,9 @@ const baseUrl = '' -

                        .gitignore

                        .gitignore File

                        If you are using Git to manage your project, you can use a .gitignore file to ignore files that you don't want to be tracked by Git.

                        Some common files to ignore in a MarkBind project are:

                        • log files
                        • build output
                        • dependencies such as node_modules

                        The following is the auto-generated .gitignore file for MarkBind projects when markbind init is called:

                        .gitignore
                        # Logs
 logs
@@ -50,7 +50,7 @@
 .vscode/
 .idea/*
 *.iml
-

                        A pre-existing .gitignore file will not be overwritten if you are using the markbind init --convert command.

                        The auto-generation only adds this .gitignore if it detects that there is none in your root directory.

                        +

                        A pre-existing .gitignore file will not be overwritten if you are using the markbind init --convert command.

                        The auto-generation only adds this .gitignore if it detects that there is none in your root directory.

                        @@ -15,9 +15,9 @@ const baseUrl = '' -

                        Glossary

                        Live Preview

                        Live preview is:

                        • Regeneration of affected content upon any change to , 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 to the site output folder.

                        Use the serve command to launch a live preview.

                        +

                        Glossary

                        Live Preview

                        Live preview is:

                        • Regeneration of affected content upon any change to , 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 to the site output folder.

                        Use the serve command to launch a live preview.

                        @@ -15,9 +15,9 @@ const baseUrl = '' -
                        diff --git a/userGuide/index.page-vue-render.js b/userGuide/index.page-vue-render.js index 34992b0..0c76a6d 100644 --- a/userGuide/index.page-vue-render.js +++ b/userGuide/index.page-vue-render.js @@ -5,6 +5,6 @@ with(this){return _c('div',{attrs:{"id":"app"}},[_c('header',{attrs:{"sticky":"" }; var pageVueStaticRenderFns = [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 5.3.0")]),_v(" on Sat, 24 Feb 2024, 7:48:51 UTC]")]),_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 5.4.0")]),_v(" on Fri, 29 Mar 2024, 3:54:16 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 index f411c8e..6507993 100644 --- a/userGuide/makingTheSiteSearchable.html +++ b/userGuide/makingTheSiteSearchable.html @@ -3,7 +3,7 @@ - + MarkBind - User Guide: Making the Site Searchable @@ -15,9 +15,9 @@ const baseUrl = '' -

                        Making the Site Searchable

                        User Guide β†’ Making the Site Searchable

                        Making the Site Searchable

                        MarkBind comes 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
+

                        Making the Site Searchable

                        User Guide β†’ Making the Site Searchable

                        Making the Site Searchable

                        MarkBind comes 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>
+

                        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


                        +

                        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


                        @@ -15,9 +15,9 @@ const baseUrl = '' -

                        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 projects.

                        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 an 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.
                        +

                        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 projects.

                        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 an 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.
                        +

                        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

                        Redirecting to a Custom 404 Page


                        +

                        Deploying the Site

                        Redirecting to a Custom 404 Page


                        @@ -15,9 +15,9 @@ const baseUrl = '' -

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

                        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.
                        @@ -42,7 +42,7 @@ <li>Item {{ item }}</li> {% endfor %} </ul> -

                        OUTPUT:

                        • 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


                        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. Inline notes are easier to write, since +

                        OUTPUT:

                        • 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


                        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. Inline notes are easier to write, since you don't have to pick an identifier and move down to type the -note.

                        +note.

                        @@ -14,10 +14,10 @@ - -

                        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

                        alt text here

                        details...

                        Classes, Attributes & Identifiers
                        • 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

                        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

                        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

                        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
                        +

                        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 [1]

                        details...

                        Images

                        alt text here

                        details...

                        Classes, Attributes & Identifiers
                        • 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

                        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

                        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

                        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

                        +

                        details...

                        Panels

                        minimal type panel

                        seamless type panel

                        info type panel

                        ... -

                        danger type panel

                        warning type panel

                        success type panel

                        details...

                        Tabs
                          First tab
                          +

                          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 @@ -81,28 +98,28 @@ Some stuff about stars ...
                            Moon
                            Some stuff about the moon ... -

                            details...

                            Pictures
                            Logo +

                            details...

                            Pictures
                            Logo MarkBind Logo -

                            details...

                            Annotations
                            Sample Image

                            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...

                            Tree
                            C:/course/ +

                            details...

                            Annotations
                            Sample Image

                            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...

                            Tree
                            C:/course/ β”œβ”€β”€ textbook/ β”‚ └── index.md β”œβ”€β”€ index.md β”œβ”€β”€ reading.md └── site.json -

                            details...

                            Tooltips

                            Hover to see a tooltip.

                            details...

                            Popovers

                            Hover over the keyword to see the popover.

                            details...

                            Modals

                            Hover here to open a modal.

                            details...

                            Tooltips

                            Hover to see a tooltip.

                            details...

                            Popovers

                            Hover over the keyword to see the popover.

                            details...

                            Modals

                            Hover here to open a modal.

                            details...

                            details...

                            Search Bars

                            details...

                            Search Bars
                            Search -

                              details...

                              details...

                                details...

                                details...

                                details...

                                details...

                                Page Navigation Menus

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

                                details...

                                Scroll To Top Button

                                You can see an example of a scroll to top button on the on the bottom right side of this page.

                                details...

                                Questions and Quizzes

                                +

                                details...

                                details...

                                Page Navigation Menus

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

                                details...

                                Scroll To Top Button

                                You can see an example of a scroll to top button on the on the bottom right side of this page.

                                details...

                                Questions and Quizzes

                                Click start to begin -

                                0 questions

                                details...

                                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. Inline notes are easier to write, since +

                                details...

                                1. Math

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

                                3. Here's one with multiple blocks.

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

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

                                +note.

                              • Math

                                • @@ -15,9 +15,9 @@ const baseUrl = '' -

                                Redirecting to a Custom 404 Page

                                User Guide β†’ Redirecting to a Custom 404 Page

                                Redirecting to a Custom 404 Page

                                Many popular static hosting services, such as Netlify, support custom routing to a custom 404 HTML page. A default 404.md file is provided, and you can customize it to create your own 404 page. The 404.html file will be created at the root of the _site folder.


                                Modifying the default 404 page

                                After a project is created with markbind init, the 404.md file will be generated in the root of the project. You can click here to view the default 404 page. -To edit the 404 page, you can simply edit this 404.md file.

                                MarkBind in the Project Workflow

                                Adding Navigation Buttons


                                +To edit the 404 page, you can simply edit this 404.md file.

                                MarkBind in the Project Workflow

                                Adding Navigation Buttons


                                @@ -15,9 +15,9 @@ const baseUrl = '' -

                                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>
 
@@ -34,7 +34,7 @@
 * 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, 24 Feb 2024, 7:48:51 UTC
                                MarkBind The MarkBind version in use, linked to the MarkBind website. Page generated by: {{MarkBind}} Page generated by: MarkBind 5.3.0

                                Importing variables from other external file formats

                                You can also source variables from external files using MarkBind's {% ext varName = "filepathToFile" %} Nunjucks extension. +

                                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: Fri, 29 Mar 2024, 3:54:16 UTC
                                MarkBind The MarkBind version in use, linked to the MarkBind website. Page generated by: {{MarkBind}} Page generated by: MarkBind 5.4.0

                                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 . 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
@@ -60,7 +60,7 @@
 {% 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" %}
+

                                  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</variable>
-

                                  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.

                                  Place global variables in `_markbind/variables.md`
+<variable name="year">2018</variable>
+The year was {{ year }}
+

                                  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. ...
+
                                  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> tag with the matching id.

                                  Choose <div> over <span> when wrapping block-level elements, to prevent invalid HTML markup which causes hydration issues.

                                  Example Including a fragment from a file:

                                  Some text
+

                                  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> tag with the matching id.

                                  Choose <div> over <span> when wrapping block-level elements, to prevent invalid HTML markup which causes hydration issues.

                                  Example Including a fragment from a file:

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

                                  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> mechanism can be used inside any MarkBind source file (even inside the frontmatter section) but it will not work inside 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 ...
-

                                  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.

                                  Global Effects of the Script and Styles from the Imported Externals

                                  Importing external resources that contains script or styles can inadvertently take global effects on your MarkBind website. Due to hoisting during processing, imported scripts and stylesheets affect the entire page. This could potentially alter its appearance and behavior beyond the intended scope.

                                  For example, if a CSS file imported via such means styles headings to be red, this change will be reflected page-wide.

                                  To safeguard against unintended consequences, consider directly incorporating the code or customizing styles to target specific elements or classes not used universally. This approach grants more precise control over your website's presentation and reduces the risk of unexpected changes.

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

                                  Attributes:

                                  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. -This is to allow the outer context to adapt the reused content without changing its actual content.

                                  Preventing cyclical errors when using multiple includes with same variables

                                  Excluding Files from Rendering as Pages

                                  MarkBind supports the exclusion of files from page generation. For example, you can exclude files containing that are only meant to be used in <include>.

                                  Note: This example below is assuming that you have included the following glob pattern in the site.json file:

                                  {
-  "pages": [
-    {
-      "glob": "*.md",
-      "layout": "normal",
-      "searchable": "yes"
-    }
-  ],
-}
-
                                  Excluding Files from Rendering as Pages

                                  MarkBind supports the exclusion of files from page generation. For example, you can exclude files containing that are only meant to be used in <include>.

                                  Note: This example below is assuming that you have included the following glob pattern in the site.json file:

                                  {
+  "pages": [
+    {
+      "glob": "*.md",
+      "layout": "normal",
+      "searchable": "yes"
+    }
+  ],
+}
+

                                  Else, if each page is included individually, there is no need to exclude the fragments as they will not be included in the page generation.

                                  Example Suppose you have a fragment file content-fragment.md and you want to include it in some pages of the site course without rendering content-fragment.md as a page.

                                  C:/course/ +

                                  Else, if each page is included individually, there is no need to exclude the fragments as they will not be included in the page generation.

                                  Example Suppose you have a fragment file content-fragment.md and you want to include it in some pages of the site course without rendering content-fragment.md as a page.

                                  C:/course/ β”œβ”€β”€ content-fragment.md β”œβ”€β”€ index.md β”œβ”€β”€ reading.md └── site.json

                                  In reading.md (note how it reuses content from the content-fragment.md):

                                  # Week 1 Reading:
 <include src="content-fragment.md" />
-

                                  -You may use any custom name you wish for your fragments but be sure to update the pagesExclude list with the appropriate glob pattern.

                                  Using Boilerplate Files

                                  If you find yourself duplicating a 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/ +

                                  +You may use any custom name you wish for your fragments but be sure to update the pagesExclude list with the appropriate glob pattern.

                                  Using Boilerplate Files

                                  If you find yourself duplicating a 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 @@ -429,7 +431,7 @@

                                  The book.md:

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

                                  -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>
+

                                  +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>
-

                                  Hiding some info in the generated content

                                  To permanently hide a fragment from the reader:

                                  <span class="d-none">
+

                                  MarkBind also comes with some built-in optimizations for printing by default:

                                  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 */
 }
-

                                  Deploying a page multiple times with different titles

                                  By overriding the title declared in the frontmatter of the page using site.json, it is possible to allow MarkBind to serve the same page with different titles.

                                  This may especially be useful for users who are serving a page from a submodule.

                                  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


                                  +

                                  Deploying a page multiple times with different titles

                                  By overriding the title declared in the frontmatter of the page using site.json, it is possible to allow MarkBind to serve the same page with different titles.

                                  This may especially be useful for users who are serving a page from a submodule.

                                  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


                                  @@ -15,9 +15,9 @@ const baseUrl = '' -

                                  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


                                  +

                                  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


                                  @@ -15,9 +15,9 @@ const baseUrl = '' -

                                  site.json File

                                  The site.json file is used to configure various aspects of a MarkBind website.

                                  Here is a typical site.json file:

                                  {
   "baseUrl": "/myproduct",
@@ -90,7 +90,7 @@
   },
   "plantumlCheck": true
 }
-

                                  baseUrl

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

                                  If you are deploying 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.

                                  titleSuffix

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

                                  style

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

                                  baseUrl

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

                                  If you are deploying 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.

                                  titleSuffix

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

                                  style

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

                                  pages

                                  An array of pages to be rendered.

                                  Page properties that are defined in site.json for a particular page will override those defined in the frontmatter of the page. For example, if we declare a title within the frontmatter of the page (say index.md) like such:

                                  <frontmatter>
-  title: Hello World
-</frontmatter>
-

                                  But the title property in the corresponding site.json is set as such:

                                  {
-  "pages": [
-    {
-      "src": "index.md",
-      "title": "Landing Page",
-    }
-  ],
-}
-

                                  But the title property in the corresponding site.json is set as such:

                                  {
+  "pages": [
+    {
+      "src": "index.md",
+      "title": "Landing Page",
+    }
+  ],
+}
+

                                  Then, the title of index.md will be set as "Landing Page" instead of "Hello World".

                                  In this manner, setting the property title in site.json will always override the title declared within the frontmatter 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"
-    }
-  ],
-}
-

                                  Then, the title of index.md will be set as "Landing Page" instead of "Hello World".

                                  In this manner, setting the property title in site.json will always override the title declared within the frontmatter 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
-}
-

                                  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
+}
+

                                  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. +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:

                                  +
                                  - - - - - - - - -

                                  Syntax Cheat Sheet

                                  Annotations 
                                  <annotate src="../../images/annotateSampleImage.png" width="500" alt="Sample Image">
-  <a-point x="25%" y="25%" content="Lorem ipsum dolor sit amet" />
-  <a-point x="50%" y="25%" content="Lorem ipsum dolor sit amet" label="1a"/>
-  <a-point x="50%" y="25%" content="Lorem ipsum dolor sit amet" label="1b" legend="both"/>
-</annotate>
-
                                  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 bg-primary">Primary</span>
-<span class="badge rounded-pill bg-success">Success</span>
-<button type="button" class="btn btn-primary">
-  Difficulty Level <span class="badge bg-light text-dark">4</span>
-</button>
-
                                  Blockquotes 
                                  > Blockquote, first paragraph
->
-> Second paragraph
->> Nested blockquote
-
                                  Boxes 
                                  <box type="warning">
-  warning
-</box>
-
                                  Breadcrumbs 
                                  <breadcrumb />
-
                                  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: :) :/ :D
-
                                  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.
-
                                  Frontmatter 
                                  <frontmatter>
-  title: Binary Search Tree
-  pageNav: 2
-</frontmatter>
-
                                  Headings 
                                  ### Heading level 3
-...
-###### Heading level 6
-
                                  Horizontal Rules 
                                  *****
------
-______________
-
                                  Icons

                                  :glyphicon-hand-right: :fa-brands-github: :fa-solid-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>
-
-
                                  Fill-in-the-Blanks questions
                                  
-<question type="blanks" hint="Google it!">
-
-  ##### German sociologist __________ called the process of simultaneously analyzing the behavior of individuals and the society that shapes that behavior __________.
-
-  <q-option keywords="Norbert Elias, Elias" reason="That's his name!"></q-option>
-  <q-option keywords="figuration"></q-option>
-</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="blanks">...</question>
-  <question type="text">...</question>
-</quiz>
-
                                  Scroll To Top Button 
                                  <scroll-top-button
-    icon=":fas-arrow-circle-up:"
-    icon-size="2x"
-    bottom="2%"
-    right="2%"
-></scroll-top-button>
-
                                  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.
-
                                  Tree 
                                  <tree>
-C:/course/
-  textbook/
-    index.md
-  index.md
-  reading.md
-  site.json
-</tree>
-
                                  Variables

                                  Global variables:

                                  _markbind/variables.md:

                                  <variable name="year">2018</variable>
-

                                  The year was {{ year }}.

                                  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. Inline 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 deleted file mode 100644 index 8e3862e..0000000 --- a/userGuide/syntaxCheatSheet.page-vue-render.js +++ /dev/null @@ -1,22 +0,0 @@ - - var pageVueRenderFn = function anonymous( -) { -with(this){return _c('div',{attrs:{"id":"app"}},[_c('header',{attrs:{"sticky":""}},[_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 environment--combined"}},[_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',{attrs:{"id":"site-nav","tag-name":"nav","to":"site-nav"}},[_c('div',{staticClass:"site-nav-top"},[_c('div',{staticClass:"fw-bold mb-2",staticStyle:{"font-size":"1.25rem"}},[_v("\n User Guide\n ")])]),_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"}},[_v("Getting Started")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_v("Authoring Contents \n\n"),_c('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.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('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.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)"}},[_v("Working with Sites \n\n"),_c('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.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-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/redirectingToACustom404Page.html"}},[_v("Redirecting to a Custom 404 Page")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingNavigationButtons.html"}},[_v("Adding Navigation Buttons")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/templates.html"}},[_v("Templates")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_v("References \n\n"),_c('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.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/gitignoreFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".gitignore")]),_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/troubleshooting.html"}},[_v("Troubleshooting")])])]),_v(" "),_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',{attrs:{"id":"content-wrapper"}},[_c('breadcrumb'),_v(" "),_m(0),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Annotations")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("\n")]),_c('span',[_v(" \n")]),_c('span',[_v(" \n")]),_c('span',[_v(" \n")]),_c('span',[_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"annotations"}},[_v("Annotations"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#annotations","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("An "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("annotate")]),_v(" component allows you to easily annotate over any images.")])]),_v(" "),_c('p',[_v("Annotate wrappers ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(") are used in conjunction with Annotate\nPoints ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(").")]),_v(" "),_c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(": Annotate wrappers are used to hold the image and set its width and height.")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(": Annotate points define the position, text and style of each point within the image. Insert them between the Annotate wrappers.")])]),_v(" "),_c('p',[_v("The x and y coordinates of each Annotate Point are relative to the image and are written in percentage of total width or height.")]),_v(" "),_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("annotate")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../../images/annotateSampleImage.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"500\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sample Image\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This point is 25% from the left and 25% from the top\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This point is 50% from the left and 25% from the top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"60\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"75%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This point is 75% from the left and 25% from the top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This has a header\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This point is 25% from the left and 50% from the top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"red\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This point is 50% from the left and 50% from the top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("opacity")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"0.7\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"75%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This point is 25% from the left and 75% from the top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("label")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"1\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"75%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This point is 50% from the left and 75% from the top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("textColor")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"white\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"black\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("label")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"2\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("opacity")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"1\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"75%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"75%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This point is 75% from the left and 75% from the top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fontSize")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"30\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("label")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"3\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"75%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This point is 75% from the left and 50% from the 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("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge bg-primary\"")]),_v(">")]),_v("Badge label"),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('annotate',{attrs:{"src":"../../images/annotateSampleImage.png","width":"500","alt":"Sample Image"}},[_c('a-point',{attrs:{"x":"25%","y":"25%"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("This point is 25% from the left and 25% from the top")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"25%","size":"60"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("This point is 50% from the left and 25% from the top")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"25%"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This has a header")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("This point is 75% from the left and 25% from the top")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"25%","y":"50%","color":"red"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("This point is 25% from the left and 50% from the top")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"50%","opacity":"0.7"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("This point is 50% from the left and 50% from the top")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"25%","y":"75%"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("1")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("This point is 25% from the left and 75% from the top")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"75%","textColor":"white","color":"black","opacity":"1"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("2")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("This point is 50% from the left and 75% from the top")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"75%","fontSize":"30"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("3")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("This point is 75% from the left and 75% from the top")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"50%"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("This point is 75% from the left and 50% from the top")])]},proxy:true}])},[_v(" "),_c('span',{staticClass:"badge bg-primary"},[_v("Badge label")])])],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Use markdown in the header, label and content")])]),_v(" "),_c('p',[_v("Annotate Points supports markdown in the header, label and content.")]),_v(" "),_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("annotate")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../../images/annotateSampleImage.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"500\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sample Image\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"# Content\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":blush:\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"75%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("label")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":heart:\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('annotate',{attrs:{"src":"../../images/annotateSampleImage.png","width":"500","alt":"Sample Image"}},[_c('a-point',{attrs:{"x":"25%","y":"25%"},scopedSlots:_u([{key:"content",fn:function(){return [_c('h1',{attrs:{"id":"content"}},[_v("Content"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#content","onclick":"event.stopPropagation()"}})])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"25%"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("😊")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"25%"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("❀️")])]},proxy:true}])})],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Customising shapes for Annotate Point")]),_v(" "),_c('br')]),_v(" "),_c('p',[_v("Annotate Points supports different shapes and customisation.")]),_v(" "),_c('p',[_v("The default shape used is a rounded button.")]),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_v("\nWhen using a customised shape, the options shape, color and opacity will not work. \n"),_c('p',[_v("Style the shape to achieve the same effect.")])]),_v(" "),_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(" \n")]),_c('span',[_v(" Badge label\n")]),_c('span',[_v(" \n")]),_c('span',[_v(" \n")]),_c('span',[_v(" \n")]),_c('span',[_v(" \n")]),_c('span',[_v(" \n")]),_c('span',[_v(" \n")]),_c('span',[_v("
                                  Custom
                                  \n")]),_c('span',[_v("                                   \n")]),_c('span',[_v("                                  \n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('annotate',{attrs:{"src":"../../images/annotateSampleImage.png","width":"500","alt":"Sample Image"}},[_c('a-point',{attrs:{"x":"75%","y":"50%"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("This point is 75% from the left and 50% from the top")])]},proxy:true}])},[_v(" "),_c('span',{staticClass:"badge bg-primary"},[_v("Badge label")])]),_v(" "),_c('a-point',{attrs:{"x":"25%","y":"50%"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("This point is 25% from the left and 50% from the top")])]},proxy:true}])},[_v(" "),_c('pic',{attrs:{"src":"/images/deer.jpg","width":"50","height":"50"}})],1),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"50%"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("This point is 25% from the left and 50% from the top")])]},proxy:true}])},[_v(" "),_c('div',{staticStyle:{"opacity":"90%","color":"red"}},[_v("Custom")])])],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Using triggers and positions for Annotate Point")]),_v(" "),_c('br')]),_v(" "),_c('p',[_v("Similar to "),_c('strong',[_c('a',{attrs:{"href":"/userGuide/components/popups.html#popovers"}},[_v("popovers")])]),_v(", Annotate Points also support different types of triggers and positions\nfor users with different needs.")]),_v(" "),_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("annotate")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../../images/annotateSampleImage.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"500\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sample Image\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"33%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"33%\"")]),_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(" />")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"66%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"33%\"")]),_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("trigger")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hover focus\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"66%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Popover on the left\"")]),_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("a-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"66%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Popover on the bottom\"")]),_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("a-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"75%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"66%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Popover on the right\"")]),_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-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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"66%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Popover on the bottom\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"bottom\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trigger")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hover focus\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('annotate',{attrs:{"src":"../../images/annotateSampleImage.png","width":"500","alt":"Sample Image"}},[_c('a-point',{attrs:{"x":"33%","y":"33%"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("Lorem ipsum dolor sit amet")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"66%","y":"33%","trigger":"hover focus"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("Lorem ipsum dolor sit amet")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"25%","y":"66%","placement":"left"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("Popover on the left")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"66%","placement":"bottom"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("Popover on the bottom")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"66%","placement":"right"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("Popover on the right")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"66%","placement":"bottom","trigger":"hover focus"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("Popover on the bottom")])]},proxy:true}])})],1)],1)],1)]),_v(" "),_c('br'),_v(" "),_c('p',[_c('strong',[_v("Displaying content as legends in Annotate Point")])]),_v(" "),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" allows users to display its content "),_c('span',{staticClass:"underline"},[_v("inside a popover")]),_v(" or "),_c('span',{staticClass:"underline"},[_v("as a legend below the diagram")]),_v(" or "),_c('span',{staticClass:"underline"},[_v("both")]),_v(". However, the label attribute must be specified in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" in order to display the content 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":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("annotate")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../../images/annotateSampleImage.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"500\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sample Image\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"There is only text when you click me\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("label")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"1\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Clicking on this does nothing\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("label")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"2\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("legend")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"bottom\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Headers are displayed as well\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"75%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"There is text at both locations\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("label")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"3\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("legend")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"both\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Headers are displayed at both positions\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('annotate',{attrs:{"src":"../../images/annotateSampleImage.png","width":"500","alt":"Sample Image"}},[_c('a-point',{attrs:{"x":"25%","y":"50%"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("1")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("There is only text when you click me")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"50%","legend":"bottom"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("2")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Headers are displayed as well")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("Clicking on this does nothing")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"50%","legend":"both"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("3")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Headers are displayed at both positions")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("There is text at both locations")])]},proxy:true}])})],1)],1)],1)]),_v(" "),_c('br'),_v(" "),_c('p',[_c('strong',[_v("Sample use cases for Annotate")]),_v(" "),_c('br')]),_v(" "),_c('p',[_v("Here we showcase some use cases of the Annotate feature.")]),_v(" "),_c('p',[_c('strong',[_v("Example 1: Describing elements in an image")]),_v(" "),_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":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("annotate")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../../images/annotateSampleObject.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("height")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"500\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sample Image\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"6%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"You can use a triangle and a solid line (not to be confused with an arrow) to indicate class inheritance.\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("label")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"1\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Class inheritance\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("legend")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"both\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25.5%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"UML uses a solid diamond symbol to denote composition.\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("label")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"2\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Composition\"")]),_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("legend")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"both\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"45%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"UML uses a hollow diamond to indicate an aggregation.\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("label")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"3\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Aggregation\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"blue\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("legend")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"both\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"64.5%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Association labels describe the meaning of the association.\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("label")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"4\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Association labels\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"yellow\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("legend")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"both\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('annotate',{attrs:{"src":"../../images/annotateSampleObject.png","height":"500","alt":"Sample Image"}},[_c('a-point',{attrs:{"x":"6%","y":"50%","legend":"both"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("1")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Class inheritance")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("You can use a triangle and a solid line (not to be confused with an arrow) to indicate class inheritance.")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"25.5%","y":"50%","color":"red","legend":"both"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("2")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Composition")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("UML uses a solid diamond symbol to denote composition.")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"45%","y":"50%","color":"blue","legend":"both"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("3")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Aggregation")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("UML uses a hollow diamond to indicate an aggregation.")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"64.5%","y":"50%","color":"yellow","legend":"both"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("4")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Association labels")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("Association labels describe the meaning of the association.")])]},proxy:true}])})],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Example 2: Drawing over elements")]),_v(" "),_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":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("annotate")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../../images/annotateSampleSequence.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("height")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"500\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sample Image\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"35%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"18.5%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Operation is invoked\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Operation\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("opacity")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"0.2\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"30\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"65%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This is the period during which the method is being executed\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Activation Bar\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("opacity")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"0.3\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"yellow\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"14%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"85%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Return control and possibly some return value\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Return Value\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("opacity")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"0.2\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"30\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"blue\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('annotate',{attrs:{"src":"../../images/annotateSampleSequence.png","height":"500","alt":"Sample Image"}},[_c('a-point',{attrs:{"x":"35%","y":"18.5%","opacity":"0.2","size":"30"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Operation")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("Operation is invoked")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"65%","y":"50%","opacity":"0.3","size":"50","color":"yellow"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Activation Bar")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("This is the period during which the method is being executed")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"14%","y":"85%","opacity":"0.2","size":"30","color":"blue"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Return Value")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("Return control and possibly some return value")])]},proxy:true}])})],1)],1)],1)]),_v(" "),_c('br'),_v(" "),_c('p',[_c('strong',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_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("x")]),_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 x-coordinate of the point."),_c('br'),_v("Supports range of values from "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0%")]),_v(" to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("100%")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("y")]),_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 y-coordinate of the point."),_c('br'),_v("Supports range of values from "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0%")]),_v(" to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("100%")]),_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("Annotate Point content."),_c('br'),_v("The annotation content will be omitted if this is not provided.")])]),_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("Annotate Point header."),_c('br'),_v("The header will be omitted if this is not provided.")])]),_v(" "),_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("click")])]),_v(" "),_c('td',[_v("Popover trigger type."),_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(", or any space-separated combination of these.")])]),_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("Position of 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(".")])]),_v(" "),_c('tr',[_c('td',[_v("label")]),_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 label shown on the point itself."),_c('br'),_v("The label will be omitted if this is not provided."),_c('br'),_v("Note that labels should not be too long as they might overflow out of the point.")])]),_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',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("'40'")])]),_v(" "),_c('td',[_v("The size of the point in pixels. "),_c('br'),_v(" Does not work with customised shapes")])]),_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("'green'")])]),_v(" "),_c('td',[_v("The color of the point."),_c('br'),_v("Supports any color in the CSS color format. E.g. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("red")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("#ffffff")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("rgb(66, 135, 245)")]),_v(", etc. "),_c('br'),_v(" Does not work with customised shapes")])]),_v(" "),_c('tr',[_c('td',[_v("opacity")]),_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("'0.3'")])]),_v(" "),_c('td',[_v("The opacity of the point."),_c('br'),_v("Supports range of values from "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0")]),_v(" to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("1")]),_v(". "),_c('br'),_v(" Does not work with customised shapes")])]),_v(" "),_c('tr',[_c('td',[_v("fontSize")]),_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("'14'")])]),_v(" "),_c('td',[_v("The font size of the label."),_c('br'),_v("Supports any pixel size smaller than size of the point.")])]),_v(" "),_c('tr',[_c('td',[_v("textColor")]),_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("'black'")])]),_v(" "),_c('td',[_v("The color of the label."),_c('br'),_v("Supports any color in the CSS color format. E.g. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("red")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("#ffffff")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("rgb(66, 135, 245)")]),_v(", etc.")])]),_v(" "),_c('tr',[_c('td',[_v("legend")]),_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("'popover'")])]),_v(" "),_c('td',[_v("The position of the Annotate Point content and header."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("popover")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bottom")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("both")]),_v(".")])])])])]),_c('p',[_c('strong',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" Options")])])]),_v(" "),_c('p',[_v("This is effectively the same as the options used for the "),_c('a',{attrs:{"href":"#pictures"}},[_v("picture")]),_v(" component.")]),_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("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("height")]),_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 height of the image in pixels.")])]),_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',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_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('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("\n")]),_c('span',[_v(" \n")]),_c('span',[_v(" \n")]),_c('span',[_v(" \n")]),_c('span',[_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('annotate',{attrs:{"src":"https://markbind.org/userGuide/diagrams/object.png","height":"500","alt":"Sample Image"}},[_c('a-point',{attrs:{"x":"6%","y":"50%"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("1")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Class inheritance")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("You can use a triangle and a solid line (not to be confused with an arrow) to indicate class inheritance.")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"25.5%","y":"50%","color":"red"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("2")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Composition")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("UML uses a solid diamond symbol to denote composition.")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"45%","y":"50%","color":"blue"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("3")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Aggregation")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("UML uses a hollow diamond to indicate an aggregation.")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"64.5%","y":"50%","color":"yellow"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("4")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Association labels")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("Association labels describe the meaning of the association.")])]},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("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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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"}},[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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"}},[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{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('div',{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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_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('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 bg-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 rounded-pill bg-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 bg-light text-dark\"")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"badges"}},[_v("Badges"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#badges","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Example:")])]),_v(" "),_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("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge bg-primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v("Some Plain Text\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(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge bg-primary\"")]),_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("_Some Markdown_"),_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:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{staticClass:"badge bg-primary"},[_v("\nSome Plain Text\n")]),_v(" "),_c('span',{staticClass:"badge bg-primary"},[_c('span',[_c('em',[_v("Some Markdown")])])])])],1)]),_v(" "),_c('p',[_c('strong',[_v("You can choose from a variety of colors for your badges. You can also use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("rounded-pill")]),_v(" class to make the badges pill-shaped.")])]),_v(" "),_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',[_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 bg-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 bg-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 bg-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 bg-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 bg-warning text-dark\"")]),_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 bg-info text-dark\"")]),_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 bg-light text-dark\"")]),_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 bg-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 rounded-pill bg-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 rounded-pill bg-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 rounded-pill bg-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 rounded-pill bg-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 rounded-pill bg-warning text-dark\"")]),_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 rounded-pill bg-info text-dark\"")]),_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 rounded-pill bg-light text-dark\"")]),_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 rounded-pill bg-dark\"")]),_v(">")]),_v("Dark"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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 bg-primary"},[_v("Primary")]),_v(" "),_c('span',{staticClass:"badge bg-secondary"},[_v("Secondary")]),_v(" "),_c('span',{staticClass:"badge bg-success"},[_v("Success")]),_v(" "),_c('span',{staticClass:"badge bg-danger"},[_v("Danger")]),_v(" "),_c('span',{staticClass:"badge bg-warning text-dark"},[_v("Warning")]),_v(" "),_c('span',{staticClass:"badge bg-info text-dark"},[_v("Info")]),_v(" "),_c('span',{staticClass:"badge bg-light text-dark"},[_v("Light")]),_v(" "),_c('span',{staticClass:"badge bg-dark"},[_v("Dark")]),_v(" "),_c('br'),_v("Pills:\n"),_c('span',{staticClass:"badge rounded-pill bg-primary"},[_v("Primary")]),_v(" "),_c('span',{staticClass:"badge rounded-pill bg-secondary"},[_v("Secondary")]),_v(" "),_c('span',{staticClass:"badge rounded-pill bg-success"},[_v("Success")]),_v(" "),_c('span',{staticClass:"badge rounded-pill bg-danger"},[_v("Danger")]),_v(" "),_c('span',{staticClass:"badge rounded-pill bg-warning text-dark"},[_v("Warning")]),_v(" "),_c('span',{staticClass:"badge rounded-pill bg-info text-dark"},[_v("Info")]),_v(" "),_c('span',{staticClass:"badge rounded-pill bg-light text-dark"},[_v("Light")]),_v(" "),_c('span',{staticClass:"badge rounded-pill bg-dark"},[_v("Dark")])])])],1)]),_v(" "),_c('p',[_c('strong',[_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":"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 bg-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 rounded-pill bg-warning text-dark\"")]),_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 bg-light text-dark\"")]),_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 bg-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 rounded-pill bg-success\"")]),_v(">")]),_v("stable"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" {.no-index}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("Links:\n"),_c('a',{staticClass:"badge bg-primary",attrs:{"href":"#"}},[_v("Primary")]),_v(" "),_c('a',{staticClass:"badge rounded-pill bg-warning text-dark",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 bg-light text-dark"},[_v("4")])])]),_v(" "),_c('p',[_v("Headings:")]),_v(" "),_c('h3',{staticClass:"no-index",attrs:{"id":"feature-x-beta"}},[_v("Feature X "),_c('span',{staticClass:"badge bg-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"}},[_v("Feature Y "),_c('span',{staticClass:"badge rounded-pill bg-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/5.1/components/badge/"}},[_v("Bootstrap documentation")]),_v(" to find more information about Badges.")])])]),_v(" "),_c('div',{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 bg-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 rounded-pill bg-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 bg-light text-dark\"")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_c('span',{staticClass:"badge bg-primary"},[_v("Primary")]),_v(" "),_c('span',{staticClass:"badge rounded-pill bg-success"},[_v("Success")]),_v(" "),_c('button',{staticClass:"btn btn-primary",attrs:{"type":"button"}},[_v("\nDifficulty Level "),_c('span',{staticClass:"badge bg-light text-dark"},[_v("4")])])]),_v(" "),_c('h5',{staticClass:"no-index",attrs:{"id":"feature-y-stable-2"}},[_v("Feature Y "),_c('span',{staticClass:"badge rounded-pill bg-warning text-dark"},[_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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")])])])])])])]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"boxes"}},[_v("Boxes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#boxes","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Simple Example")])]),_v(" "),_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("box")]),_v(">")]),_v("\n")]),_c('span',[_v("plain text\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(">")]),_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("_markdown_"),_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:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("\nplain text\n")]),_v(" "),_c('box',[_c('span',[_c('em',[_v("markdown")])])])],1)],1)]),_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":"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(" 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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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"}},[_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":"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("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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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"}},[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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"}},[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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-background")]),_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("background-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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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("Breadcrumbs")])]),_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("breadcrumb")]),_v(" />")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"breadcrumbs"}},[_v("Breadcrumbs"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#breadcrumbs","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Breadcrumb components provide an easy way for readers to navigate the hierarchy of the site.")]),_v(" "),_c('h4',{attrs:{"id":"usage"}},[_v("Usage"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#usage","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Simply include the breadcrumb component ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(") into the page you want and breadcrumbs for that page will be automatically generated.")]),_v(" "),_c('p',[_v("You can also insert the breadcrumb component into a layout file to generate breadcrumbs for all pages using that layout.")]),_v(" "),_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("breadcrumb")]),_v(" />")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('blockquote',[_c('breadcrumb')],1)]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_v("\n Breadcrumb components refer to the Site Navigation for the hierarchy of pages.\n"),_c('p',[_c('strong',[_v("Breadcrumbs will not appear if there is no Site Navigation present on the page!")])])]),_v(" "),_c('div',{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("breadcrumb")]),_v(" />")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('breadcrumb')],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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("`goo`{.xml}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"code"}},[_v("Code"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#code","onclick":"event.stopPropagation()"}})]),_v(" "),_c('h4',{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 "),_c('trigger',{attrs:{"for":"modal:code-dark-example","trigger":"click"}},[_c('em',[_v("(click for an example)")])]),_v(".")],1),_v(" "),_c('modal',{attrs:{"id":"modal:code-dark-example"},scopedSlots:_u([{key:"header",fn:function(){return [_v("Dark Code Theme")]},proxy:true}])},[_v(" "),_c('p',[_c('pic',{attrs:{"src":"/images/codeDarkTheme.png","alt":"Theme example"}})],1)]),_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"}},[_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"}},[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])],1)])]),_v(" "),_c('h5',{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 "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("Line numbers were provided by default in version v3.1.1 and below. To preserve the exact line numbers behavior of sites generated in previous versions, simply set the codeLineNumbers option in site.json to true")]},proxy:true}])},[_v("hidden by default")]),_v(". To enable line numbers for the entire site by default,\nadd "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"codeLineNumbers\": true")]),_v(" to the "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#style"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")])]),_v(" file:")],1),_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-comment"}},[_v("// ...")]),_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(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"codeLineNumbers\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-literal"}},[_v("true")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// optional, false if omitted")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// code below omitted for brevity")]),_v("\n")]),_c('span',[_v("}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_c('p',[_v("For each code block, you may also use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("line-numbers")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-line-numbers")]),_v(" classes to override the site-wide setting as such:")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```xml {.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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])],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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"line-numbers 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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])],1)]),_v(" "),_c('h5',{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 examples\nbelow for a visual demonstration of all the possible ways of highlighting a code block.")]),_v(" "),_c('p',[_c('strong',[_v("Full text highlight")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```js {start-from=6 .line-numbers highlight-lines=\"7, 9\"}")]),_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(" const sum = a + b;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" console.log(`${a} + ${b} = ${sum}`);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return sum;")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"line-numbers hljs js","style":"counter-reset: line 5;"}},[_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":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("const")]),_v(" sum = a + b;")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-built_in"}},[_v("console")]),_v(".log("),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("`"),_c('span',{pre:true,attrs:{"class":"hljs-subst"}},[_v("${a}")]),_v(" + "),_c('span',{pre:true,attrs:{"class":"hljs-subst"}},[_v("${b}")]),_v(" = "),_c('span',{pre:true,attrs:{"class":"hljs-subst"}},[_v("${sum}")]),_v("`")]),_v(");\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" sum;")]),_v("\n")]),_c('span',[_v("}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])],1)]),_v(" "),_c('p',[_c('strong',[_v("Substring highlight")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```js {.line-numbers highlight-lines=\"1['function'], 2['a'], 2['b'], 4['diff']\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("function subtract(a, b) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" const diff = a - b;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" console.log(`${a} + ${b} = ${diff}`);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return diff;")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"line-numbers hljs js"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword highlighted"}},[_v("function")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("subtract")]),_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("const")]),_c('span',[_v(" diff = "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("a")]),_c('span',[_v(" - "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("b")]),_v(";\n")])])]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-built_in"}},[_v("console")]),_v(".log("),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("`"),_c('span',{pre:true,attrs:{"class":"hljs-subst"}},[_v("${a}")]),_v(" + "),_c('span',{pre:true,attrs:{"class":"hljs-subst"}},[_v("${b}")]),_v(" = "),_c('span',{pre:true,attrs:{"class":"hljs-subst"}},[_v("${diff}")]),_v("`")]),_v(");\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("diff")]),_v(";\n")])]),_c('span',[_v("}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])],1)]),_v(" "),_c('p',[_c('strong',[_v("Character-bounded highlight")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```js {.line-numbers highlight-lines=\"1[0:3], 1[6:10], 2[5:], 3[:6]\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("function multiply(a, b) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" const product = a * b;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" console.log('Product = ${product}');")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return product;")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"line-numbers hljs js"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("fun")]),_c('span',[_v("cti"),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("on")])])])]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")]),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("m")]),_v("ultiply")])]),_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("const")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" product = a * b;")]),_v("\n")])]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-built_in"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("consol")]),_v("e")])]),_v(".log("),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'Product = ${product}'")]),_v(");\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" product;\n")]),_c('span',[_v("}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])],1)]),_v(" "),_c('p',[_c('strong',[_v("Word-bounded highlight")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```js {.line-numbers highlight-lines=\"1[1::3], 1[5::7], 2[2::], 3[::3]\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("// Function returns the distance travelled assuming constant speed")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("function calculateDistance(speed, time) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" const distance = speed * time;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" console.log(`Distance travelled = ${distance}`);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return distance;")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"line-numbers hljs js"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_c('span',[_v("// "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("Function returns")]),_c('span',[_v(" the distance "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("travelled assuming")]),_v(" constant speed")])])]),_v("\n")]),_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("calculateDistance")]),_v("("),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_c('span',[_v("speed, "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("time")])])]),_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":"hljs-keyword highlighted"}},[_v("const")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" distance =")]),_v(" speed * time;\n")])]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-built_in"}},[_v("console")]),_v(".log("),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("`Distance travelled = "),_c('span',{pre:true,attrs:{"class":"hljs-subst"}},[_v("${distance}")]),_v("`")]),_v(");\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" distance;\n")]),_c('span',[_v("}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])],1)]),_v(" "),_c('p',[_c('strong',[_v("Full-line highlight")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```js {start-from=10 .line-numbers highlight-lines=\"11[:]\"}")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"line-numbers hljs js","style":"counter-reset: line 9;"}},[_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',{pre:true,attrs:{"class":"highlighted"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" a + b;\n")]),_c('span',[_v("}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])],1)]),_v(" "),_c('p',[_c('strong',[_v("Sample Combined Usage")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```java {.line-numbers highlight-lines=\"1[:],3['Inventory'],3[4::6],4['It\\'s designed'],5,6[8:15],6[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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"line-numbers 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")]),_c('span',[_v(" is a "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("class that")]),_v(" 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"),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" items;")]),_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 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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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"}},[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])])],1)]),_v(" "),_c('h5',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])])],1)]),_v(" "),_c('h5',{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"}},[_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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"}},[_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"}},[_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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"}},[_v("Inline Code"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#inline-code","onclick":"event.stopPropagation()"}})]),_v(" "),_c('h5',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("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('h5',{attrs:{"id":"displaying-content-within-curly-braces-content"}},[_v("Displaying content within curly braces: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{{ content }}")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#displaying-content-within-curly-braces-content","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("If your code contains 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 "),_c('a',{attrs:{"href":"/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 %} {{ content }} {% endraw %}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_c('div',{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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("`goo`{.xml}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])],1)])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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"}},[_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"}},[_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"}},[_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":"nunjucks-variables"}},[_v("Nunjucks variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#nunjucks-variables","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Dates can be supplied using "),_c('a',{attrs:{"href":"/userGuide/reusingContents.html#variables"}},[_v("Nunjucks variables")]),_v(" for convenience.")]),_v(" "),_c('p',[_v("Inside the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".md")]),_v(" file of a page:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("{% set date_pagevar = \"2020-03-06\" %}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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"}},[_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('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Token")]),_v(" "),_c('th',[_v("Output")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("D")]),_v(" "),_c('td',[_v("1")])]),_v(" "),_c('tr',[_c('td',[_v("Do")]),_v(" "),_c('td',[_v("1st")])]),_v(" "),_c('tr',[_c('td',[_v("DD")]),_v(" "),_c('td',[_v("01")])]),_v(" "),_c('tr',[_c('td',[_v("M")]),_v(" "),_c('td',[_v("1")])]),_v(" "),_c('tr',[_c('td',[_v("MM")]),_v(" "),_c('td',[_v("01")])]),_v(" "),_c('tr',[_c('td',[_v("MMM")]),_v(" "),_c('td',[_v("Jan")])]),_v(" "),_c('tr',[_c('td',[_v("MMMM")]),_v(" "),_c('td',[_v("January")])]),_v(" "),_c('tr',[_c('td',[_v("YY")]),_v(" "),_c('td',[_v("19")])]),_v(" "),_c('tr',[_c('td',[_v("YYYY")]),_v(" "),_c('td',[_v("2019")])])])])])]),_v(" "),_c('p',[_v("Full formatting reference available "),_c('a',{attrs:{"href":"https://day.js.org/docs/en/parse/string-format#list-of-all-available-parsing-tokens"}},[_v("here")]),_v(" and "),_c('a',{attrs:{"href":"https://day.js.org/docs/en/plugin/advanced-format"}},[_v("here")]),_v(".")]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_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('div',{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")])],1)],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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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',[_v("The following additional dependencies are involved when using this feature")]),_v(" "),_c('em',[_v("("),_c('strong',[_v("locally")]),_v(" and in your "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("E.g: Building & deploying the site via GitHub Actions")]},proxy:true}])},[_c('strong',[_v("CI/CD environment")])]),_v(")")],1)]),_v(" "),_c('ul',[_c('li',[_v("Java 8 or higher (required - to run the PlantUML JAR executable)")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.graphviz.org/download/"}},[_v("Graphviz")]),_v(" "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("Some versions are not recommended, as mentioned "),_c('a',{attrs:{"href":"https://plantuml.com/graphviz-dot#:~:text=Important%20note%20about%20version"}},[_v("here")])]},proxy:true}])},[_v("v2.38")]),_v(" or higher (optional - you don't need this if you are on Windows, or only need "),_c('a',{attrs:{"href":"https://plantuml.com/sequence-diagram"}},[_v("sequence diagrams")]),_v(" and "),_c('a',{attrs:{"href":"https://plantuml.com/activity-diagram-beta"}},[_v("activity (beta) diagrams")]),_v(")\n"),_c('ul',[_c('li',[_v("A warning will be displayed if you are using a non-Windows platform and don't have Graphviz installed. To disable this warning, you may modify your "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" like "),_c('trigger',{attrs:{"for":"pop:prerequisite-disable","placement":"bottom","trigger":"click"}},[_v("this")]),_v(".")],1),_v(" "),_c('li',[_v("An alternative layout engine, "),_c('a',{attrs:{"href":"https://plantuml.com/smetana02"}},[_v("Smetana")]),_v(", is integrated into PlantUML and can be used to generate diagrams without a Graphviz installation. However, as the Smetana engine is a work in progress, certain layouts may not render correctly.")])])],1)]),_v(" "),_c('modal',{attrs:{"id":"pop:prerequisite-disable","backdrop":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Disabling PlantUML's prerequisite check 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("\"plantumlCheck\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-literal"}},[_v("false")]),_v(",\n")]),_c('span',[_v("...\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])]),_v(" "),_c('panel',{attrs:{"minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Example: Installing the above dependencies in GitHub Actions")])]},proxy:true}])},[_v("\nThe following steps can be "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("Before the build step")]},proxy:true}])},[_v("added")]),_v(" in your workflow file to install Graphviz and Java in Ubuntu.\n"),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("action.yml")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"action.yml","class":"hljs yaml"}},[_c('span',[_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("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Install")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Graphviz")]),_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("sudo")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("apt-get")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("install")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("graphviz")]),_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("Java")]),_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-java@v3")]),_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("java-version:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'11'")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("distribution:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'temurin'")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])]),_c('p',[_v("See "),_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html#deploying-via-github-actions"}},[_v("Deploying via Github Actions")]),_v(" for more information.")])],1)],1),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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:{"width":"300","src":"/d630202036a147797be33619bbe2f07b.png"}})],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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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(" />")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"/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 plantuml.com/guide")])]),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("More examples")])]},proxy:true}])},[_v(" "),_c('div',{attrs:{"id":"puml-examples"}},[_c('p',[_c('strong',[_v("Sequence Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/sequence.png"}}),_v(" "),_c('p',[_c('strong',[_v("Use Case Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/usecase.png"}}),_v(" "),_c('p',[_c('strong',[_v("Class Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/class.png"}}),_v(" "),_c('p',[_c('strong',[_v("Activity Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/activity.png"}}),_v(" "),_c('p',[_c('strong',[_v("Component Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/component.png"}}),_v(" "),_c('p',[_c('strong',[_v("State Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/state.png"}}),_v(" "),_c('p',[_c('strong',[_v("Object Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/object.png"}}),_v(" "),_c('p',[_c('strong',[_v("Gantt Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/gantt.png"}}),_v(" "),_c('p',[_c('strong',[_v("Entity Relation Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/entityrelation.png"}}),_v(" "),_c('p',[_c('strong',[_v("Ditaa Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/ditaa.png"}}),_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."),_c('br'),_v("Avoid using the same name for different diagrams to prevent overwriting.")])]),_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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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"}}),_v(" "),_c('p',[_c('strong',[_v("Use Case Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/usecase.png"}}),_v(" "),_c('p',[_c('strong',[_v("Class Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/class.png"}}),_v(" "),_c('p',[_c('strong',[_v("Activity Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/activity.png"}}),_v(" "),_c('p',[_c('strong',[_v("Component Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/component.png"}}),_v(" "),_c('p',[_c('strong',[_v("State Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/state.png"}}),_v(" "),_c('p',[_c('strong',[_v("Object Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/object.png"}}),_v(" "),_c('p',[_c('strong',[_v("Gantt Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/gantt.png"}}),_v(" "),_c('p',[_c('strong',[_v("Entity Relation Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/entityrelation.png"}}),_v(" "),_c('p',[_c('strong',[_v("Ditaa Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/ditaa.png"}}),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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/5.1/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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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"}},[_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":"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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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",staticStyle:{"position":"relative","padding-bottom":"60.9375%"}},[_c('iframe',{attrs:{"type":"text/html","src":"//www.youtube.com/embed/v40b3ExbM0c","frameborder":"0","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"}},[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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-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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("Embedded YouTube video:")]),_v(" "),_c('div',{staticClass:"block-embed block-embed-service-youtube",staticStyle:{"position":"relative","padding-bottom":"60.9375%"}},[_c('iframe',{attrs:{"type":"text/html","src":"//www.youtube.com/embed/v40b3ExbM0c","frameborder":"0","webkitallowfullscreen":"","mozallowfullscreen":"","allowfullscreen":""}})]),_v(" "),_c('p',[_v("Embedded slide deck:")]),_v(" "),_c('div',{staticClass:"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: :) :/ :D\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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":"hljs markdown"}},[_c('span',[_v(":+1: :exclamation: :x: :construction: :) :/ :D\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("πŸ‘ ❗️ ❌ 🚧 πŸ˜ƒ πŸ˜• πŸ˜„")])])],1)])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" The list of supported "),_c('a',{attrs:{"href":"https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md"}},[_v("emoji")]),_v(" and "),_c('a',{attrs:{"href":"https://github.com/markdown-it/markdown-it-emoji/blob/master/lib/data/shortcuts.mjs"}},[_v("emoticon shortcuts")]),_v(".")])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v(":+1: :exclamation: :x: :construction: :) :/ :D\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("πŸ‘ ❗️ ❌ 🚧 πŸ˜ƒ πŸ˜• πŸ˜„")])])])])]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"footnotes"}},[_v("Footnotes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#footnotes","onclick":"event.stopPropagation()"}})]),_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":"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.^[Inline 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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("Normal footnotes:")]),_v("\nHere is a footnote reference,"),_c('trigger',{attrs:{"for":"pop:footnotefn-75-1"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-75-1"}},[_v("[1]")])])]),_v(" and another."),_c('trigger',{attrs:{"for":"pop:footnotefn-75-2"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-75-2"}},[_v("[2]")])])])],1),_v(" "),_c('p',[_c('strong',[_v("Inline footnotes:")]),_v("\nHere is an inline note."),_c('trigger',{attrs:{"for":"pop:footnotefn-75-3"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-75-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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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("Frontmatter")])]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"frontmatter"}},[_v("Frontmatter"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#frontmatter","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("You can use a "),_c('em',[_v("frontmatter")]),_v(" section to specify page properties such as the title and keywords of the page.")]),_v("\nTo specify frontmatter 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."),_c('br'),_v("\nYou can use YAML-style frontmatter syntax "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("---")]),_v(" as well.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('table',{staticStyle:{"width":"100%"}},[_c('tbody',[_c('tr',[_c('th',{staticStyle:{"width":"45%","padding-right":"5%"}},[_v("Frontmatter")]),_v(" "),_c('th',{staticStyle:{"width":"45%","padding-left":"5%"}},[_v("YAML-style Frontmatter Syntax")])]),_v(" "),_c('tr',[_c('td',{staticStyle:{"padding-right":"5%"}},[_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:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('td',{staticStyle:{"padding-left":"5%"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("---\n")]),_c('span',[_v(" property1: value1\n")]),_c('span',[_v(" property2: value2\n")]),_c('span',[_v("---\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])])])])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-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(".")]),_v(" "),_c('div',[_c('table',{staticStyle:{"width":"100%"}},[_c('tbody',[_c('tr',[_c('th',{staticStyle:{"width":"45%","padding-right":"5%"}},[_v("Frontmatter")]),_v(" "),_c('th',{staticStyle:{"width":"45%","padding-left":"5%"}},[_v("YAML-style Frontmatter Syntax")])]),_v(" "),_c('tr',[_c('td',{staticStyle:{"padding-right":"5%"}},[_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('td',{staticStyle:{"padding-left":"5%"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("---\n")]),_c('span',[_v(" title: Binary Search Tree\n")]),_c('span',[_v("---\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('box',{attrs:{"type":"warning","seamless":""}},[_c('p',[_v("If a page has multiple frontmatters, it will take the last frontmatter by default. You may make use of "),_c('a',{attrs:{"href":"/userGuide/reusingContents.html#includes"}},[_v("omitFrontmatter")]),_v(", which is an attribute of MarkBind's feature to omit the frontmatters that are not needed.")])]),_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',[_c('a',{attrs:{"href":"#pages"}},[_v("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 frontmatter of the page. For example, if we declare a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("title")]),_v(" within the frontmatter of the page (say "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("index.md")]),_v(") like such:")]),_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',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_c('p',[_v("But the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("title")]),_v(" property in the corresponding "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" is set as such:")]),_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("\"Landing Page\"")]),_v(",\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v("}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_c('p',[_v("Then, the title of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("index.md")]),_v(" will be set as \"Landing Page\" instead of \"Hello World\".")]),_v(" "),_c('p',[_v("In this manner, setting the property "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("title")]),_v(" in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" will always override the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("title")]),_v(" declared within the frontmatter of the page.")])])],1),_v(" "),_c('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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"}},[_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"}},[_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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('h3',{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"}},[_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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"}},[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{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 combination 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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{staticClass:"dashed thick-3"}),_v(" "),_c('hr',{staticClass:"double border-secondary"}),_v(" "),_c('hr',{staticClass:"dotted thick-1 border-primary"})])],1)]),_v(" "),_c('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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("fa-brands-github:")]),_v(" "),_c('code',{pre:true},[_v(":"),_c('span'),_v("fa-solid-home:")])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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 its cover! πŸ‘Ž")])]),_v(" "),_c('li',[_v("font icons: "),_c('span',{staticStyle:{"color":"purple"}},[_v("Don't judge the "),_c('span',{staticClass:"fa-solid fa-book",attrs:{"aria-hidden":"true"}}),_v(" by its cover! "),_c('span',{staticClass:"fas fa-thumbs-down",attrs:{"aria-hidden":"true"}})])])])])],1),_v(" "),_c('h6',{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('box',{attrs:{"type":"info","seamless":""}},[_c('p',[_v("MarkBind currently supports Version 6 of Font Awesome (Free plan). For detailed changes between versions, refer to "),_c('a',{attrs:{"href":"https://fontawesome.com/docs/web/setup/upgrade/whats-changed"}},[_v("Font Awesome's documentation")]),_v(".")])]),_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 two 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("fa-solid-")]),_v(") e.g., "),_c('span',{staticClass:"fa-solid 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("fa-solid-file-code")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Brands")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fa-brands-")]),_v("): e.g., "),_c('span',{staticClass:"fa-brands 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("fa-brands-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"}},[_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('div',{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("fa-brands-github:")]),_v(" "),_c('code',{pre:true},[_v(":"),_c('span'),_v("fa-solid-home:")])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fa-brands fa-github",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fa-solid 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:"fa-brands fa-github",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fa-solid 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:"fa-brands fa-github",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fa-solid fa-home",attrs:{"aria-hidden":"true"}})])])]),_v(" "),_c('h6',{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"}},[_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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":"hljs markdown"}},[_c('span',[_v("![](https://markbind.org/images/logo-lightbackground.png)\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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":"alt text here","title":"title here"}})])])]),_v(" "),_c('p',[_c('strong',[_v("Adjusting image dimension")])]),_v(" "),_c('p',[_v("MarkBind also supports the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("=Wx")]),_v(" shorthand for specifying image width:")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("This image has a width of 100px: ![](https://markbind.org/images/logo-lightbackground.png =100x)\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("This image has a width of 100px: "),_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":"","width":"100"}})])])])],1)]),_v(" "),_c('box',{attrs:{"type":"info"}},[_v("\n The width of images cannot exceed that of their parent container. If the specified width is too large, it will be ignored.\n")]),_v(" "),_c('p',[_v("MarkBind does not support setting the height of images through the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("=WxH")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("=xH")]),_v(" syntax. This is because images are automatically resized to ensure responsiveness based on their width.")]),_v(" "),_c('p',[_c('strong',[_v("Auto-linkify")])]),_v(" "),_c('p',[_v("MarkBind automatically wraps images with link to the image URL such that one can click on the image to view the full 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":"hljs markdown"}},[_c('span',[_v("Click on the image to open the image: !["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("logo")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org/images/logo-lightbackground.png =150x")]),_v(")\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("Click on the image to open the image: "),_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":"logo","width":"150"}})])])])],1)]),_v(" "),_c('p',[_v("If the image is wrapped with a link, the link will be used instead.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("Clicking on this image will bring you to the MarkBind homepage (instead of opening the image):\n")]),_c('span',[_v("["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("![logo")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org/images/logo-lightbackground.png =150x")]),_v(")]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org")]),_v(")\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("Clicking on this image will bring you to the MarkBind homepage (instead of opening the image):\n"),_c('a',{attrs:{"href":"https://markbind.org"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","alt":"logo","width":"150"}})])])])],1)])],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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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"}},[_v("Includes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#includes","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{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.")])]),_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-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.")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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(" tag with the matching "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(".")]),_v(" "),_c('box',{attrs:{"type":"important","seamless":""}},[_c('p',[_v("Choose "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<div>")]),_v(" over "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<span>")]),_v(" when wrapping block-level elements, to prevent invalid HTML markup which causes "),_c('a',{attrs:{"href":"https://vuejs.org/guide/scaling-up/ssr.html#hydration-mismatch"}},[_v("hydration issues")]),_v(".")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Including a fragment from a file:")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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('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("frontmatter")]),_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('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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("omitFrontmatter")])]),_v(" (optional): omit the frontmatter of the file/fragment from being included (if any)."),_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("omitFrontmatter")]),_v(" />")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])]),_v(" "),_c('h5',{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('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("i.e., the file containing the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")])]},proxy:true}])},[_v("host file")]),_v(" is included from another file.")],1)]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Suppose you have a MarkBind project with the following file structure.")]),_v(" "),_c('div',{staticClass:"tree"},[_v("C:/mySite/\nβ”œβ”€β”€ bookFiles/\nβ”‚ β”œβ”€β”€ book.md\nβ”‚ β”œβ”€β”€ chapter1.md\nβ”‚ └── chapter2.md\n└── reviewFiles/\n └── review.md\n")]),_v(" "),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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"}},[_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-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:")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-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:")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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.\nThis is to allow the outer context to adapt the reused content without changing its actual content.")]),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Preventing cyclical errors when using multiple includes with same variables")])]},proxy:true}])},[_v(" "),_c('p',[_v("Since outer variables override inner variables, this may result in errors if attempting to use an "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("include")]),_v(" within another "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("include")]),_v(" with the same variables.")]),_v(" "),_c('p',[_v("This is because the inner variable of the same name will be replaced with the outer variable, which contains the inner variable.\nThis inner variable is once again overridden to result in another inner variable and so on, causing a cyclical error.")]),_v(" "),_c('p',[_v("To fix this issue, do not use an inner "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("include")]),_v(" if they use the same variables.\nInstead, copy the content of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" file and replace the variables with the defined values.")]),_v(" "),_c('p',[_v("Example:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"line-numbers 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("\"boilerplate.md\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("boilerplate")]),_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("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_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("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"boilerplate.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("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"variable\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" VALUE_OF_VARIABLE\n")]),_c('span',[_v(" "),_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(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_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(">")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_c('p',[_v("The inner "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("variable")]),_v(" would be replaced by the outer "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("variable")]),_v(" resulting in a cyclical error:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"line-numbers 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("\"boilerplate.md\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("boilerplate")]),_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("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_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("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"boilerplate.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("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"variable\"")]),_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("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"boilerplate.md\"")]),_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("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"variable\"")]),_v(">")])]),_v("\n")]),_c('span',[_v(" "),_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-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_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("include")]),_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(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_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(">")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_c('p',[_v("To fix this problem, copy the content of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" file and replace the variables with the defined values as such:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"line-numbers 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("\"boilerplate.md\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("boilerplate")]),_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("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"variable\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("Boilerplate content: VALUE_OF_VARIABLE "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Replace {{ variable }} in boilerplate with VALUE_OF_VARIABLE -->")])]),_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(">")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('hr'),_v(" "),_c('h5',{attrs:{"id":"excluding-files-from-rendering-as-pages"}},[_v("Excluding Files from Rendering as Pages"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#excluding-files-from-rendering-as-pages","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("MarkBind supports the exclusion of files from page generation")]),_v(". For example, you can exclude files containing "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("A fragment is a piece of content that can be reused across multiple pages.")]},proxy:true}])},[_v("custom fragments")]),_v(" that are only meant to be used in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(".")],1),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Note: This example below is assuming that you have included the following glob pattern in the "),_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 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("\"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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_c('p',[_v("Else, if each page is included individually, there is no need to exclude the fragments as they will not be included in the page generation.")])]),_v(" "),_c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Suppose you have a fragment file "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("content-fragment.md")]),_v(" and you want to include it in some pages of the site "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("course")]),_v(" without rendering "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("content-fragment.md")]),_v(" as a page.")]),_v(" "),_c('div',{staticClass:"tree"},[_v("C:/course/\nβ”œβ”€β”€ content-fragment.md\nβ”œβ”€β”€ index.md\nβ”œβ”€β”€ reading.md\n└── site.json\n")]),_v(" "),_c('p',[_v("In "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("reading.md")]),_v(" (note how it reuses content from the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("content-fragment.md")]),_v("):")]),_v(" "),_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("\"content-fragment.md\"")]),_v(" />")])]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_c('p',[_v("In "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" we then exclude the fragment from the page generation with "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#pagesexclude"}},[_v("pagesExclude")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs json"}},[_c('span',[_v("...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pagesExclude\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**/*-fragment.md\"")]),_v("\n")]),_c('span',[_v("],\n")]),_c('span',[_v("...\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("\nYou may use any custom name you wish for your fragments but be sure to update the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pagesExclude")]),_v(" list with the appropriate glob pattern.")])])],1),_v(" "),_c('hr'),_v(" "),_c('h3',{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 yourself duplicating a "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("code that needs to stay relative to the directory in which it used")]},proxy:true}])},[_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.")],1),_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Suppose you have a MarkBind project with the following file structure.")]),_v(" "),_c('div',{staticClass:"tree"},[_v("C:/mySite/\nβ”œβ”€β”€ chapter1/\nβ”‚ β”œβ”€β”€ chapter.md\nβ”‚ β”œβ”€β”€ text.md\nβ”‚ └── exercises.md\nβ”œβ”€β”€ chapter2/\nβ”‚ β”œβ”€β”€ chapter.md\nβ”‚ β”œβ”€β”€ text.md\nβ”‚ └── exercises.md\n└── book.md\n")]),_v(" "),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-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(":")]),_v(" "),_c('div',{staticClass:"tree"},[_v("C:/mySite/\nβ”œβ”€β”€ _markbind/boilerplates/\nβ”‚ └── chapter.md\nβ”œβ”€β”€ chapter1/\nβ”‚ β”œβ”€β”€ text.md\nβ”‚ └── exercises.md\nβ”œβ”€β”€ chapter2/\nβ”‚ β”œβ”€β”€ text.md\nβ”‚ └── exercises.md\n└── book.md\n")]),_v(" "),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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(" even though there is no such file. MarkBind will use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter.md")]),_v(" file from "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("/_markbind/boilerplates/")]),_v(" but interpret it as if the file exists in the "),_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("chapter.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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-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:")]),_v(" "),_c('div',{staticClass:"tree"},[_v("C:/mySite/\n└── _markbind/boilerplates/\n └── book/\n └── chapter.md\n")]),_v(" "),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_c('p',[_c('span',{staticClass:"fas fa-arrow-down",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('box',[_c('p',[_c('span',{staticClass:"large"},[_c('strong',[_v("Developer Testing")])]),_c('br')]),_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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":"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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"autolinks"}},[_v("Autolinks"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#autolinks","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("A "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("with "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("http(s)://")]),_v(" head")]},proxy:true}])},[_v("URL")]),_v(" or an email address in plain text will be auto converted into clickable links.")],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":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**These will be converted:**")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("https://www.google.com\n")]),_c('span',[_v("\n")]),_c('span',[_v("https://markbind.org\n")]),_c('span',[_v("\n")]),_c('span',[_v("foobar@gmail.com\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**These will not be converted:**")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("google.com\n")]),_c('span',[_v("\n")]),_c('span',[_v("markbind.org\n")]),_c('span',[_v("\n")]),_c('span',[_v("foo@bar\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**Tricks to prevent autolink:**")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("`https://markbind.org`")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("https://"),_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":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(">")])]),_v("markbind.org\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("These will be converted:")])]),_v(" "),_c('p',[_c('a',{attrs:{"href":"https://www.google.com"}},[_v("https://www.google.com")])]),_v(" "),_c('p',[_c('a',{attrs:{"href":"https://markbind.org"}},[_v("https://markbind.org")])]),_v(" "),_c('p',[_c('a',{attrs:{"href":"mailto:foobar@gmail.com"}},[_v("foobar@gmail.com")])]),_v(" "),_c('p',[_c('strong',[_v("These will not be converted:")])]),_v(" "),_c('p',[_v("google.com")]),_v(" "),_c('p',[_v("markbind.org")]),_v(" "),_c('p',[_v("foo@bar")]),_v(" "),_c('p',[_c('strong',[_v("Tricks to prevent autolink:")])]),_v(" "),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("https://markbind.org")])]),_v(" "),_c('p',[_v("https://"),_c('span'),_v("markbind.org")])])],1)]),_v(" "),_c('h4',{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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-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)")])]),_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-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),_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-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(":")]),_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Assuming that we have the following folder structure:")]),_v(" "),_c('div',{staticClass:"tree"},[_v("C:\\course"),_c('br'),_v("\nβ”œβ”€β”€ textbook\\\nβ”‚ β”œβ”€β”€ subsite.md\nβ”‚ β”œβ”€β”€ image.png\nβ”‚ └── site.json\nβ”œβ”€β”€ index.md\n└── site.json\n")]),_v(" "),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-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}")])]),_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('modal',{attrs:{"id":"pop:global-intralink-disable","backdrop":""},scopedSlots:_u([{key:"header",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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])],1)],1)]),_v(" "),_c('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("MarkBind home is at "),_c('a',{attrs:{"href":"https://markbind.org"}},[_v("here")]),_v(".")])])])])]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("Customizing the Unordered list appearance:")])])]),_v(" "),_c('p',[_c('strong',[_v("To customize unordered lists' icons, add the configuration "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{icon=\"icon-name\"}")]),_v(" after a specific list item.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 1 { icon=\"glyphicon-education\" }\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 { icon=\"fas-file-code\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Item 2.2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 3 { icon=\"fas-code-branch\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Item 3.1 \n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 4 { icon=\"octicon-git-pull-request\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Item 4.1 { icon=\"mif-perm-media\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 5 { icon=\"glyphicon-education\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Item 5.1 { icon=\"notebook"),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_with_")]),_v("decorative"),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_cover\" }")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"glyphicon glyphicon-education",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"glyphicon glyphicon-education",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 2\n"),_c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 2.1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 2.2")])])])])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-code-branch",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 3\n"),_c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 3.1")])])])])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('svg',{staticClass:"octicon octicon-git-pull-request",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},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('div',[_v("Item 4\n"),_c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"material-icons align-middle",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("perm_media​")]),_c('div',[_v("Item 4.1")])])])])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"glyphicon glyphicon-education",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 5\n"),_c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("πŸ“”β€‹")]),_c('div',[_v("Item 5.1")])])])])])])])],1)]),_v(" "),_c('p',[_v("You can use any of the "),_c('a',{attrs:{"href":"/userGuide/formattingContents.html#icons"}},[_v("icons")]),_v(" supported by MarkBind. If an item has a specified icon, that icon will be used for it and for subsequent items at that level.")]),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_v("\nIf you customize any item on a certain level, you must also customize the first item on that level. If not, the list will revert to its uncustomized form.\n")]),_v(" "),_c('p',[_c('strong',[_v("You can adjust the icon's size by using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("i-size")]),_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":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 1 { icon=\"fas-file-code\" i-size=\"35px\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 2 { icon=\"fas-file-code\" i-size=\"4rem\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 3 { icon=\"fas-file-code\" i-size=\"5em\" }\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code",staticStyle:{"font-size":"35px","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code",staticStyle:{"font-size":"4rem","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 2")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code",staticStyle:{"font-size":"5em","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 3")])])])])],1)]),_v(" "),_c('p',[_v("You can utilize any "),_c('a',{attrs:{"href":"https://www.w3schools.com/cssref/css_units.php"}},[_v("CSS size unit")]),_v(".")]),_v(" "),_c('p',[_c('strong',[_v("You can also use images as 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":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 1 { icon=\"/images/deer.jpg\" i-width=\"30px\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 2 { i-width=\"60px\" i-height=\"44px\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 3 { i-width=\"90px\" i-height=\"61px\" }\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticStyle:{"width":"30px","display":"inline-block"},attrs:{"src":"/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('div',[_v("Item 1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticStyle:{"width":"60px","height":"44px","display":"inline-block"},attrs:{"src":"/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('div',[_v("Item 2")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticStyle:{"width":"90px","height":"61px","display":"inline-block"},attrs:{"src":"/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('div',[_v("Item 3")])])])])],1)]),_v(" "),_c('p',[_v("If either the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("i-width")]),_v(" or the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("i-height")]),_v(" of an image is not specified, the unspecified dimension will adjust to maintain the image's original aspect ratio. For example, for an image of size 800x600 (4:3), if "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("i-width")]),_v(" is set to 400px, its height will be 300px.")]),_v(" "),_c('p',[_c('strong',[_v("The icon's appearance can be further customized by adding a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("i-class")]),_v(" attribute.")])]),_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":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 1 { icon=\"/images/deer.jpg\" i-width=\"60px\" height=\"17px\" i-class=\"rounded\" }\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 { icon=\"fas-question-circle\" i-class=\"badge rounded-pill my-1 bg-success text-white\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Item 2.2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Item 2.3 { i-class=\"badge rounded-pill my-1 bg-primary text-white\"}\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(" Item 3.1 \n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Item 3.2 { icon=\"fas-question-circle\" i-class=\"badge rounded my-1 bg-danger text-white\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Item 3.3\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"},attrs:{"height":"17px"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticClass:"rounded",staticStyle:{"width":"60px","display":"inline-block"},attrs:{"src":"/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('div',[_v("Item 1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticClass:"rounded",staticStyle:{"width":"60px","display":"inline-block"},attrs:{"src":"/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('div',[_v("Item 2\n"),_c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-question-circle badge rounded-pill my-1 bg-success text-white",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 2.1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-question-circle badge rounded-pill my-1 bg-success text-white",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 2.2")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-question-circle badge rounded-pill my-1 bg-primary text-white",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 2.3")])])])])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticClass:"rounded",staticStyle:{"width":"60px","display":"inline-block"},attrs:{"src":"/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('div',[_v("Item 3\n"),_c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-question-circle badge rounded-pill my-1 bg-primary text-white",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 3.1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-question-circle badge rounded my-1 bg-danger text-white",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 3.2 ")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-question-circle badge rounded my-1 bg-danger text-white",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 3.3")])])])])])])])],1)]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_c('p',[_v("Similar to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("icon")]),_v(" attribute, other icon attributes such as "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("i-class")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("i-width")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("i-height")]),_v(" apply for subsequent list items at the same level, until they are overridden by the same attribute. For example, Item 2.3's "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("i-class")]),_v(" overrides Item 2.1's and applies up to Item 3.1.")])])],1),_v(" "),_c('p',[_c('strong',[_v("You can apply Markdown's heading and paragraph syntax within the list.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" #### Heading 1: Overview {icon=\"/images/overview-d.png\" i-width=\"65px\" i-class=\"rounded\" }\n")]),_c('span',[_v(" Content 1: This section provides a summary of the document or topic. \n")]),_c('span',[_v(" It sets the context and purpose of the content to follow.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" #### Heading 2: Detailed Description { icon=\"/images/detailed-d.png\" i-width=\"65px\" i-class=\"rounded\" }\n")]),_c('span',[_v(" Content 2: This section delves deeper into the topic, offering comprehensive information and detailed explanations.\n")]),_c('span',[_v(" It might also include evidence, examples, or justifications.\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticClass:"rounded",staticStyle:{"width":"65px","display":"inline-block"},attrs:{"src":"/images/overview-d.png","alt":"Icon"}}),_v("​​")]),_c('div',[_c('h4',{attrs:{"id":"heading-1-overview"}},[_v("Heading 1: Overview"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-1-overview","onclick":"event.stopPropagation()"}})]),_v("\nContent 1: This section provides a summary of the document or topic.\nIt sets the context and purpose of the content to follow.")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticClass:"rounded",staticStyle:{"width":"65px","display":"inline-block"},attrs:{"src":"/images/detailed-d.png","alt":"Icon"}}),_v("​​")]),_c('div',[_c('h4',{attrs:{"id":"heading-2-detailed-description"}},[_v("Heading 2: Detailed Description"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-2-detailed-description","onclick":"event.stopPropagation()"}})]),_v("\nContent 2: This section delves deeper into the topic, offering comprehensive information and detailed explanations.\nIt might also include evidence, examples, or justifications.")])])])])],1)]),_v(" "),_c('p',[_v("Icon specifications should be attached only to the first element of a list item (for the example above, the icon specification should be attached to the heading, not the content below the heading).")]),_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":"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(" 2.")]),_v(" Sub item 1.2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("2.")]),_v(" Item 2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("3.")]),_v(" Item 3\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('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('popover',{scopedSlots:_u([{key:"content",fn:function(){return [_c('div',{staticStyle:{"text-align":"center","margin-bottom":"5px"}},[_v("++"),_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('ol',{staticClass:"ps-0 ms-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)])]},proxy:true}])},[_v("\nfirst number\n")]),_v("!\n")],1),_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('div',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{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',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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":"292b4"}},[_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":"292b4","type":"radio"}}),_v(" Item 5")])])])])],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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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("Two types of delimiters are supported and can be used interchangeably:")]),_v(" "),_c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("'dollars'")]),_v(" "),_c('ul',[_c('li',[_v("Insert "),_c('strong',[_v("inline")]),_v(" equations by enclosing them in "),_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(" "),_c('li',[_v("Insert "),_c('strong',[_v("display")]),_v(" equations by enclosing them in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("$$...$$")])]),_v(" "),_c('li',[_v("Insert "),_c('strong',[_v("display")]),_v(" + "),_c('strong',[_v("equation number")]),_v(": "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("$$...$$ (1)")])])])]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("'brackets'")]),_v(" "),_c('ul',[_c('li',[_v("Insert "),_c('strong',[_v("inline")]),_v(" equations by enclosing them in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\\(...\\)")])]),_v(" "),_c('li',[_v("Insert "),_c('strong',[_v("display")]),_v(" equations by enclosing them in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\\[...\\]")])]),_v(" "),_c('li',[_v("Insert "),_c('strong',[_v("display")]),_v(" + "),_c('strong',[_v("equation number")]),_v(": "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\\[...\\] (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":"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")]),_c('span',[_v("\n")]),_c('span',[_v("$$ 4x + 5y = 16 $$ (3)\n")]),_c('span',[_v("\n")]),_c('span',[_v("$$\\frac{10x}{3} + \\frac{5y}{3} = 8$$ (4)\n")]),_c('span',[_v("\n")]),_c('span',[_v("Finally, the Pythagoras theorem: $c^2 = a^2 + b^2$.\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("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.7278em;vertical-align:-0.0833em;"}}),_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.2222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.625em;vertical-align:-0.1944em;"}}),_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.2778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.6444em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("11")])])])])])]),_c('span',[_v("(1)")])],1),_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.0074em;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.3214em;"}},[_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.2222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:2.0074em;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.3214em;"}},[_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.2778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.6444em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("8")])])])])])]),_c('span',[_v("(2)")])],1),_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.908em;vertical-align:-0.0833em;"}}),_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.8247em;"}},[_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","style":"margin-right:0.03588em;"}},[_v("iΟ€")])])])])])])])])]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.6444em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("1")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.6444em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("0")])])])])]),_v(" is a beautiful equation.")],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('mn',{pre:true},[_v("4")]),_c('mi',{pre:true},[_v("x")]),_c('mo',{pre:true},[_v("+")]),_c('mn',{pre:true},[_v("5")]),_c('mi',{pre:true},[_v("y")]),_c('mo',{pre:true},[_v("=")]),_c('mn',{pre:true},[_v("16")])],1),_c('annotation',{pre:true,attrs:{"encoding":"application/x-tex","v-pre":""}},[_v(" 4x + 5y = 16 ")])],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.7278em;vertical-align:-0.0833em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("4")]),_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("x")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.8389em;vertical-align:-0.1944em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("5")]),_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.2778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.6444em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("16")])])])])])]),_c('span',[_v("(3)")])],1),_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("10")]),_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("5")]),_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{10x}{3} + \\frac{5y}{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.0074em;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.3214em;"}},[_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("10")]),_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.2222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:2.0074em;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.3214em;"}},[_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("5")]),_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.2778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.6444em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("8")])])])])])]),_c('span',[_v("(4)")])],1),_c('p',[_v("Finally, the Pythagoras theorem: "),_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("c")]),_c('mn',{pre:true},[_v("2")])],1),_c('mo',{pre:true},[_v("=")]),_c('msup',{pre:true},[_c('mi',{pre:true},[_v("a")]),_c('mn',{pre:true},[_v("2")])],1),_c('mo',{pre:true},[_v("+")]),_c('msup',{pre:true},[_c('mi',{pre:true},[_v("b")]),_c('mn',{pre:true},[_v("2")])],1)],1),_c('annotation',{pre:true,attrs:{"encoding":"application/x-tex","v-pre":""}},[_v("c^2 = a^2 + b^2")])],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.8141em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("c")]),_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.8141em;"}},[_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"}},[_v("2")])])])])])])])]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.8974em;vertical-align:-0.0833em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("a")]),_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.8141em;"}},[_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"}},[_v("2")])])])])])])])]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.8141em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("b")]),_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.8141em;"}},[_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"}},[_v("2")])])])])])])])])])])])]),_v(".")],1)])],1)]),_v(" "),_c('p',[_v("Additional delimiters are possible by enabling the "),_c('a',{attrs:{"href":"/userGuide/usingPlugins.html#plugin-mathdelimiters"}},[_v("mathDelimiters")]),_v(" plugin.")]),_v(" "),_c('box',{attrs:{"type":"info"}},[_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":"/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 %}\n")]),_c('span',[_v("\n")]),_c('span',[_v("\\(e^{{\\frac{1}{3}} + 1}\\)\n")]),_c('span',[_v("\n")]),_c('span',[_v("{% endraw %}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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.7278em;vertical-align:-0.0833em;"}}),_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.2222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.625em;vertical-align:-0.1944em;"}}),_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.2778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.6444em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("11")])])])])])]),_c('span',[_v("(1)")])],1),_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.0074em;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.3214em;"}},[_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.2222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:2.0074em;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.3214em;"}},[_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.2778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.6444em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("8")])])])])])]),_c('span',[_v("(2)")])],1),_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.908em;vertical-align:-0.0833em;"}}),_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.8247em;"}},[_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","style":"margin-right:0.03588em;"}},[_v("iΟ€")])])])])])])])])]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.6444em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("1")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.6444em;"}}),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('modal',{attrs:{"id":"modal:loremipsum"},scopedSlots:_u([{key:"header",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('modal',{attrs:{"id":"modal:centered","center":""},scopedSlots:_u([{key:"header",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('modal',{attrs:{"id":"modal:ok-text","ok-text":"Custom OK"},scopedSlots:_u([{key:"header",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 focus")]),_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 focus")])]),_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(", or any space-separated combination of these.")])]),_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")]),_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."),_c('br'),_c('strong',[_v("Note: Ensure id for each Modal is unique.")])])]),_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 small Modal.")])]),_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 large Modal.")])]),_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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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('modal',{attrs:{"ok-text":"OK","id":"modal:unused"},scopedSlots:_u([{key:"header",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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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 insert your own custom styles via the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("add-class")]),_v(" attribute. You can "),_c('trigger',{attrs:{"trigger":"click","for":"modal:built-in-bg"}},[_v("use built-in background styles")]),_v(" or "),_c('a',{attrs:{"href":"/userGuide/components/advanced.html#inserting-custom-classes-into-components"}},[_v("insert your own defined CSS classes")]),_v(".")],1)]),_v(" "),_c('modal',{attrs:{"id":"modal:built-in-bg"},scopedSlots:_u([{key:"header",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("sticky")]),_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 environment--combined\"")]),_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 environment--combined\"")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("e.g. adding an image to the site nav")]},proxy:true}])},[_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.")],1),_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('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<a>")]),_v(" tags in particular")]},proxy:true}])},[_v("links")]),_v("."),_c('br'),_v("\nIf absent, the navigation buttons to open the menus are "),_c('em',[_v("automatically hidden")]),_v(".")],1)]),_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":"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:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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:{"heading":"CSS class attached to the root navigation element","class":"hljs css"}},[_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"heading":"","class":"hljs css"}},[_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-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:")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('trigger',{attrs:{"for":"modal:page-nav-example","trigger":"click"}},[_v("Example usage of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<page-nav />")]),_v(" component")])],1),_v(" "),_c('modal',{attrs:{"id":"modal:page-nav-example","large":""},scopedSlots:_u([{key:"header",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":"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("<!-- Create a sticky header using the sticky 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("sticky")]),_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 environment--combined\"")]),_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 environment--combined\"")]),_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-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(">")]),_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("\"fw-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(">")]),_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(">")]),_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":"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":"highlighted"}},[_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])],1)])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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('p',[_c('span',{staticClass:"keyword d-none"},[_v("print page nav as table of content")])]),_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('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_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(".")]},proxy:true}])},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"default\"")])]),_v(" or a "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_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(".")]},proxy:true}])},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("heading level")])]),_v(".")],1),_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('li',[_c('p',[_c('strong',[_v("(Optional) To make pageNav available on print, you can position the page navigation menu on individual pages with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<page-nav-print />")]),_v(" component.")])])])]),_v(" "),_c('panel',{staticClass:"ms-4",attrs:{"type":"seamless","expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("Additional details on printing pageNav")])])]},proxy:true}])},[_v(" "),_c('p',[_v("You can specify the location of the page navigation menu on print by using either of the following syntaxes:")]),_v(" "),_c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<page-nav-print />")])]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<page-nav-print></page-nav-print>")]),_v(" "),_c('ul',[_c('li',[_v("This is useful if you want to include a custom title (or any other content) before the page navigation menu. For example, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<page-nav-print>Table of Contents</page-nav-print>")])])])])]),_v(" "),_c('p',[_v("You can specify multiple "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<page-nav-print />")]),_v(" components in a page and they do not have to be at the top of the page. They also do not appear when viewed on a browser.")]),_v(" "),_c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v("\nIn the page that you want to have page navigation printed (i.e. to serve as a table of content when viewed on PDFs), use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<page-nav-print />")]),_v(" component to position the pageNav like so:")]),_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('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("page-nav-print")]),_v(" />")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("# Overview\n")]),_c('span',[_v("Content of the page...\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_c('p',[_v("To view the pageNav on print, open the print preview of the page using the browser's print function.")]),_v(" "),_c('box',{attrs:{"type":"info","seamless":""}},[_c('p',[_v("If you are using Chrome, you can right-click on the page and select \"Print\" to open the print preview.\nYou can try it out by going to our "),_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands page")]),_v(" and printing it.")])])],1),_v(" "),_c('div',{staticClass:"indented",attrs:{"id":"short"}},[_c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-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:")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" "),_c('trigger',{attrs:{"for":"modal:page-nav-example","trigger":"click"}},[_v("Example usage of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<page-nav />")]),_v(" component")])],1)])],1),_v(" "),_c('div',{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(".")])])])])]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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":"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',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("markdown")]),_v(">")]),_v("_markdown_"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("markdown")]),_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("plain text ..."),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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(" "),_c('div',[_c('p',[_c('em',[_v("markdown")])])]),_v(" "),_c('p',[_v("plain text ...")])])],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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-close")]),_v(", or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-minimized-switch")]),_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":"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 minimized panel does not have a switch button**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-minimized-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 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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"","no-minimized-switch":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("This minimized panel does not have a switch button")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"","height":"20"}})])])]},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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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("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 box\n")]),_c('span',[_v(" "),_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(" "),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('box',{attrs:{"type":"success"}},[_v("\n I'm a nested 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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("This is the first paragraph.")]),_v(" "),_c('p',[_v("This is another paragraph. This is the second sentence.")])])],1)]),_v(" "),_c('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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":"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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])],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.")])])])])]),_c('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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":"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("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("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("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("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("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("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("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("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("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("popover")]),_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("div")]),_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("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("popover")]),_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("div")]),_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("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("popover")]),_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',[_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("div")]),_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 src"),_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("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("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"From a HTML file\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/syntax/extra/loadContent.html#fragment\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" This is loaded from a .html file\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("div")]),_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(" "),_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("\"From a MarkDown file\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/formattingContents.md#overview\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" This is loaded from a .md file\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("div")]),_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("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("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")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('popover',{attrs:{"placement":"top"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on top")])]),_v(" "),_c('popover',{attrs:{"placement":"left"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on left")])]),_v(" "),_c('popover',{attrs:{"placement":"right"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on right")])]),_v(" "),_c('popover',{attrs:{"placement":"bottom"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on bottom")])]),_v(" "),_c('hr'),_v(" "),_c('h4',{staticClass:"no-index",attrs:{"id":"header-2"}},[_v("Header"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#header-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('popover',{attrs:{"placement":"top"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true},{key:"header",fn:function(){return [_v("Header")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on top")])]),_v(" "),_c('popover',{attrs:{"placement":"left"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true},{key:"header",fn:function(){return [_v("Header")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on left")])]),_v(" "),_c('popover',{attrs:{"placement":"right"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true},{key:"header",fn:function(){return [_v("Header")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on right")])]),_v(" "),_c('popover',{attrs:{"placement":"bottom"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true},{key:"header",fn:function(){return [_v("Header")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on bottom")])]),_v(" "),_c('hr'),_v(" "),_c('h4',{staticClass:"no-index",attrs:{"id":"trigger"}},[_v("Trigger"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#trigger","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('popover',{attrs:{"placement":"top","trigger":"hover"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true},{key:"header",fn:function(){return [_v("Header")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Mouseenter")])])],1),_v(" "),_c('h4',{staticClass:"no-index",attrs:{"id":"markdown"}},[_v("Markdown"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#markdown","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('popover',{scopedSlots:_u([{key:"content",fn:function(){return [_c('span',{staticClass:"underline"},[_v("emoji")]),_v(" content 🐱")]},proxy:true},{key:"header",fn:function(){return [_c('strong',[_v("Emoji header")]),_v(" πŸš€")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Hover")])])],1),_v(" "),_c('h4',{staticClass:"no-index",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('div',[_c('popover',{scopedSlots:_u([{key:"header",fn:function(){return [_c('strong',[_v("Emoji header")]),_v(" πŸš€")]},proxy:true},{key:"content",fn:function(){return [_c('div',[_v("\n This is a long content...\n ")])]},proxy:true}])},[_v(" "),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Hover")])])],1),_v(" "),_c('h4',{staticClass:"no-index",attrs:{"id":"content-using-src"}},[_v("Content using src"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#content-using-src","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('popover',{scopedSlots:_u([{key:"content",fn:function(){return [_v("Fragment loading test")]},proxy:true},{key:"header",fn:function(){return [_v("From a HTML file")]},proxy:true}])},[_v("\n This is loaded from a .html file\n ")])],1),_v(" "),_c('div',[_c('popover',{scopedSlots:_u([{key:"content",fn:function(){return [_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.")])]},proxy:true},{key:"header",fn:function(){return [_v("From a MarkDown file")]},proxy:true}])},[_v("\n This is loaded from a .md file\n ")])],1),_v(" "),_c('h4',{staticClass:"no-index",attrs:{"id":"wrap-text"}},[_v("Wrap Text"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#wrap-text","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('popover',{scopedSlots:_u([{key:"content",fn:function(){return [_v("Nice!")]},proxy:true},{key:"header",fn:function(){return [_v("false")]},proxy:true}])},[_v("What do you say")])],1)],1)],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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"pop:trigger_id"}},[_v("trigger")]),_v(".\n"),_c('popover',{attrs:{"id":"pop:trigger_id"},scopedSlots:_u([{key:"content",fn:function(){return [_v("This popover is triggered by a trigger")]},proxy:true}])}),_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 focus")]),_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 focus")])]),_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(", or any space-separated combination of these.")])]),_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(".")])])])])])])]),_v(" "),_c('br'),_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 focus")])]),_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(", or any space-separated combination of these.")])]),_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("Popover header, supports MarkDown text.")])]),_v(" "),_c('tr',[_c('td',[_v("content"),_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("Popover content, supports MarkDown text.")])]),_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 popover."),_c('br'),_v("Both "),_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(".html")]),_v(" are accepted.")])]),_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('box',{attrs:{"type":"info","light":""}},[_c('p',[_v("MarkBind supports the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" attribute, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("content")]),_v(" attribute and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("content")]),_v(" slot for popovers.\nUsually, only one of these would be used at a time.")]),_v(" "),_c('p',[_v("If multiple of these are used, MarkBind will prioritise in the following order:")]),_v(" "),_c('ol',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("content")]),_v(" slot")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("content")]),_v(" attribute")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" attribute")])])]),_v(" "),_c('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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('popover',{attrs:{"id":"pop:context-target","placement":"top"},scopedSlots:_u([{key:"header",fn:function(){return [_v("Popover header")]},proxy:true},{key:"content",fn:function(){return [_c('div',[_c('p',[_v("description πŸ‘")])])]},proxy:true}])})],1)],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:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])]),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Fill-in-the-Blanks questions")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Fill-in-the-Blanks 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("\"blanks\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hint")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Google it!\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" ##### German sociologist __________ called the process of simultaneously analyzing the behavior of individuals and the society that shapes that behavior __________.\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("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Norbert Elias, Elias\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"That's his name!\"")]),_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("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"figuration\"")]),_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")]),_c('span',[_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("\"blanks\"")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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"}},[_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(", "),_c('strong',[_v("Fill-in-the-Blanks")]),_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:{"heading":"Header and Hint syntax","class":"hljs html"}},[_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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:{"heading":"Headers and Hints using slots","class":"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("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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("Two of the answers are correct!")]},proxy:true}])},[_v("Hover over me!")]),_v(" "),_c('span',{staticClass:"fas fa-mouse-pointer",attrs:{"aria-hidden":"true"}})],1)])]},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(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("blanks")]),_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"}},[_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('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_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!")]},proxy:true}])},[_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.")],1),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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"}},[_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":"fill-in-the-blanks-questions"}},[_v("Fill-in-the-Blanks Questions"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#fill-in-the-blanks-questions","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Fill-in-the-blanks questions are specified with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"blanks\"")]),_v(" attribute.")]),_v(" "),_c('p',[_v("Unlike MCQ and checkbox questions, answer checking is performed for each blank 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 in each "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("q-option")]),_v(".\nIf no keywords are provided, the answer for that blank will always be marked as correct.")]),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_c('p',[_v("Keywords are validated by checking if the keyword matches the user's answer exactly (ignoring letter casing).\nThis works well for some\n"),_c('popover',{scopedSlots:_u([{key:"header",fn:function(){return [_v("When does validation work?")]},proxy:true},{key:"content",fn:function(){return [_c('span',[_v("\nWhen the keywords given are short and specific to the blank (eg. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("abstraction")]),_v("), it increases the chances that the blank will be validated correctly.\n"),_c('br'),_c('br'),_v("\nIn contrast, something long and vague like "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("after discussing for a period of time")]),_v(" which can easily be expressed in a different way (eg. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("after deliberating for a while")]),_v(") would likely cause the blank to be validated incorrectly.\n")])]},proxy:true}])},[_v("cases\n")]),_v("\nand not others.")],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":"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("\"blanks\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hint")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Google it!\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" ##### German sociologist __________ called the process of simultaneously analyzing the behavior of individuals and the society that shapes that behavior __________.\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("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Norbert Elias, Elias\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"That's his name!\"")]),_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("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"figuration\"")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"blanks"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Google it!")])]},proxy:true}])},[_v(" "),_c('h5',{attrs:{"id":"german-sociologist-called-the-process-of-simultaneously-analyzing-the-behavior-of-individuals-and-the-society-that-shapes-that-behavior"}},[_v("German sociologist __________ called the process of simultaneously analyzing the behavior of individuals and the society that shapes that behavior __________."),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#german-sociologist-called-the-process-of-simultaneously-analyzing-the-behavior-of-individuals-and-the-society-that-shapes-that-behavior","onclick":"event.stopPropagation()"}})]),_v(" "),_c('q-option',{attrs:{"keywords":"Norbert Elias, Elias"},scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("That's his name!")])]},proxy:true}])}),_v(" "),_c('q-option',{attrs:{"keywords":"figuration"}})],1)],1)],1)]),_v(" "),_c('p',[_v("By default, if the question has yet to be answered correctly, intermediate results will be shown beside each blank. You can specify a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-intermediate-result")]),_v(" attribute to avoid this behvaiour (i.e. hide the result of each blank upon incorrect attempts).")]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_c('p',[_v("Since the validation is imperfect, the minimum proportion of correct blanks needed for the entire question to be marked as correct 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 set the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("threshold")]),_v(" attribute to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0")]),_v(". Doing so always marks the entire question correct, and users will be able to see all intended answers.")])]),_v(" "),_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("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"blanks\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hint")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"What properties would you want these database transactions to have?\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("threshold")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("0.75")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-intermediate-result")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" ##### In computer science, ACID is a set of properties of database transactions intended to guarantee data validity despite errors, power failures, and other mishaps. These properties are: A for __________, C for __________, I for __________, and D for __________.\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("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atomicity, Atomic\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Meaning: either all occurs or nothing occurs\"")]),_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("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Consistency, Consistent\"")]),_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("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Isolation, Isolated\"")]),_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("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Durability, Durable\"")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"blanks","threshold":"0.75","no-intermediate-result":""},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("What properties would you want these database transactions to have?")])]},proxy:true}])},[_v(" "),_c('h5',{attrs:{"id":"in-computer-science-acid-is-a-set-of-properties-of-database-transactions-intended-to-guarantee-data-validity-despite-errors-power-failures-and-other-mishaps-these-properties-are-a-for-c-for-i-for-and-d-for"}},[_v("In computer science, ACID is a set of properties of database transactions intended to guarantee data validity despite errors, power failures, and other mishaps. These properties are: A for __________, C for __________, I for __________, and D for __________."),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#in-computer-science-acid-is-a-set-of-properties-of-database-transactions-intended-to-guarantee-data-validity-despite-errors-power-failures-and-other-mishaps-these-properties-are-a-for-c-for-i-for-and-d-for","onclick":"event.stopPropagation()"}})]),_v(" "),_c('q-option',{attrs:{"keywords":"Atomicity, Atomic"},scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Meaning: either all occurs or nothing occurs")])]},proxy:true}])}),_v(" "),_c('q-option',{attrs:{"keywords":"Consistency, Consistent"}}),_v(" "),_c('q-option',{attrs:{"keywords":"Isolation, Isolated"}}),_v(" "),_c('q-option',{attrs:{"keywords":"Durability, Durable"}})],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Fill-in-the-Blanks 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("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("no-intermediate-result")]),_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("Hides the result of each blank after an incorrect attempt.")])])])])]),_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("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("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"}},[_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('popover',{scopedSlots:_u([{key:"header",fn:function(){return [_v("When does validation work?")]},proxy:true},{key:"content",fn:function(){return [_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")])]},proxy:true}])},[_v("cases\n")]),_v("\nand not others.")],1)]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('h4',{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":"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("\"blanks\"")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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"}},[_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":"blanks"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Google it!")])]},proxy:true}])},[_v(" "),_c('h5',{attrs:{"id":"german-sociologist-called-the-process-of-simultaneously-analyzing-the-behavior-of-individuals-and-the-society-that-shapes-that-behavior-2"}},[_v("German sociologist __________ called the process of simultaneously analyzing the behavior of individuals and the society that shapes that behavior __________."),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#german-sociologist-called-the-process-of-simultaneously-analyzing-the-behavior-of-individuals-and-the-society-that-shapes-that-behavior-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('q-option',{attrs:{"keywords":"Norbert Elias, Elias"},scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("That's his name!")])]},proxy:true}])}),_v(" "),_c('q-option',{attrs:{"keywords":"figuration"}})],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('div',{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:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])]),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Fill-in-the-Blanks questions")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Fill-in-the-Blanks 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("\"blanks\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hint")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Google it!\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" ##### German sociologist __________ called the process of simultaneously analyzing the behavior of individuals and the society that shapes that behavior __________.\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("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Norbert Elias, Elias\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"That's his name!\"")]),_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("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"figuration\"")]),_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")]),_c('span',[_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("\"blanks\"")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_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-3"}},[_v("Which of the following is true?"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#which-of-the-following-is-true-3","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":"blanks"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Google it!")])]},proxy:true}])},[_v(" "),_c('h5',{attrs:{"id":"german-sociologist-called-the-process-of-simultaneously-analyzing-the-behavior-of-individuals-and-the-society-that-shapes-that-behavior-3"}},[_v("German sociologist __________ called the process of simultaneously analyzing the behavior of individuals and the society that shapes that behavior __________."),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#german-sociologist-called-the-process-of-simultaneously-analyzing-the-behavior-of-individuals-and-the-society-that-shapes-that-behavior-3","onclick":"event.stopPropagation()"}})]),_v(" "),_c('q-option',{attrs:{"keywords":"Norbert Elias, Elias"},scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("That's his name!")])]},proxy:true}])}),_v(" "),_c('q-option',{attrs:{"keywords":"figuration"}})],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('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Scroll To Top Button")])]),_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("scroll-top-button")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-arrow-circle-up:\"")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon-size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"2x\"")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bottom")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"2%\"")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("right")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"2%\"")])]),_v("\n")]),_c('span',[_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("scroll-top-button")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"scroll-to-top-button"}},[_v("Scroll To Top Button"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#scroll-to-top-button","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{attrs:{"id":"content"}},[_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("scroll-top-button")]),_v(" component allows users to move to the top of the page.")]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Adding a scroll-top-button")])])]),_v(" "),_c('p',[_v("Add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<scroll-top-button></scroll-top-button>")]),_v(" to layout file.")]),_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("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(":fas-arrow-circle-up:")])]),_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("lg")])]),_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("bottom")]),_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("2%")])]),_v(" "),_c('td',[_v("Distance from bottom edge of page.")])]),_v(" "),_c('tr',[_c('td',[_v("right")]),_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("2%")])]),_v(" "),_c('td',[_v("Distance from right edge of page.")])])])])])]),_v(" "),_c('div',{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("scroll-top-button")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-arrow-circle-up:\"")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon-size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"2x\"")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bottom")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"2%\"")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("right")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"2%\"")])]),_v("\n")]),_c('span',[_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("scroll-top-button")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("You can see an example of a scroll to top button on the "),_c('mark',[_v("on the bottom right side")]),_v(" of this page.")])])])])]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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('div',{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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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(".")])])],1),_v(" "),_c('div',{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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.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"}},[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.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('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("a menu item with sub menu-items")]},proxy:true}])},[_v("parent menu item")]),_v(" to make it expand by default.")],1),_v(" In the example above, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("* Authoring Contents :expanded:")]),_v(" makes the menu item "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Authoring Contents")]),_v(" expand by default.")])]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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:"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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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('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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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":"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(" Text in 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("markdown")]),_v(">")]),_v("_some markdown_"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("markdown")]),_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("\"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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 Text in the first tab\n "),_c('div',[_c('p',[_c('em',[_v("some markdown")])])])]),_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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('div',[_c('h3',{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"}},[_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Attaching tags to elements:")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Attaching multiple tags to an element:")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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 frontmatter.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Specifying tags in frontmatter:")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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 frontmatter, and are processed after frontmatter 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"}},[_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Using general tags:")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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"}},[_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Using general tags:")]),_v(" "),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_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:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('div',{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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])]),_v(" "),_c('div',{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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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('div',{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":"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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"hljs markdown"}},[_c('span',[_v("~~Strike through~~\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('s',[_v("Strike through")])])])],1)]),_v(" "),_c('p',[_v("Syntax added by MarkBind:")]),_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":"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--,\n")]),_c('span',[_v("Super^script^, Sub~script~,\n")]),_c('span',[_v("->Center-align<-\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',[_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(",\nSuper"),_c('sup',[_v("script")]),_v(", Sub"),_c('sub',[_v("script")]),_v(",\n")]),_c('div',{staticClass:"text-center"},[_v("Center-align")]),_c('p')])],1)])]),_v(" "),_c('p',[_v("Additional font colouring syntax:")]),_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":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("#r#Coloured Text##")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('span',{staticClass:"mkb-text-red"},[_v("Coloured Text")])])])],1)]),_v(" "),_c('p',[_v("Full list of colours:")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Letter")]),_v(" "),_c('th',[_v("Colour")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("r")]),_v(" "),_c('td',[_v("red")])]),_v(" "),_c('tr',[_c('td',[_v("g")]),_v(" "),_c('td',[_v("green")])]),_v(" "),_c('tr',[_c('td',[_v("b")]),_v(" "),_c('td',[_v("blue")])]),_v(" "),_c('tr',[_c('td',[_v("c")]),_v(" "),_c('td',[_v("cyan")])]),_v(" "),_c('tr',[_c('td',[_v("m")]),_v(" "),_c('td',[_v("magenta")])]),_v(" "),_c('tr',[_c('td',[_v("y")]),_v(" "),_c('td',[_v("yellow")])]),_v(" "),_c('tr',[_c('td',[_v("k")]),_v(" "),_c('td',[_v("black")])]),_v(" "),_c('tr',[_c('td',[_v("w")]),_v(" "),_c('td',[_v("white")])])])])]),_c('box',{attrs:{"type":"tip","seamless":""}},[_c('p',[_v("To escape the syntax, simply put a backslash in front of it (e.g. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\\#b#")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\\##")]),_v(").")])])],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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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")])])])])])]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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":"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("Tooltip 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("Tooltip 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("Tooltip 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("Tooltip 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("\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',[_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("\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',[_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("\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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('tooltip',{attrs:{"placement":"top"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Tooltip on top")])]),_v(" "),_c('tooltip',{attrs:{"placement":"left"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Tooltip on left")])]),_v(" "),_c('tooltip',{attrs:{"placement":"right"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Tooltip on right")])]),_v(" "),_c('tooltip',{attrs:{"placement":"bottom"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Tooltip on bottom")])]),_v(" "),_c('hr'),_v(" "),_c('p',[_v("Trigger")]),_v(" "),_c('p',[_c('tooltip',{attrs:{"placement":"top","trigger":"click"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Click")])])],1),_v(" "),_c('p',[_c('tooltip',{attrs:{"placement":"top","trigger":"focus"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true}])},[_v(" "),_c('input',{attrs:{"placeholder":"Focus"}})])],1),_v(" "),_c('hr'),_v(" "),_c('p',[_c('strong',[_v("Markdown")]),_v(":\n"),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_c('em',[_v("Hello")]),_v(" "),_c('strong',[_v("World")])]},proxy:true}])},[_v(" "),_c('a',{attrs:{"href":""}},[_v("Hover me")])]),_v(" "),_c('br')],1),_v(" "),_c('p',[_c('strong',[_v("Free Text")]),_v(":\n"),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_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.")]},proxy:true}])},[_c('i',[_v("coupling")])])],1)],1)],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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"tt:trigger_id"}},[_v("trigger")]),_v(".\n"),_c('tooltip',{attrs:{"id":"tt:trigger_id"},scopedSlots:_u([{key:"content",fn:function(){return [_v("This tooltip triggered by a trigger")]},proxy:true}])}),_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 focus")]),_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 focus")])]),_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(", or any space-separated combination of these.")])]),_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 focus")])]),_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(", or any space-separated combination of these.")])]),_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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("Hover "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("An explanation, "),_c('strong',[_v("supports simple Markdown")])]},proxy:true}])},[_v("here")]),_v(" to see a tooltip.")],1)])],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Tree")])]),_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("tree")]),_v(">")]),_v("\n")]),_c('span',[_v("C:/course/\n")]),_c('span',[_v(" textbook/\n")]),_c('span',[_v(" index.md\n")]),_c('span',[_v(" index.md\n")]),_c('span',[_v(" reading.md\n")]),_c('span',[_v(" site.json\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tree")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"tree"}},[_v("Tree"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tree","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("A "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tree")]),_v(" component allows you to generate tree-like visualisations, suitable for displaying folder structure.")])]),_v(" "),_c('p',[_v("Use indentation (2 spaces) to indicate the level of nesting.")]),_v(" "),_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("tree")]),_v(">")]),_v("\n")]),_c('span',[_v("C:/course/\n")]),_c('span',[_v(" textbook/\n")]),_c('span',[_v(" index.md\n")]),_c('span',[_v(" index.md\n")]),_c('span',[_v(" reading.md\n")]),_c('span',[_v(" site.json\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tree")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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:"tree"},[_v("C:/course/\nβ”œβ”€β”€ textbook/\nβ”‚ └── index.md\nβ”œβ”€β”€ index.md\nβ”œβ”€β”€ reading.md\n└── site.json\n")])])],1)]),_v(" "),_c('p',[_v("Markdown unordered lists are also 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":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tree")]),_v(">")]),_v("\n")]),_c('span',[_v("C:/course/\n")]),_c('span',[_v(" - textbook/\n")]),_c('span',[_v(" - index.md\n")]),_c('span',[_v("C:/course/\n")]),_c('span',[_v(" * textbook/\n")]),_c('span',[_v(" * index.md\n")]),_c('span',[_v("C:/course/\n")]),_c('span',[_v(" + textbook/\n")]),_c('span',[_v(" + index.md\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tree")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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:"tree"},[_v("C:/course/\nβ”œβ”€β”€ textbook/\n└── index.md\nC:/course/\nβ”œβ”€β”€ textbook/\n└── index.md\nC:/course/\nβ”œβ”€β”€ textbook/\n└── index.md\n")])])],1)]),_v(" "),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("Besides file system structures, you can use this for any lightweight tree-like structure.")]),_v(" "),_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("tree")]),_v(">")]),_v("\n")]),_c('span',[_v("Enjoy MarkBind?\n")]),_c('span',[_v(" You may want to:\n")]),_c('span',[_v(" Like :heart:\n")]),_c('span',[_v(" Share :speech_balloon:\n")]),_c('span',[_v(" Contribute :pencil:\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tree")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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:"tree"},[_v("Enjoy MarkBind?\n└── You may want to:\n β”œβ”€β”€ Like ❀️\n β”œβ”€β”€ Share πŸ’¬\n └── Contribute πŸ“\n")])])],1)])]),_v(" "),_c('p',[_v("You can use Tree in combination with inline Markdown or inline HTML elements.")]),_v(" "),_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("tree")]),_v(">")]),_v("\n")]),_c('span',[_v("Formatting is supported!\n")]),_c('span',[_v(" textbook/\n")]),_c('span',[_v(" `index.md`\n")]),_c('span',[_v(" **index.md**\n")]),_c('span',[_v(" ~~index.md~~\n")]),_c('span',[_v(" %%dimmed%%\n")]),_c('span',[_v(" Super^script^\n")]),_c('span',[_v(" ****Super Bold****\n")]),_c('span',[_v(" !!Underline!!\n")]),_c('span',[_v(" !!Underline with {text=danger}!!{.text-danger}\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("\"text-danger\"")]),_v(">")]),_v("RED"),_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(" __reading.md__\n")]),_c('span',[_v(" ++site.json++\n")]),_c('span',[_v(" ==hello==\n")]),_c('span',[_v(" :construction:\n")]),_c('span',[_v(" :fas-file-code:\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("tree")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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:"tree"},[_v("Formatting is supported!\nβ”œβ”€β”€ textbook/\nβ”‚ └── "),_c('code',{staticClass:"hljs inline no-lang"},[_v("index.md")]),_v("\nβ”œβ”€β”€ "),_c('strong',[_v("index.md")]),_v("\nβ”‚ β”œβ”€β”€ "),_c('s',[_v("index.md")]),_v("\nβ”‚ β”œβ”€β”€ "),_c('span',{staticClass:"dimmed"},[_v("dimmed")]),_v("\nβ”‚ β”œβ”€β”€ Super"),_c('sup',[_v("script")]),_v("\nβ”‚ β”œβ”€β”€ "),_c('strong',[_c('strong',[_v("Super Bold")])]),_v("\nβ”‚ β”œβ”€β”€ "),_c('span',{staticClass:"underline"},[_v("Underline")]),_v("\nβ”‚ β”œβ”€β”€ "),_c('span',{staticClass:"underline text-danger"},[_v("Underline with {text=danger}")]),_v("\nβ”‚ └── "),_c('span',{staticClass:"text-danger"},[_v("RED")]),_v("\nβ”œβ”€β”€ "),_c('strong',[_v("reading.md")]),_v("\nβ”œβ”€β”€ "),_c('span',{staticClass:"large"},[_v("site.json")]),_v("\nβ”œβ”€β”€ "),_c('mark',[_v("hello")]),_v("\nβ”œβ”€β”€ 🚧\nβ”œβ”€β”€ "),_c('span',{staticClass:"fas fa-file-code",attrs:{"aria-hidden":"true"}}),_v("\n└── πŸ˜ƒ\n")])])],1)]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Currently, Pop-Ups(tooltip/trigger) are "),_c('span',{staticClass:"underline"},[_v("not")]),_v(" supported within a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tree")]),_v(" component.")])]),_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":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")]),_v(" to find more information about text styles and other supported inline syntax.")])])]),_v(" "),_c('div',{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("tree")]),_v(">")]),_v("\n")]),_c('span',[_v("C:/course/\n")]),_c('span',[_v(" textbook/\n")]),_c('span',[_v(" index.md\n")]),_c('span',[_v(" index.md\n")]),_c('span',[_v(" reading.md\n")]),_c('span',[_v(" site.json\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tree")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('div',{staticClass:"tree"},[_v("C:/course/\nβ”œβ”€β”€ textbook/\nβ”‚ └── index.md\nβ”œβ”€β”€ index.md\nβ”œβ”€β”€ reading.md\n└── site.json\n")])])],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("variable")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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"}},[_v("Variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#variables","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{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.")])]),_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"}},[_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-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(":")]),_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("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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-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.")])]),_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"}},[_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])]),_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, 24 Feb 2024, 7:48:51 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 5.3.0")])])])])])]),_c('h3',{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('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("similar to how you assign filepaths for other Nunjucks tags")]},proxy:true}])},[_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.")],1),_v(" "),_c('tabs',[_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Importing from JSON files")]},proxy:true}])},[_v(" "),_c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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('div',{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("variable")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('popover',{attrs:{"id":"pop:footnotefn-75-1"},scopedSlots:_u([{key:"content",fn:function(){return [_c('div',[_c('p',[_v("Here is the footnote. Footnotes will appear at the bottom of the page.")])])]},proxy:true}])}),_c('popover',{attrs:{"id":"pop:footnotefn-75-2"},scopedSlots:_u([{key:"content",fn:function(){return [_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.")])])]},proxy:true}])}),_c('popover',{attrs:{"id":"pop:footnotefn-75-3"},scopedSlots:_u([{key:"content",fn:function(){return [_c('div',[_c('p',[_v("Inline notes are easier to write, since\nyou don't have to pick an identifier and move down to type the\nnote.")])])]},proxy:true}])}),_v(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3)],1)])],1),_v(" "),_c('overlay-source',{attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"})]),_v(" "),_c('scroll-top-button')],1),_v(" "),_m(4)])} -}; - var pageVueStaticRenderFns = [function anonymous( -) { -with(this){return _c('h1',{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('li',{staticClass:"footnote-item",attrs:{"id":"fn-75-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-75-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-75-3"}},[_c('p',[_v("Inline 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 5.3.0")]),_v(" on Sat, 24 Feb 2024, 7:48:51 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/syntaxReference.html b/userGuide/syntaxReference.html new file mode 100644 index 0000000..358c891 --- /dev/null +++ b/userGuide/syntaxReference.html @@ -0,0 +1,1060 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="generator" content="MarkBind 5.4.0"> + <meta name="viewport" content="width=device-width, initial-scale=1"><title>MarkBind - User Guide: Syntax Reference + + + + + + + + +

                                  Syntax Reference

                                  +Expand the panels for detailed explanations of the feature or click on the link in the header to go to the corresponding page! +
                                  Annotations
                                  <annotate src="../../images/annotateSampleImage.png" width="500" alt="Sample Image">
+  <a-point x="25%" y="25%" content="Lorem ipsum dolor sit amet" />
+  <a-point x="50%" y="25%" content="Lorem ipsum dolor sit amet" label="1a"/>
+  <a-point x="50%" y="25%" content="Lorem ipsum dolor sit amet" label="1b" legend="both"/>
+</annotate>
+
                                  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 bg-primary">Primary</span>
+<span class="badge rounded-pill bg-success">Success</span>
+<button type="button" class="btn btn-primary">
+  Difficulty Level <span class="badge bg-light text-dark">4</span>
+</button>
+
                                  Blockquotes
                                  > Blockquote, first paragraph
+>
+> Second paragraph
+>> Nested blockquote
+
                                  Boxes
                                  <box type="warning">
+  warning
+</box>
+
                                  <breadcrumb />
+
                                  Code
                                  ```xml
+<foo>
+  <bar type="name">goo</bar>
+</foo>
+```
+
                                  `<bar type="name">goo</bar>`{.xml}
+
                                  Dates
                                  {{ baseDate | date(format, daysToAdd) }}
                                  Diagrams
                                  <puml width=300>
+@startuml
+alice -> bob ++ : hello
+bob -> bob ++ : self call
+@enduml
+</puml>
+
                                  <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: :) :/ :D
+
                                  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.
+
                                  Frontmatter
                                  <frontmatter>
+  title: Binary Search Tree
+  pageNav: 2
+</frontmatter>
+
                                  Headings
                                  ### Heading level 3
+...
+###### Heading level 6
+
                                  Horizontal Rules
                                  *****
+-----
+______________
+
                                  Icons

                                  :glyphicon-hand-right: :fa-brands-github: :fa-solid-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.
+
                                  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>
+
                                  <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
                                  <frontmatter>
+  pageNav: 2
+  pageNavTitle: "Chapters of This Page"
+</frontmatter>
+
+<page-nav-print />
+
+# Overview
+Content of the page...
+
                                  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" lazy>
+  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>
+
+
                                  Fill-in-the-Blanks questions
                                  
+<question type="blanks" hint="Google it!">
+
+  ###### German sociologist __________ called the process of simultaneously analyzing the behavior of individuals and the society that shapes that behavior __________.
+
+  <q-option keywords="Norbert Elias, Elias" reason="That's his name!"></q-option>
+  <q-option keywords="figuration"></q-option>
+</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="blanks">...</question>
+  <question type="text">...</question>
+</quiz>
+
                                  Scroll To Top Button
                                  <scroll-top-button
+    icon=":fas-arrow-circle-up:"
+    icon-size="2x"
+    bottom="2%"
+    right="2%"
+></scroll-top-button>
+
                                  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-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>
+
                                  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.
+
                                  Tree
                                  <tree>
+C:/course/
+  textbook/
+    index.md
+  index.md
+  reading.md
+  site.json
+</tree>
+
                                  Variables
                                  Place global variables in `_markbind/variables.md`
+<variable name="year">2018</variable>
+The year was {{ year }}
+

                                  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. Inline notes are easier to write, since +you don't have to pick an identifier and move down to type the +note.

                                  4. Math

                                  + + + + diff --git a/userGuide/syntaxReference.page-vue-render.js b/userGuide/syntaxReference.page-vue-render.js new file mode 100644 index 0000000..faae88f --- /dev/null +++ b/userGuide/syntaxReference.page-vue-render.js @@ -0,0 +1,25 @@ + + var pageVueRenderFn = function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"app"}},[_c('header',{attrs:{"sticky":""}},[_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 environment--combined"}},[_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',{attrs:{"id":"site-nav","tag-name":"nav","to":"site-nav"}},[_c('div',{staticClass:"site-nav-top"},[_c('div',{staticClass:"fw-bold mb-2",staticStyle:{"font-size":"1.25rem"}},[_v("\n User Guide\n ")])]),_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"}},[_v("Getting Started")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_v("Authoring Contents \n\n"),_c('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.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('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.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)"}},[_v("Working with Sites \n\n"),_c('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.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-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/redirectingToACustom404Page.html"}},[_v("Redirecting to a Custom 404 Page")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingNavigationButtons.html"}},[_v("Adding Navigation Buttons")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/templates.html"}},[_v("Templates")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_v("References \n\n"),_c('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.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/syntaxReference.html"}},[_v("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/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/gitignoreFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".gitignore")]),_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/troubleshooting.html"}},[_v("Troubleshooting")])])]),_v(" "),_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',{attrs:{"id":"content-wrapper"}},[_c('breadcrumb'),_v(" "),_m(0),_v(" "),_c('box',{attrs:{"type":"info"}},[_v("\nExpand the panels for detailed explanations of the feature or click on the link in the header to go to the corresponding page!\n")]),_v(" "),_c('panel',{attrs:{"type":"seamless","no-close":"","popup-url":"/userGuide/components/imagesAndDiagrams.html#annotations","panelId":"annotations"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{attrs:{"id":"annotations"}},[_c('strong',[_v("Annotations")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#annotations","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("\n")]),_c('span',[_v(" \n")]),_c('span',[_v(" \n")]),_c('span',[_v(" \n")]),_c('span',[_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"annotations-2"}},[_v("Annotations"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#annotations-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("An "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("annotate")]),_v(" component allows you to easily annotate over any images.")])]),_v(" "),_c('p',[_v("Annotate wrappers ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(") are used in conjunction with Annotate\nPoints ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(").")]),_v(" "),_c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(": Annotate wrappers are used to hold the image and set its width and height.")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(": Annotate points define the position, text and style of each point within the image. Insert them between the Annotate wrappers.")])]),_v(" "),_c('p',[_v("The x and y coordinates of each Annotate Point are relative to the image and are written in percentage of total width or height.")]),_v(" "),_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("annotate")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../../images/annotateSampleImage.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"500\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sample Image\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("lazy")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This point is 25% from the left and 25% from the top\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This point is 50% from the left and 25% from the top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"60\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"75%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This point is 75% from the left and 25% from the top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This has a header\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This point is 25% from the left and 50% from the top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"red\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This point is 50% from the left and 50% from the top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("opacity")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"0.7\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"75%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This point is 25% from the left and 75% from the top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("label")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"1\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"75%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This point is 50% from the left and 75% from the top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("textColor")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"white\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"black\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("label")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"2\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("opacity")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"1\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"75%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"75%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This point is 75% from the left and 75% from the top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fontSize")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"30\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("label")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"3\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"75%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This point is 75% from the left and 50% from the 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("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge bg-primary\"")]),_v(">")]),_v("Badge label"),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('annotate',{attrs:{"src":"../../images/annotateSampleImage.png","width":"500","alt":"Sample Image","lazy":""}},[_c('a-point',{attrs:{"x":"25%","y":"25%"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("This point is 25% from the left and 25% from the top")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"25%","size":"60"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("This point is 50% from the left and 25% from the top")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"25%"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This has a header")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("This point is 75% from the left and 25% from the top")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"25%","y":"50%","color":"red"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("This point is 25% from the left and 50% from the top")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"50%","opacity":"0.7"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("This point is 50% from the left and 50% from the top")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"25%","y":"75%"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("1")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("This point is 25% from the left and 75% from the top")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"75%","textColor":"white","color":"black","opacity":"1"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("2")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("This point is 50% from the left and 75% from the top")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"75%","fontSize":"30"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("3")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("This point is 75% from the left and 75% from the top")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"50%"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("This point is 75% from the left and 50% from the top")])]},proxy:true}])},[_v(" "),_c('span',{staticClass:"badge bg-primary"},[_v("Badge label")])])],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Use markdown in the header, label and content")])]),_v(" "),_c('p',[_v("Annotate Points supports markdown in the header, label and content.")]),_v(" "),_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("annotate")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../../images/annotateSampleImage.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"500\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sample Image\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"# Content\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":blush:\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"75%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("label")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":heart:\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('annotate',{attrs:{"src":"../../images/annotateSampleImage.png","width":"500","alt":"Sample Image"}},[_c('a-point',{attrs:{"x":"25%","y":"25%"},scopedSlots:_u([{key:"content",fn:function(){return [_c('h1',{attrs:{"id":"content"}},[_v("Content"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#content","onclick":"event.stopPropagation()"}})])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"25%"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("😊")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"25%"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("❀️")])]},proxy:true}])})],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Customising shapes for Annotate Point")]),_v(" "),_c('br')]),_v(" "),_c('p',[_v("Annotate Points supports different shapes and customisation.")]),_v(" "),_c('p',[_v("The default shape used is a rounded button.")]),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_v("\nWhen using a customised shape, the options shape, color and opacity will not work. \n"),_c('p',[_v("Style the shape to achieve the same effect.")])]),_v(" "),_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(" \n")]),_c('span',[_v(" Badge label\n")]),_c('span',[_v(" \n")]),_c('span',[_v(" \n")]),_c('span',[_v(" \n")]),_c('span',[_v(" \n")]),_c('span',[_v(" \n")]),_c('span',[_v(" \n")]),_c('span',[_v("
                                  Custom
                                  \n")]),_c('span',[_v("                                   \n")]),_c('span',[_v("                                  \n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('annotate',{attrs:{"src":"../../images/annotateSampleImage.png","width":"500","alt":"Sample Image"}},[_c('a-point',{attrs:{"x":"75%","y":"50%"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("This point is 75% from the left and 50% from the top")])]},proxy:true}])},[_v(" "),_c('span',{staticClass:"badge bg-primary"},[_v("Badge label")])]),_v(" "),_c('a-point',{attrs:{"x":"25%","y":"50%"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("This point is 25% from the left and 50% from the top")])]},proxy:true}])},[_v(" "),_c('pic',{attrs:{"src":"/images/deer.jpg","width":"50","height":"50"}})],1),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"50%"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("This point is 25% from the left and 50% from the top")])]},proxy:true}])},[_v(" "),_c('div',{staticStyle:{"opacity":"90%","color":"red"}},[_v("Custom")])])],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Using triggers and positions for Annotate Point")]),_v(" "),_c('br')]),_v(" "),_c('p',[_v("Similar to "),_c('strong',[_c('a',{attrs:{"href":"/userGuide/components/popups.html#popovers"}},[_v("popovers")])]),_v(", Annotate Points also support different types of triggers and positions\nfor users with different needs.")]),_v(" "),_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("annotate")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../../images/annotateSampleImage.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"500\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sample Image\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"33%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"33%\"")]),_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(" />")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"66%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"33%\"")]),_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("trigger")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hover focus\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"66%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Popover on the left\"")]),_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("a-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"66%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Popover on the bottom\"")]),_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("a-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"75%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"66%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Popover on the right\"")]),_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-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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"66%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Popover on the bottom\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"bottom\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trigger")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hover focus\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('annotate',{attrs:{"src":"../../images/annotateSampleImage.png","width":"500","alt":"Sample Image"}},[_c('a-point',{attrs:{"x":"33%","y":"33%"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("Lorem ipsum dolor sit amet")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"66%","y":"33%","trigger":"hover focus"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("Lorem ipsum dolor sit amet")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"25%","y":"66%","placement":"left"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("Popover on the left")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"66%","placement":"bottom"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("Popover on the bottom")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"66%","placement":"right"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("Popover on the right")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"66%","placement":"bottom","trigger":"hover focus"},scopedSlots:_u([{key:"content",fn:function(){return [_c('p',[_v("Popover on the bottom")])]},proxy:true}])})],1)],1)],1)]),_v(" "),_c('br'),_v(" "),_c('p',[_c('strong',[_v("Displaying content as legends in Annotate Point")])]),_v(" "),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" allows users to display its content "),_c('span',{staticClass:"underline"},[_v("inside a popover")]),_v(" or "),_c('span',{staticClass:"underline"},[_v("as a legend below the diagram")]),_v(" or "),_c('span',{staticClass:"underline"},[_v("both")]),_v(". However, the label attribute must be specified in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" in order to display the content 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":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("annotate")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../../images/annotateSampleImage.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"500\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sample Image\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"There is only text when you click me\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("label")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"1\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Clicking on this does nothing\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("label")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"2\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("legend")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"bottom\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Headers are displayed as well\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"75%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"There is text at both locations\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("label")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"3\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("legend")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"both\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Headers are displayed at both positions\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('annotate',{attrs:{"src":"../../images/annotateSampleImage.png","width":"500","alt":"Sample Image"}},[_c('a-point',{attrs:{"x":"25%","y":"50%"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("1")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("There is only text when you click me")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"50%","legend":"bottom"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("2")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Headers are displayed as well")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("Clicking on this does nothing")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"50%","legend":"both"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("3")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Headers are displayed at both positions")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("There is text at both locations")])]},proxy:true}])})],1)],1)],1)]),_v(" "),_c('br'),_v(" "),_c('p',[_c('strong',[_v("Sample use cases for Annotate")]),_v(" "),_c('br')]),_v(" "),_c('p',[_v("Here we showcase some use cases of the Annotate feature.")]),_v(" "),_c('p',[_c('strong',[_v("Example 1: Describing elements in an image")]),_v(" "),_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":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("annotate")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../../images/annotateSampleObject.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("height")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"500\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sample Image\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"6%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"You can use a triangle and a solid line (not to be confused with an arrow) to indicate class inheritance.\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("label")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"1\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Class inheritance\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("legend")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"both\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25.5%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"UML uses a solid diamond symbol to denote composition.\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("label")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"2\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Composition\"")]),_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("legend")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"both\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"45%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"UML uses a hollow diamond to indicate an aggregation.\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("label")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"3\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Aggregation\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"blue\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("legend")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"both\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"64.5%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Association labels describe the meaning of the association.\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("label")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"4\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Association labels\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"yellow\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("legend")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"both\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('annotate',{attrs:{"src":"../../images/annotateSampleObject.png","height":"500","alt":"Sample Image"}},[_c('a-point',{attrs:{"x":"6%","y":"50%","legend":"both"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("1")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Class inheritance")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("You can use a triangle and a solid line (not to be confused with an arrow) to indicate class inheritance.")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"25.5%","y":"50%","color":"red","legend":"both"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("2")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Composition")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("UML uses a solid diamond symbol to denote composition.")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"45%","y":"50%","color":"blue","legend":"both"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("3")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Aggregation")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("UML uses a hollow diamond to indicate an aggregation.")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"64.5%","y":"50%","color":"yellow","legend":"both"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("4")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Association labels")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("Association labels describe the meaning of the association.")])]},proxy:true}])})],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Example 2: Drawing over elements")]),_v(" "),_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":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("annotate")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../../images/annotateSampleSequence.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("height")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"500\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sample Image\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"35%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"18.5%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Operation is invoked\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Operation\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("opacity")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"0.2\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"30\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"65%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This is the period during which the method is being executed\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Activation Bar\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("opacity")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"0.3\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"yellow\"")]),_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-point")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("x")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"14%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("y")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"85%\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Return control and possibly some return value\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Return Value\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("opacity")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"0.2\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"30\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"blue\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('annotate',{attrs:{"src":"../../images/annotateSampleSequence.png","height":"500","alt":"Sample Image"}},[_c('a-point',{attrs:{"x":"35%","y":"18.5%","opacity":"0.2","size":"30"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Operation")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("Operation is invoked")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"65%","y":"50%","opacity":"0.3","size":"50","color":"yellow"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Activation Bar")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("This is the period during which the method is being executed")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"14%","y":"85%","opacity":"0.2","size":"30","color":"blue"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Return Value")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("Return control and possibly some return value")])]},proxy:true}])})],1)],1)],1)]),_v(" "),_c('br'),_v(" "),_c('p',[_c('strong',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_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("x")]),_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 x-coordinate of the point."),_c('br'),_v("Supports range of values from "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0%")]),_v(" to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("100%")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("y")]),_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 y-coordinate of the point."),_c('br'),_v("Supports range of values from "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0%")]),_v(" to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("100%")]),_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("Annotate Point content."),_c('br'),_v("The annotation content will be omitted if this is not provided.")])]),_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("Annotate Point header."),_c('br'),_v("The header will be omitted if this is not provided.")])]),_v(" "),_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("click")])]),_v(" "),_c('td',[_v("Popover trigger type."),_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(", or any space-separated combination of these.")])]),_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("Position of 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(".")])]),_v(" "),_c('tr',[_c('td',[_v("label")]),_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 label shown on the point itself."),_c('br'),_v("The label will be omitted if this is not provided."),_c('br'),_v("Note that labels should not be too long as they might overflow out of the point.")])]),_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',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("'40'")])]),_v(" "),_c('td',[_v("The size of the point in pixels. "),_c('br'),_v(" Does not work with customised shapes")])]),_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("'green'")])]),_v(" "),_c('td',[_v("The color of the point."),_c('br'),_v("Supports any color in the CSS color format. E.g. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("red")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("#ffffff")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("rgb(66, 135, 245)")]),_v(", etc. "),_c('br'),_v(" Does not work with customised shapes")])]),_v(" "),_c('tr',[_c('td',[_v("opacity")]),_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("'0.3'")])]),_v(" "),_c('td',[_v("The opacity of the point."),_c('br'),_v("Supports range of values from "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0")]),_v(" to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("1")]),_v(". "),_c('br'),_v(" Does not work with customised shapes")])]),_v(" "),_c('tr',[_c('td',[_v("fontSize")]),_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("'14'")])]),_v(" "),_c('td',[_v("The font size of the label."),_c('br'),_v("Supports any pixel size smaller than size of the point.")])]),_v(" "),_c('tr',[_c('td',[_v("textColor")]),_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("'black'")])]),_v(" "),_c('td',[_v("The color of the label."),_c('br'),_v("Supports any color in the CSS color format. E.g. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("red")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("#ffffff")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("rgb(66, 135, 245)")]),_v(", etc.")])]),_v(" "),_c('tr',[_c('td',[_v("legend")]),_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("'popover'")])]),_v(" "),_c('td',[_v("The position of the Annotate Point content and header."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("popover")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bottom")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("both")]),_v(".")])])])])]),_c('p',[_c('strong',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" Options")])])]),_v(" "),_c('p',[_v("This is effectively the same as the options used for the "),_c('a',{attrs:{"href":"#pictures"}},[_v("picture")]),_v(" component.")]),_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("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("height")]),_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 height of the image in pixels.")])]),_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',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_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("lazy")]),_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 if this attribute is specified."),_c('br'),_c('strong',[_v("Either the height or width should be specified to avoid layout shifts while lazy loading images.")])])])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("\n")]),_c('span',[_v(" \n")]),_c('span',[_v(" \n")]),_c('span',[_v(" \n")]),_c('span',[_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('annotate',{attrs:{"src":"https://markbind.org/userGuide/diagrams/object.png","height":"500","alt":"Sample Image"}},[_c('a-point',{attrs:{"x":"6%","y":"50%"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("1")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Class inheritance")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("You can use a triangle and a solid line (not to be confused with an arrow) to indicate class inheritance.")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"25.5%","y":"50%","color":"red"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("2")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Composition")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("UML uses a solid diamond symbol to denote composition.")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"45%","y":"50%","color":"blue"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("3")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Aggregation")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("UML uses a hollow diamond to indicate an aggregation.")])]},proxy:true}])}),_v(" "),_c('a-point',{attrs:{"x":"64.5%","y":"50%","color":"yellow"},scopedSlots:_u([{key:"label",fn:function(){return [_c('p',[_v("4")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Association labels")])]},proxy:true},{key:"content",fn:function(){return [_c('p',[_v("Association labels describe the meaning of the association.")])]},proxy:true}])})],1)],1)],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless","no-close":"","popup-url":"/userGuide/formattingContents.html#classes-attributes-and-amp-identifiers","panelId":"classes-attributes-and-amp-identifiers"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{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()"}})])]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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-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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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"}},[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{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('div',{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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_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('panel',{attrs:{"type":"seamless","no-close":"","popup-url":"/userGuide/components/presentation.html#badges","panelId":"badges"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{attrs:{"id":"badges"}},[_c('strong',[_v("Badges")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#badges","onclick":"event.stopPropagation()"}})])]),_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 bg-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 rounded-pill bg-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 bg-light text-dark\"")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"badges-2"}},[_v("Badges"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#badges-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Example:")])]),_v(" "),_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("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge bg-primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v("Some Plain Text\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(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge bg-primary\"")]),_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("_Some Markdown_"),_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:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{staticClass:"badge bg-primary"},[_v("\nSome Plain Text\n")]),_v(" "),_c('span',{staticClass:"badge bg-primary"},[_c('span',[_c('em',[_v("Some Markdown")])])])])],1)]),_v(" "),_c('p',[_c('strong',[_v("You can choose from a variety of colors for your badges. You can also use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("rounded-pill")]),_v(" class to make the badges pill-shaped.")])]),_v(" "),_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',[_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 bg-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 bg-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 bg-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 bg-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 bg-warning text-dark\"")]),_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 bg-info text-dark\"")]),_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 bg-light text-dark\"")]),_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 bg-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 rounded-pill bg-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 rounded-pill bg-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 rounded-pill bg-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 rounded-pill bg-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 rounded-pill bg-warning text-dark\"")]),_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 rounded-pill bg-info text-dark\"")]),_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 rounded-pill bg-light text-dark\"")]),_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 rounded-pill bg-dark\"")]),_v(">")]),_v("Dark"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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 bg-primary"},[_v("Primary")]),_v(" "),_c('span',{staticClass:"badge bg-secondary"},[_v("Secondary")]),_v(" "),_c('span',{staticClass:"badge bg-success"},[_v("Success")]),_v(" "),_c('span',{staticClass:"badge bg-danger"},[_v("Danger")]),_v(" "),_c('span',{staticClass:"badge bg-warning text-dark"},[_v("Warning")]),_v(" "),_c('span',{staticClass:"badge bg-info text-dark"},[_v("Info")]),_v(" "),_c('span',{staticClass:"badge bg-light text-dark"},[_v("Light")]),_v(" "),_c('span',{staticClass:"badge bg-dark"},[_v("Dark")]),_v(" "),_c('br'),_v("Pills:\n"),_c('span',{staticClass:"badge rounded-pill bg-primary"},[_v("Primary")]),_v(" "),_c('span',{staticClass:"badge rounded-pill bg-secondary"},[_v("Secondary")]),_v(" "),_c('span',{staticClass:"badge rounded-pill bg-success"},[_v("Success")]),_v(" "),_c('span',{staticClass:"badge rounded-pill bg-danger"},[_v("Danger")]),_v(" "),_c('span',{staticClass:"badge rounded-pill bg-warning text-dark"},[_v("Warning")]),_v(" "),_c('span',{staticClass:"badge rounded-pill bg-info text-dark"},[_v("Info")]),_v(" "),_c('span',{staticClass:"badge rounded-pill bg-light text-dark"},[_v("Light")]),_v(" "),_c('span',{staticClass:"badge rounded-pill bg-dark"},[_v("Dark")])])])],1)]),_v(" "),_c('p',[_c('strong',[_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":"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 bg-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 rounded-pill bg-warning text-dark\"")]),_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 bg-light text-dark\"")]),_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 bg-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 rounded-pill bg-success\"")]),_v(">")]),_v("stable"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" {.no-index}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("Links:\n"),_c('a',{staticClass:"badge bg-primary",attrs:{"href":"#"}},[_v("Primary")]),_v(" "),_c('a',{staticClass:"badge rounded-pill bg-warning text-dark",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 bg-light text-dark"},[_v("4")])])]),_v(" "),_c('p',[_v("Headings:")]),_v(" "),_c('h3',{staticClass:"no-index",attrs:{"id":"feature-x-beta"}},[_v("Feature X "),_c('span',{staticClass:"badge bg-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"}},[_v("Feature Y "),_c('span',{staticClass:"badge rounded-pill bg-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/5.1/components/badge/"}},[_v("Bootstrap documentation")]),_v(" to find more information about Badges.")])])]),_v(" "),_c('div',{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 bg-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 rounded-pill bg-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 bg-light text-dark\"")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_c('span',{staticClass:"badge bg-primary"},[_v("Primary")]),_v(" "),_c('span',{staticClass:"badge rounded-pill bg-success"},[_v("Success")]),_v(" "),_c('button',{staticClass:"btn btn-primary",attrs:{"type":"button"}},[_v("\nDifficulty Level "),_c('span',{staticClass:"badge bg-light text-dark"},[_v("4")])])]),_v(" "),_c('h5',{staticClass:"no-index",attrs:{"id":"feature-y-stable-2"}},[_v("Feature Y "),_c('span',{staticClass:"badge rounded-pill bg-warning text-dark"},[_v("stable")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#feature-y-stable-2","onclick":"event.stopPropagation()"}})])])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless","no-close":"","popup-url":"/userGuide/formattingContents.html#blockquotes","panelId":"blockquotes"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{attrs:{"id":"blockquotes"}},[_c('strong',[_v("Blockquotes")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#blockquotes","onclick":"event.stopPropagation()"}})])]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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")])])])])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless","no-close":"","popup-url":"/userGuide/components/presentation.html#boxes","panelId":"boxes"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{attrs:{"id":"boxes"}},[_c('strong',[_v("Boxes")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#boxes","onclick":"event.stopPropagation()"}})])]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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("Simple Example")])]),_v(" "),_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("box")]),_v(">")]),_v("\n")]),_c('span',[_v("plain text\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(">")]),_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("_markdown_"),_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:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("\nplain text\n")]),_v(" "),_c('box',[_c('span',[_c('em',[_v("markdown")])])])],1)],1)]),_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":"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(" 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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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"}},[_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":"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("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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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"}},[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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"}},[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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-background")]),_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("background-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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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","no-close":"","popup-url":"/userGuide/components/navigation.html#breadcrumbs","panelId":"breadcrumbs"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{attrs:{"id":"breadcrumbs"}},[_c('strong',[_v("Breadcrumbs")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#breadcrumbs","onclick":"event.stopPropagation()"}})])]),_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("breadcrumb")]),_v(" />")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"breadcrumbs-2"}},[_v("Breadcrumbs"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#breadcrumbs-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Breadcrumb components provide an easy way for readers to navigate the hierarchy of the site.")]),_v(" "),_c('h4',{attrs:{"id":"usage"}},[_v("Usage"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#usage","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Simply include the breadcrumb component ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(") into the page you want and breadcrumbs for that page will be automatically generated.")]),_v(" "),_c('p',[_v("You can also insert the breadcrumb component into a layout file to generate breadcrumbs for all pages using that layout.")]),_v(" "),_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("breadcrumb")]),_v(" />")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('blockquote',[_c('breadcrumb')],1)]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_v("\n Breadcrumb components refer to the Site Navigation for the hierarchy of pages.\n"),_c('p',[_c('strong',[_v("Breadcrumbs will not appear if there is no Site Navigation present on the page!")])])]),_v(" "),_c('div',{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("breadcrumb")]),_v(" />")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('breadcrumb')],1)],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless","no-close":"","popup-url":"/userGuide/formattingContents.html#code","panelId":"code"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{attrs:{"id":"code"}},[_c('strong',[_v("Code")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#code","onclick":"event.stopPropagation()"}})])]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("`goo`{.xml}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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"}},[_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 "),_c('trigger',{attrs:{"for":"modal:code-dark-example","trigger":"click"}},[_c('em',[_v("(click for an example)")])]),_v(".")],1),_v(" "),_c('modal',{attrs:{"id":"modal:code-dark-example"},scopedSlots:_u([{key:"header",fn:function(){return [_v("Dark Code Theme")]},proxy:true}])},[_v(" "),_c('p',[_c('pic',{attrs:{"src":"/images/codeDarkTheme.png","alt":"Theme example"}})],1)]),_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"}},[_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"}},[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])],1)])]),_v(" "),_c('h5',{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 "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("Line numbers were provided by default in version v3.1.1 and below. To preserve the exact line numbers behavior of sites generated in previous versions, simply set the codeLineNumbers option in site.json to true")]},proxy:true}])},[_v("hidden by default")]),_v(". To enable line numbers for the entire site by default,\nadd "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"codeLineNumbers\": true")]),_v(" to the "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#style"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")])]),_v(" file:")],1),_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-comment"}},[_v("// ...")]),_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(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"codeLineNumbers\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-literal"}},[_v("true")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// optional, false if omitted")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// code below omitted for brevity")]),_v("\n")]),_c('span',[_v("}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_c('p',[_v("For each code block, you may also use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("line-numbers")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-line-numbers")]),_v(" classes to override the site-wide setting as such:")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```xml {.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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])],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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"line-numbers 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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])],1)]),_v(" "),_c('h5',{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 examples\nbelow for a visual demonstration of all the possible ways of highlighting a code block.")]),_v(" "),_c('p',[_c('strong',[_v("Full text highlight")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```js {start-from=6 .line-numbers highlight-lines=\"7, 9\"}")]),_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(" const sum = a + b;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" console.log(`${a} + ${b} = ${sum}`);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return sum;")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"line-numbers hljs js","style":"counter-reset: line 5;"}},[_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":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("const")]),_v(" sum = a + b;")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-built_in"}},[_v("console")]),_v(".log("),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("`"),_c('span',{pre:true,attrs:{"class":"hljs-subst"}},[_v("${a}")]),_v(" + "),_c('span',{pre:true,attrs:{"class":"hljs-subst"}},[_v("${b}")]),_v(" = "),_c('span',{pre:true,attrs:{"class":"hljs-subst"}},[_v("${sum}")]),_v("`")]),_v(");\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" sum;")]),_v("\n")]),_c('span',[_v("}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])],1)]),_v(" "),_c('p',[_c('strong',[_v("Substring highlight")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```js {.line-numbers highlight-lines=\"1['function'], 2['a'], 2['b'], 4['diff']\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("function subtract(a, b) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" const diff = a - b;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" console.log(`${a} + ${b} = ${diff}`);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return diff;")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"line-numbers hljs js"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword highlighted"}},[_v("function")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("subtract")]),_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("const")]),_c('span',[_v(" diff = "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("a")]),_c('span',[_v(" - "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("b")]),_v(";\n")])])]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-built_in"}},[_v("console")]),_v(".log("),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("`"),_c('span',{pre:true,attrs:{"class":"hljs-subst"}},[_v("${a}")]),_v(" + "),_c('span',{pre:true,attrs:{"class":"hljs-subst"}},[_v("${b}")]),_v(" = "),_c('span',{pre:true,attrs:{"class":"hljs-subst"}},[_v("${diff}")]),_v("`")]),_v(");\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("diff")]),_v(";\n")])]),_c('span',[_v("}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])],1)]),_v(" "),_c('p',[_c('strong',[_v("Character-bounded highlight")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```js {.line-numbers highlight-lines=\"1[0:3], 1[6:10], 2[5:], 3[:6]\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("function multiply(a, b) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" const product = a * b;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" console.log('Product = ${product}');")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return product;")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"line-numbers hljs js"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("fun")]),_c('span',[_v("cti"),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("on")])])])]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")]),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("m")]),_v("ultiply")])]),_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("const")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" product = a * b;")]),_v("\n")])]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-built_in"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("consol")]),_v("e")])]),_v(".log("),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'Product = ${product}'")]),_v(");\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" product;\n")]),_c('span',[_v("}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])],1)]),_v(" "),_c('p',[_c('strong',[_v("Word-bounded highlight")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```js {.line-numbers highlight-lines=\"1[1::3], 1[5::7], 2[2::], 3[::3]\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("// Function returns the distance travelled assuming constant speed")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("function calculateDistance(speed, time) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" const distance = speed * time;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" console.log(`Distance travelled = ${distance}`);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return distance;")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"line-numbers hljs js"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_c('span',[_v("// "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("Function returns")]),_c('span',[_v(" the distance "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("travelled assuming")]),_v(" constant speed")])])]),_v("\n")]),_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("calculateDistance")]),_v("("),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_c('span',[_v("speed, "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("time")])])]),_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":"hljs-keyword highlighted"}},[_v("const")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" distance =")]),_v(" speed * time;\n")])]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-built_in"}},[_v("console")]),_v(".log("),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("`Distance travelled = "),_c('span',{pre:true,attrs:{"class":"hljs-subst"}},[_v("${distance}")]),_v("`")]),_v(");\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" distance;\n")]),_c('span',[_v("}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])],1)]),_v(" "),_c('p',[_c('strong',[_v("Full-line highlight")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```js {start-from=10 .line-numbers highlight-lines=\"11[:]\"}")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"line-numbers hljs js","style":"counter-reset: line 9;"}},[_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',{pre:true,attrs:{"class":"highlighted"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" a + b;\n")]),_c('span',[_v("}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])],1)]),_v(" "),_c('p',[_c('strong',[_v("Sample Combined Usage")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```java {.line-numbers highlight-lines=\"1[:],3['Inventory'],3[4::6],4['It\\'s designed'],5,6[8:15],6[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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"line-numbers 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")]),_c('span',[_v(" is a "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("class that")]),_v(" 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"),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" items;")]),_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 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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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"}},[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])])],1)]),_v(" "),_c('h5',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])])],1)]),_v(" "),_c('h5',{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"}},[_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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"}},[_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"}},[_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('h5',{attrs:{"id":"printing-optimization"}},[_v("Printing optimization"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#printing-optimization","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{attrs:{"id":"code-print-optimization"}},[_v("\nMarkbind enhances the readability of your code blocks for printing by \n"),_c('ul',[_c('li',[_v("Applying soft wrapping, ensuring code doesn't get cut off")]),_v(" "),_c('li',[_v("Adding line numbers to maintain context when wrapping occurs")]),_v(" "),_c('li',[_v("Automatically changing dark code theme to light")]),_v(" "),_c('li',[_v("Removing "),_c('a',{attrs:{"href":"/userGuide/formattingContents.html#copy-button"}},[_v("codeBlockCopyButtons")]),_v(" and "),_c('a',{attrs:{"href":"/userGuide/formattingContents.html#wrap-text-button"}},[_v("codeBlockWrapButtons")])])]),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_v(" \n There are some issues with printing in Firefox. Please use other browsers such as Chrome if these issues persist.\n")])],1),_v(" "),_c('br'),_v(" "),_c('h4',{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"}},[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("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('h5',{attrs:{"id":"displaying-content-within-curly-braces-content"}},[_v("Displaying content within curly braces: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{{ content }}")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#displaying-content-within-curly-braces-content","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("If your code contains 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 "),_c('a',{attrs:{"href":"/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 %} {{ content }} {% endraw %}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_c('div',{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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("`goo`{.xml}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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","no-close":"","popup-url":"/userGuide/formattingContents.html#dates","panelId":"dates"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{attrs:{"id":"dates"}},[_c('strong',[_v("Dates")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#dates","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('div',[_c('box',[_c('span',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ baseDate | date(format, daysToAdd) }}")]),_v(" "),_c('br')])])],1)])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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"}},[_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"}},[_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"}},[_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":"nunjucks-variables"}},[_v("Nunjucks variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#nunjucks-variables","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Dates can be supplied using "),_c('a',{attrs:{"href":"/userGuide/reusingContents.html#variables"}},[_v("Nunjucks variables")]),_v(" for convenience.")]),_v(" "),_c('p',[_v("Inside the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".md")]),_v(" file of a page:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("{% set date_pagevar = \"2020-03-06\" %}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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"}},[_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('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Token")]),_v(" "),_c('th',[_v("Output")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("D")]),_v(" "),_c('td',[_v("1")])]),_v(" "),_c('tr',[_c('td',[_v("Do")]),_v(" "),_c('td',[_v("1st")])]),_v(" "),_c('tr',[_c('td',[_v("DD")]),_v(" "),_c('td',[_v("01")])]),_v(" "),_c('tr',[_c('td',[_v("M")]),_v(" "),_c('td',[_v("1")])]),_v(" "),_c('tr',[_c('td',[_v("MM")]),_v(" "),_c('td',[_v("01")])]),_v(" "),_c('tr',[_c('td',[_v("MMM")]),_v(" "),_c('td',[_v("Jan")])]),_v(" "),_c('tr',[_c('td',[_v("MMMM")]),_v(" "),_c('td',[_v("January")])]),_v(" "),_c('tr',[_c('td',[_v("YY")]),_v(" "),_c('td',[_v("19")])]),_v(" "),_c('tr',[_c('td',[_v("YYYY")]),_v(" "),_c('td',[_v("2019")])])])])])]),_v(" "),_c('p',[_v("Full formatting reference available "),_c('a',{attrs:{"href":"https://day.js.org/docs/en/parse/string-format#list-of-all-available-parsing-tokens"}},[_v("here")]),_v(" and "),_c('a',{attrs:{"href":"https://day.js.org/docs/en/plugin/advanced-format"}},[_v("here")]),_v(".")]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_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('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('box',[_c('span',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ baseDate | date(format, daysToAdd) }}")]),_v(" "),_c('br')])])],1)],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless","no-close":"","popup-url":"/userGuide/components/imagesAndDiagrams.html#diagrams","panelId":"diagrams"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{attrs:{"id":"diagrams"}},[_c('strong',[_v("Diagrams")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#diagrams","onclick":"event.stopPropagation()"}})])]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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',[_v("The following additional dependencies are involved when using this feature")]),_v(" "),_c('em',[_v("("),_c('strong',[_v("locally")]),_v(" and in your "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("E.g: Building & deploying the site via GitHub Actions")]},proxy:true}])},[_c('strong',[_v("CI/CD environment")])]),_v(")")],1)]),_v(" "),_c('ul',[_c('li',[_v("Java 8 or higher (required - to run the PlantUML JAR executable)")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.graphviz.org/download/"}},[_v("Graphviz")]),_v(" "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("Some versions are not recommended, as mentioned "),_c('a',{attrs:{"href":"https://plantuml.com/graphviz-dot#:~:text=Important%20note%20about%20version"}},[_v("here")])]},proxy:true}])},[_v("v2.38")]),_v(" or higher (optional - you don't need this if you are on Windows, or only need "),_c('a',{attrs:{"href":"https://plantuml.com/sequence-diagram"}},[_v("sequence diagrams")]),_v(" and "),_c('a',{attrs:{"href":"https://plantuml.com/activity-diagram-beta"}},[_v("activity (beta) diagrams")]),_v(")\n"),_c('ul',[_c('li',[_v("A warning will be displayed if you are using a non-Windows platform and don't have Graphviz installed. To disable this warning, you may modify your "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" like "),_c('trigger',{attrs:{"for":"pop:prerequisite-disable","placement":"bottom","trigger":"click"}},[_v("this")]),_v(".")],1),_v(" "),_c('li',[_v("An alternative layout engine, "),_c('a',{attrs:{"href":"https://plantuml.com/smetana02"}},[_v("Smetana")]),_v(", is integrated into PlantUML and can be used to generate diagrams without a Graphviz installation. However, as the Smetana engine is a work in progress, certain layouts may not render correctly.")])])],1)]),_v(" "),_c('modal',{attrs:{"id":"pop:prerequisite-disable","backdrop":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Disabling PlantUML's prerequisite check 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("\"plantumlCheck\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-literal"}},[_v("false")]),_v(",\n")]),_c('span',[_v("...\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])]),_v(" "),_c('panel',{attrs:{"minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Example: Installing the above dependencies in GitHub Actions")])]},proxy:true}])},[_v("\nThe following steps can be "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("Before the build step")]},proxy:true}])},[_v("added")]),_v(" in your workflow file to install Graphviz and Java in Ubuntu.\n"),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("action.yml")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"action.yml","class":"hljs yaml"}},[_c('span',[_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("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Install")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Graphviz")]),_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("sudo")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("apt-get")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("install")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("graphviz")]),_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("Java")]),_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-java@v3")]),_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("java-version:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'11'")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("distribution:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'temurin'")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])]),_c('p',[_v("See "),_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html#deploying-via-github-actions"}},[_v("Deploying via Github Actions")]),_v(" for more information.")])],1)],1),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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:{"width":"300","src":"/d630202036a147797be33619bbe2f07b.png"}})],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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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(" />")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"/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 plantuml.com/guide")])]),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("More examples")])]},proxy:true}])},[_v(" "),_c('div',{attrs:{"id":"puml-examples"}},[_c('p',[_c('strong',[_v("Sequence Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/sequence.png"}}),_v(" "),_c('p',[_c('strong',[_v("Use Case Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/usecase.png"}}),_v(" "),_c('p',[_c('strong',[_v("Class Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/class.png"}}),_v(" "),_c('p',[_c('strong',[_v("Activity Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/activity.png"}}),_v(" "),_c('p',[_c('strong',[_v("Component Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/component.png"}}),_v(" "),_c('p',[_c('strong',[_v("State Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/state.png"}}),_v(" "),_c('p',[_c('strong',[_v("Object Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/object.png"}}),_v(" "),_c('p',[_c('strong',[_v("Gantt Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/gantt.png"}}),_v(" "),_c('p',[_c('strong',[_v("Entity Relation Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/entityrelation.png"}}),_v(" "),_c('p',[_c('strong',[_v("Ditaa Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/ditaa.png"}}),_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."),_c('br'),_v("Avoid using the same name for different diagrams to prevent overwriting.")])]),_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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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"}}),_v(" "),_c('p',[_c('strong',[_v("Use Case Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/usecase.png"}}),_v(" "),_c('p',[_c('strong',[_v("Class Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/class.png"}}),_v(" "),_c('p',[_c('strong',[_v("Activity Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/activity.png"}}),_v(" "),_c('p',[_c('strong',[_v("Component Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/component.png"}}),_v(" "),_c('p',[_c('strong',[_v("State Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/state.png"}}),_v(" "),_c('p',[_c('strong',[_v("Object Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/object.png"}}),_v(" "),_c('p',[_c('strong',[_v("Gantt Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/gantt.png"}}),_v(" "),_c('p',[_c('strong',[_v("Entity Relation Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/entityrelation.png"}}),_v(" "),_c('p',[_c('strong',[_v("Ditaa Diagram")]),_v(":"),_c('br')]),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/ditaa.png"}}),_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","no-close":"","popup-url":"/userGuide/components/navigation.html#dropdowns","panelId":"dropdowns"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{attrs:{"id":"dropdowns"}},[_c('strong',[_v("Dropdowns")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#dropdowns","onclick":"event.stopPropagation()"}})])]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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/5.1/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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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","no-close":"","popup-url":"/userGuide/formattingContents.html#embeds","panelId":"embeds"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{attrs:{"id":"embeds"}},[_c('strong',[_v("Embeds")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#embeds","onclick":"event.stopPropagation()"}})])]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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"}},[_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":"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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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",staticStyle:{"position":"relative","padding-bottom":"60.9375%"}},[_c('iframe',{attrs:{"type":"text/html","src":"//www.youtube.com/embed/v40b3ExbM0c","frameborder":"0","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"}},[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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-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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("Embedded YouTube video:")]),_v(" "),_c('div',{staticClass:"block-embed block-embed-service-youtube",staticStyle:{"position":"relative","padding-bottom":"60.9375%"}},[_c('iframe',{attrs:{"type":"text/html","src":"//www.youtube.com/embed/v40b3ExbM0c","frameborder":"0","webkitallowfullscreen":"","mozallowfullscreen":"","allowfullscreen":""}})]),_v(" "),_c('p',[_v("Embedded slide deck:")]),_v(" "),_c('div',{staticClass:"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","no-close":"","popup-url":"/userGuide/formattingContents.html#emoji","panelId":"emoji"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{attrs:{"id":"emoji"}},[_c('strong',[_v("Emoji")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#emoji","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v(":+1: :exclamation: :x: :construction: :) :/ :D\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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":"hljs markdown"}},[_c('span',[_v(":+1: :exclamation: :x: :construction: :) :/ :D\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("πŸ‘ ❗️ ❌ 🚧 πŸ˜ƒ πŸ˜• πŸ˜„")])])],1)])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" The list of supported "),_c('a',{attrs:{"href":"https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md"}},[_v("emoji")]),_v(" and "),_c('a',{attrs:{"href":"https://github.com/markdown-it/markdown-it-emoji/blob/master/lib/data/shortcuts.mjs"}},[_v("emoticon shortcuts")]),_v(".")])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v(":+1: :exclamation: :x: :construction: :) :/ :D\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("πŸ‘ ❗️ ❌ 🚧 πŸ˜ƒ πŸ˜• πŸ˜„")])])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless","no-close":"","popup-url":"/userGuide/formattingContents.html#footnotes","panelId":"footnotes"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{attrs:{"id":"footnotes"}},[_c('strong',[_v("Footnotes")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#footnotes","onclick":"event.stopPropagation()"}})])]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"footnotes-2"}},[_v("Footnotes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#footnotes-2","onclick":"event.stopPropagation()"}})]),_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":"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.^[Inline 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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("Normal footnotes:")]),_v("\nHere is a footnote reference,"),_c('trigger',{attrs:{"for":"pop:footnotefn-75-1"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-75-1"}},[_v("[1]")])])]),_v(" and another."),_c('trigger',{attrs:{"for":"pop:footnotefn-75-2"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-75-2"}},[_v("[2]")])])])],1),_v(" "),_c('p',[_c('strong',[_v("Inline footnotes:")]),_v("\nHere is an inline note."),_c('trigger',{attrs:{"for":"pop:footnotefn-75-3"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-75-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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("1 + 1 = 2 "),_c('trigger',{attrs:{"for":"pop:footnotefn-74-1"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-74-1"}},[_v("[1]")])])])],1)])],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless","no-close":"","popup-url":"/userGuide/tweakingThePageStructure.html#frontmatter","panelId":"frontmatter"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{attrs:{"id":"frontmatter"}},[_c('strong',[_v("Frontmatter")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#frontmatter","onclick":"event.stopPropagation()"}})])]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"frontmatter-2"}},[_v("Frontmatter"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#frontmatter-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("You can use a "),_c('em',[_v("frontmatter")]),_v(" section to specify page properties such as the title and keywords of the page.")]),_v("\nTo specify frontmatter 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."),_c('br'),_v("\nYou can use YAML-style frontmatter syntax "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("---")]),_v(" as well.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('table',{staticStyle:{"width":"100%"}},[_c('tbody',[_c('tr',[_c('th',{staticStyle:{"width":"45%","padding-right":"5%"}},[_v("Frontmatter")]),_v(" "),_c('th',{staticStyle:{"width":"45%","padding-left":"5%"}},[_v("YAML-style Frontmatter Syntax")])]),_v(" "),_c('tr',[_c('td',{staticStyle:{"padding-right":"5%"}},[_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:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('td',{staticStyle:{"padding-left":"5%"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("---\n")]),_c('span',[_v(" property1: value1\n")]),_c('span',[_v(" property2: value2\n")]),_c('span',[_v("---\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])])])])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-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(".")]),_v(" "),_c('div',[_c('table',{staticStyle:{"width":"100%"}},[_c('tbody',[_c('tr',[_c('th',{staticStyle:{"width":"45%","padding-right":"5%"}},[_v("Frontmatter")]),_v(" "),_c('th',{staticStyle:{"width":"45%","padding-left":"5%"}},[_v("YAML-style Frontmatter Syntax")])]),_v(" "),_c('tr',[_c('td',{staticStyle:{"padding-right":"5%"}},[_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('td',{staticStyle:{"padding-left":"5%"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("---\n")]),_c('span',[_v(" title: Binary Search Tree\n")]),_c('span',[_v("---\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('box',{attrs:{"type":"warning","seamless":""}},[_c('p',[_v("If a page has multiple frontmatters, it will take the last frontmatter by default. You may make use of "),_c('a',{attrs:{"href":"/userGuide/reusingContents.html#includes"}},[_v("omitFrontmatter")]),_v(", which is an attribute of MarkBind's feature to omit the frontmatters that are not needed.")])]),_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',[_c('a',{attrs:{"href":"#pages"}},[_v("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 frontmatter of the page. For example, if we declare a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("title")]),_v(" within the frontmatter of the page (say "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("index.md")]),_v(") like such:")]),_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',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_c('p',[_v("But the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("title")]),_v(" property in the corresponding "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" is set as such:")]),_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("\"Landing Page\"")]),_v(",\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v("}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_c('p',[_v("Then, the title of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("index.md")]),_v(" will be set as \"Landing Page\" instead of \"Hello World\".")]),_v(" "),_c('p',[_v("In this manner, setting the property "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("title")]),_v(" in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" will always override the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("title")]),_v(" declared within the frontmatter of the page.")])])],1),_v(" "),_c('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless","no-close":"","popup-url":"/userGuide/formattingContents.html#headings","panelId":"headings"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{attrs:{"id":"headings"}},[_c('strong',[_v("Headings")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#headings","onclick":"event.stopPropagation()"}})])]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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"}},[_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"}},[_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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless","no-close":"","popup-url":"/userGuide/formattingContents.html#horizontal-rules","panelId":"horizontal-rules"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{attrs:{"id":"horizontal-rules"}},[_c('strong',[_v("Horizontal Rules")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#horizontal-rules","onclick":"event.stopPropagation()"}})])]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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"}},[_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{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 combination 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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{staticClass:"dashed thick-3"}),_v(" "),_c('hr',{staticClass:"double border-secondary"}),_v(" "),_c('hr',{staticClass:"dotted thick-1 border-primary"})])],1)]),_v(" "),_c('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('hr')])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless","no-close":"","popup-url":"/userGuide/formattingContents.html#icons","panelId":"icons"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{attrs:{"id":"icons"}},[_c('strong',[_v("Icons")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#icons","onclick":"event.stopPropagation()"}})])]),_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("fa-brands-github:")]),_v(" "),_c('code',{pre:true},[_v(":"),_c('span'),_v("fa-solid-home:")])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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 its cover! πŸ‘Ž")])]),_v(" "),_c('li',[_v("font icons: "),_c('span',{staticStyle:{"color":"purple"}},[_v("Don't judge the "),_c('span',{staticClass:"fa-solid fa-book",attrs:{"aria-hidden":"true"}}),_v(" by its cover! "),_c('span',{staticClass:"fas fa-thumbs-down",attrs:{"aria-hidden":"true"}})])])])])],1),_v(" "),_c('h6',{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('box',{attrs:{"type":"info","seamless":""}},[_c('p',[_v("MarkBind currently supports Version 6 of Font Awesome (Free plan). For detailed changes between versions, refer to "),_c('a',{attrs:{"href":"https://fontawesome.com/docs/web/setup/upgrade/whats-changed"}},[_v("Font Awesome's documentation")]),_v(".")])]),_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 two 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("fa-solid-")]),_v(") e.g., "),_c('span',{staticClass:"fa-solid 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("fa-solid-file-code")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Brands")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fa-brands-")]),_v("): e.g., "),_c('span',{staticClass:"fa-brands 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("fa-brands-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"}},[_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('div',{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("fa-brands-github:")]),_v(" "),_c('code',{pre:true},[_v(":"),_c('span'),_v("fa-solid-home:")])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fa-brands fa-github",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fa-solid 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:"fa-brands fa-github",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fa-solid 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:"fa-brands fa-github",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fa-solid fa-home",attrs:{"aria-hidden":"true"}})])])]),_v(" "),_c('h6',{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"}},[_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","no-close":"","popup-url":"/userGuide/formattingContents.html#images","panelId":"images"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{attrs:{"id":"images"}},[_c('strong',[_v("Images")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#images","onclick":"event.stopPropagation()"}})])]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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":"hljs markdown"}},[_c('span',[_v("![](https://markbind.org/images/logo-lightbackground.png)\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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":"alt text here","title":"title here"}})])])]),_v(" "),_c('p',[_c('strong',[_v("Adjusting image dimension")])]),_v(" "),_c('p',[_v("MarkBind also supports the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("=Wx")]),_v(" shorthand for specifying image width:")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("This image has a width of 100px: ![](https://markbind.org/images/logo-lightbackground.png =100x)\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("This image has a width of 100px: "),_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":"","width":"100"}})])])])],1)]),_v(" "),_c('box',{attrs:{"type":"info"}},[_v("\n The width of images cannot exceed that of their parent container. If the specified width is too large, it will be ignored.\n")]),_v(" "),_c('p',[_v("MarkBind does not support setting the height of images through the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("=WxH")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("=xH")]),_v(" syntax. This is because images are automatically resized to ensure responsiveness based on their width.")]),_v(" "),_c('p',[_c('strong',[_v("Auto-linkify")])]),_v(" "),_c('p',[_v("MarkBind automatically wraps images with link to the image URL such that one can click on the image to view the full 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":"hljs markdown"}},[_c('span',[_v("Click on the image to open the image: !["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("logo")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org/images/logo-lightbackground.png =150x")]),_v(")\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("Click on the image to open the image: "),_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":"logo","width":"150"}})])])])],1)]),_v(" "),_c('p',[_v("If the image is wrapped with a link, the link will be used instead.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("Clicking on this image will bring you to the MarkBind homepage (instead of opening the image):\n")]),_c('span',[_v("["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("![logo")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org/images/logo-lightbackground.png =150x")]),_v(")]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org")]),_v(")\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("Clicking on this image will bring you to the MarkBind homepage (instead of opening the image):\n"),_c('a',{attrs:{"href":"https://markbind.org"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","alt":"logo","width":"150"}})])])])],1)])],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless","no-close":"","popup-url":"/userGuide/reusingContents.html#includes","panelId":"includes"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{attrs:{"id":"includes"}},[_c('strong',[_v("Includes")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#includes","onclick":"event.stopPropagation()"}})])]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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-2"}},[_v("Includes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#includes-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{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.")])]),_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-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.")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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(" tag with the matching "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(".")]),_v(" "),_c('box',{attrs:{"type":"important","seamless":""}},[_c('p',[_v("Choose "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<div>")]),_v(" over "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<span>")]),_v(" when wrapping block-level elements, to prevent invalid HTML markup which causes "),_c('a',{attrs:{"href":"https://vuejs.org/guide/scaling-up/ssr.html#hydration-mismatch"}},[_v("hydration issues")]),_v(".")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Including a fragment from a file:")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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('div',[_c('box',{attrs:{"type":"warning"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h4',{attrs:{"id":"global-effects-of-the-script-and-styles-from-the-imported-externals"}},[_v("Global Effects of the Script and Styles from the Imported Externals"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#global-effects-of-the-script-and-styles-from-the-imported-externals","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('p',[_v("Importing external resources that contains "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("script")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("styles")]),_v(" can inadvertently take global effects on your MarkBind website. Due to hoisting during processing, imported scripts and stylesheets affect the entire page. This could potentially alter its appearance and behavior beyond the intended scope.")]),_v(" "),_c('p',[_v("For example, if a CSS file imported via such means styles headings to be red, this change will be reflected page-wide.")]),_v(" "),_c('p',[_v("To safeguard against unintended consequences, consider directly incorporating the code or customizing styles to target specific elements or classes not used universally. This approach grants more precise control over your website's presentation and reduces the risk of unexpected changes.")])])],1),_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("frontmatter")]),_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('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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("omitFrontmatter")])]),_v(" (optional): omit the frontmatter of the file/fragment from being included (if any)."),_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("omitFrontmatter")]),_v(" />")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])]),_v(" "),_c('h5',{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('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("i.e., the file containing the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")])]},proxy:true}])},[_v("host file")]),_v(" is included from another file.")],1)]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Suppose you have a MarkBind project with the following file structure.")]),_v(" "),_c('div',{staticClass:"tree"},[_v("C:/mySite/\nβ”œβ”€β”€ bookFiles/\nβ”‚ β”œβ”€β”€ book.md\nβ”‚ β”œβ”€β”€ chapter1.md\nβ”‚ └── chapter2.md\n└── reviewFiles/\n └── review.md\n")]),_v(" "),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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"}},[_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-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:")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-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:")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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.\nThis is to allow the outer context to adapt the reused content without changing its actual content.")]),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Preventing cyclical errors when using multiple includes with same variables")])]},proxy:true}])},[_v(" "),_c('p',[_v("Since outer variables override inner variables, this may result in errors if attempting to use an "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("include")]),_v(" within another "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("include")]),_v(" with the same variables.")]),_v(" "),_c('p',[_v("This is because the inner variable of the same name will be replaced with the outer variable, which contains the inner variable.\nThis inner variable is once again overridden to result in another inner variable and so on, causing a cyclical error.")]),_v(" "),_c('p',[_v("To fix this issue, do not use an inner "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("include")]),_v(" if they use the same variables.\nInstead, copy the content of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" file and replace the variables with the defined values.")]),_v(" "),_c('p',[_v("Example:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"line-numbers 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("\"boilerplate.md\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("boilerplate")]),_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("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_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("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"boilerplate.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("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"variable\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" VALUE_OF_VARIABLE\n")]),_c('span',[_v(" "),_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(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_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(">")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_c('p',[_v("The inner "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("variable")]),_v(" would be replaced by the outer "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("variable")]),_v(" resulting in a cyclical error:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"line-numbers 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("\"boilerplate.md\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("boilerplate")]),_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("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_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("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"boilerplate.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("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"variable\"")]),_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("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"boilerplate.md\"")]),_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("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"variable\"")]),_v(">")])]),_v("\n")]),_c('span',[_v(" "),_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-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_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("include")]),_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(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_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(">")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_c('p',[_v("To fix this problem, copy the content of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" file and replace the variables with the defined values as such:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"line-numbers 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("\"boilerplate.md\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("boilerplate")]),_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("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"variable\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("Boilerplate content: VALUE_OF_VARIABLE "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Replace {{ variable }} in boilerplate with VALUE_OF_VARIABLE -->")])]),_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(">")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('hr'),_v(" "),_c('h5',{attrs:{"id":"excluding-files-from-rendering-as-pages"}},[_v("Excluding Files from Rendering as Pages"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#excluding-files-from-rendering-as-pages","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("MarkBind supports the exclusion of files from page generation")]),_v(". For example, you can exclude files containing "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("A fragment is a piece of content that can be reused across multiple pages.")]},proxy:true}])},[_v("custom fragments")]),_v(" that are only meant to be used in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(".")],1),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Note: This example below is assuming that you have included the following glob pattern in the "),_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 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("\"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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_c('p',[_v("Else, if each page is included individually, there is no need to exclude the fragments as they will not be included in the page generation.")])]),_v(" "),_c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Suppose you have a fragment file "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("content-fragment.md")]),_v(" and you want to include it in some pages of the site "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("course")]),_v(" without rendering "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("content-fragment.md")]),_v(" as a page.")]),_v(" "),_c('div',{staticClass:"tree"},[_v("C:/course/\nβ”œβ”€β”€ content-fragment.md\nβ”œβ”€β”€ index.md\nβ”œβ”€β”€ reading.md\n└── site.json\n")]),_v(" "),_c('p',[_v("In "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("reading.md")]),_v(" (note how it reuses content from the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("content-fragment.md")]),_v("):")]),_v(" "),_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("\"content-fragment.md\"")]),_v(" />")])]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_c('p',[_v("In "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" we then exclude the fragment from the page generation with "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#pagesexclude"}},[_v("pagesExclude")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs json"}},[_c('span',[_v("...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pagesExclude\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**/*-fragment.md\"")]),_v("\n")]),_c('span',[_v("],\n")]),_c('span',[_v("...\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("\nYou may use any custom name you wish for your fragments but be sure to update the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pagesExclude")]),_v(" list with the appropriate glob pattern.")])])],1),_v(" "),_c('hr'),_v(" "),_c('h3',{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 yourself duplicating a "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("code that needs to stay relative to the directory in which it used")]},proxy:true}])},[_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.")],1),_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Suppose you have a MarkBind project with the following file structure.")]),_v(" "),_c('div',{staticClass:"tree"},[_v("C:/mySite/\nβ”œβ”€β”€ chapter1/\nβ”‚ β”œβ”€β”€ chapter.md\nβ”‚ β”œβ”€β”€ text.md\nβ”‚ └── exercises.md\nβ”œβ”€β”€ chapter2/\nβ”‚ β”œβ”€β”€ chapter.md\nβ”‚ β”œβ”€β”€ text.md\nβ”‚ └── exercises.md\n└── book.md\n")]),_v(" "),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-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(":")]),_v(" "),_c('div',{staticClass:"tree"},[_v("C:/mySite/\nβ”œβ”€β”€ _markbind/boilerplates/\nβ”‚ └── chapter.md\nβ”œβ”€β”€ chapter1/\nβ”‚ β”œβ”€β”€ text.md\nβ”‚ └── exercises.md\nβ”œβ”€β”€ chapter2/\nβ”‚ β”œβ”€β”€ text.md\nβ”‚ └── exercises.md\n└── book.md\n")]),_v(" "),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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(" even though there is no such file. MarkBind will use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter.md")]),_v(" file from "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("/_markbind/boilerplates/")]),_v(" but interpret it as if the file exists in the "),_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("chapter.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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-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:")]),_v(" "),_c('div',{staticClass:"tree"},[_v("C:/mySite/\n└── _markbind/boilerplates/\n └── book/\n └── chapter.md\n")]),_v(" "),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless","no-close":"","popup-url":"/userGuide/makingTheSiteSearchable.html#keywords","panelId":"keywords"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{attrs:{"id":"keywords"}},[_c('strong',[_v("Keywords")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#keywords","onclick":"event.stopPropagation()"}})])]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_c('p',[_c('span',{staticClass:"fas fa-arrow-down",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('box',[_c('p',[_c('span',{staticClass:"large"},[_c('strong',[_v("Developer Testing")])]),_c('br')]),_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless","no-close":"","popup-url":"/userGuide/formattingContents.html#line-breaks","panelId":"line-breaks"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{attrs:{"id":"line-breaks"}},[_c('strong',[_v("Line Breaks")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#line-breaks","onclick":"event.stopPropagation()"}})])]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("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","no-close":"","popup-url":"/userGuide/formattingContents.html#links","panelId":"links"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{attrs:{"id":"links"}},[_c('strong',[_v("Links")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#links","onclick":"event.stopPropagation()"}})])]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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":"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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"autolinks"}},[_v("Autolinks"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#autolinks","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("A "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("with "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("http(s)://")]),_v(" head")]},proxy:true}])},[_v("URL")]),_v(" or an email address in plain text will be auto converted into clickable links.")],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":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**These will be converted:**")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("https://www.google.com\n")]),_c('span',[_v("\n")]),_c('span',[_v("https://markbind.org\n")]),_c('span',[_v("\n")]),_c('span',[_v("foobar@gmail.com\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**These will not be converted:**")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("google.com\n")]),_c('span',[_v("\n")]),_c('span',[_v("markbind.org\n")]),_c('span',[_v("\n")]),_c('span',[_v("foo@bar\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**Tricks to prevent autolink:**")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("`https://markbind.org`")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("https://"),_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":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(">")])]),_v("markbind.org\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("These will be converted:")])]),_v(" "),_c('p',[_c('a',{attrs:{"href":"https://www.google.com"}},[_v("https://www.google.com")])]),_v(" "),_c('p',[_c('a',{attrs:{"href":"https://markbind.org"}},[_v("https://markbind.org")])]),_v(" "),_c('p',[_c('a',{attrs:{"href":"mailto:foobar@gmail.com"}},[_v("foobar@gmail.com")])]),_v(" "),_c('p',[_c('strong',[_v("These will not be converted:")])]),_v(" "),_c('p',[_v("google.com")]),_v(" "),_c('p',[_v("markbind.org")]),_v(" "),_c('p',[_v("foo@bar")]),_v(" "),_c('p',[_c('strong',[_v("Tricks to prevent autolink:")])]),_v(" "),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("https://markbind.org")])]),_v(" "),_c('p',[_v("https://"),_c('span'),_v("markbind.org")])])],1)]),_v(" "),_c('h4',{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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-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)")])]),_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-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),_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-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(":")]),_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Assuming that we have the following folder structure:")]),_v(" "),_c('div',{staticClass:"tree"},[_v("C:\\course"),_c('br'),_v("\nβ”œβ”€β”€ textbook\\\nβ”‚ β”œβ”€β”€ subsite.md\nβ”‚ β”œβ”€β”€ image.png\nβ”‚ └── site.json\nβ”œβ”€β”€ index.md\n└── site.json\n")]),_v(" "),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-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}")])]),_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('modal',{attrs:{"id":"pop:global-intralink-disable","backdrop":""},scopedSlots:_u([{key:"header",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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])],1)],1)]),_v(" "),_c('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("MarkBind home is at "),_c('a',{attrs:{"href":"https://markbind.org"}},[_v("here")]),_v(".")])])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless","no-close":"","popup-url":"/userGuide/formattingContents.html#lists","panelId":"lists"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{attrs:{"id":"lists"}},[_c('strong',[_v("Lists")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#lists","onclick":"event.stopPropagation()"}})])]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("Customizing the Unordered list appearance:")])])]),_v(" "),_c('p',[_c('strong',[_v("To customize unordered lists' icons, add the configuration "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{icon=\"icon-name\"}")]),_v(" and/or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{text=\"text\"}")]),_v(" after a specific list item.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 1 { text=\"Step 1 :+1:\" icon=\"glyphicon-education\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 2 { text=\"Step 2\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Item 2.1 { icon=\"fas-file-code\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Item 2.2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 3 { text=\"Step 3\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Item 3.1 \n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 4 { text=\"\\"),_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("`PR`")]),_v("\" icon=\"octicon-git-pull-request\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Item 4.1 { icon=\"mif-perm-media\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 5 { text=\"Step 5\" icon=\"glyphicon-education\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Item 5.1 { icon=\"notebook"),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_with_")]),_v("decorative"),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_cover\" }")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"glyphicon glyphicon-education",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('span',{staticStyle:{"line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("Step 1 πŸ‘")]),_c('div',[_v("Item 1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"glyphicon glyphicon-education",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('span',{staticStyle:{"line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("Step 2")]),_c('div',[_v("Item 2\n"),_c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 2.1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 2.2")])])])])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"glyphicon glyphicon-education",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('span',{staticStyle:{"line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("Step 3")]),_c('div',[_v("Item 3\n"),_c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 3.1")])])])])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('svg',{staticClass:"octicon octicon-git-pull-request",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},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('span',{staticStyle:{"line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("PR")])]),_c('div',[_v("Item 4\n"),_c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"material-icons align-middle",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("perm_media​")]),_c('div',[_v("Item 4.1")])])])])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"glyphicon glyphicon-education",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('span',{staticStyle:{"line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("Step 5")]),_c('div',[_v("Item 5\n"),_c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("πŸ“”β€‹")]),_c('div',[_v("Item 5.1")])])])])])])])],1)]),_v(" "),_c('box',{attrs:{"type":"info","seamless":""}},[_c('p',[_v("Customization will be carried over to the other items within the "),_c('strong',[_v("same level of the list")]),_v(".\nExample:")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 1 { icon=\"glyphicon-education\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Item 1.1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 2\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"glyphicon glyphicon-education",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 1\n"),_c('ul',[_c('li',[_v("Item 1.1")])])])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"glyphicon glyphicon-education",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 2")])])])])],1)]),_v(" "),_c('p',[_v("The customised icon appears for Item 2 but not for Item 1.1.")]),_v(" "),_c('p',[_v("Hence, if you customize any item on a certain level, you must also "),_c('strong',[_v("customize the first item on that level")]),_v(". If not, the list will revert to its uncustomized form.\nIf you wish to remove the customization from the following levels, you can set "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("text")]),_v(" and/or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("icon")]),_v(" to be an empty string "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"\"")]),_v(".")]),_v(" "),_c('p',[_v("Example:")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 1 { icon=\"glyphicon-education\" text=\"Only for this bullet\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 2 { icon=\"\" }\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"glyphicon glyphicon-education",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('span',{staticStyle:{"line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("Only for this bullet")]),_c('div',[_v("Item 1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("Only for this bullet")]),_c('div',[_v("Item 2")])])])])],1)])]),_v(" "),_c('p',[_v("You can use any of the "),_c('a',{attrs:{"href":"/userGuide/formattingContents.html#icons"}},[_v("icons")]),_v(" supported by MarkBind. If an item has a specified icon, that icon will be used for it and for subsequent items at that level.")]),_v(" "),_c('p',[_v("Markdown can also be used in texts.")]),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_v("\nYou may need to add escape characters when using special characters for Markdown in text. \n")]),_v(" "),_c('p',[_c('strong',[_v("You can adjust the icon and text's size by using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("i-size")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("t-size")]),_v(" attribute respectively.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 1 { icon=\"fas-file-code\" i-size=\"35px\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 2 { icon=\"fas-file-code\" i-size=\"4rem\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 3 { icon=\"fas-file-code\" i-size=\"5em\" }\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code",staticStyle:{"font-size":"35px","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code",staticStyle:{"font-size":"4rem","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 2")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code",staticStyle:{"font-size":"5em","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 3")])])])])],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":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 1 { text=\"Step 1\" t-size=\"35px\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 2 { text=\"Step 2\" t-size=\"4rem\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 3 { text=\"Step 3\" t-size=\"5em\" }\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"font-size":"35px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("Step 1")]),_c('div',[_v("Item 1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"font-size":"4rem","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("Step 2")]),_c('div',[_v("Item 2")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"font-size":"5em","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("Step 3")]),_c('div',[_v("Item 3")])])])])],1)]),_v(" "),_c('p',[_v("You can utilize any "),_c('a',{attrs:{"href":"https://www.w3schools.com/cssref/css_units.php"}},[_v("CSS size unit")]),_v(".")]),_v(" "),_c('p',[_c('strong',[_v("You can also use images as 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":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 1 { icon=\"/images/deer.jpg\" i-width=\"30px\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 2 { i-width=\"60px\" i-height=\"44px\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 3 { i-width=\"90px\" i-height=\"61px\" }\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticStyle:{"width":"30px","display":"inline-block"},attrs:{"src":"/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('div',[_v("Item 1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticStyle:{"width":"60px","height":"44px","display":"inline-block"},attrs:{"src":"/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('div',[_v("Item 2")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticStyle:{"width":"90px","height":"61px","display":"inline-block"},attrs:{"src":"/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('div',[_v("Item 3")])])])])],1)]),_v(" "),_c('p',[_v("If either the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("i-width")]),_v(" or the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("i-height")]),_v(" of an image is not specified, the unspecified dimension will adjust to maintain the image's original aspect ratio. For example, for an image of size 800x600 (4:3), if "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("i-width")]),_v(" is set to 400px, its height will be 300px.")]),_v(" "),_c('p',[_c('strong',[_v("The icon and text's appearance can be further customized by adding a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("i-class")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("t-class")]),_v(" attribute respectively.")])]),_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":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 1 { icon=\"/images/deer.jpg\" text=\"Deer\" i-width=\"60px\" height=\"17px\" i-class=\"rounded\" t-class=\"text-warning my-2\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 2 { t-class=\"text-info my-2\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Item 2.1 { icon=\"fas-question-circle\" i-class=\"badge rounded-pill my-1 bg-success text-white\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Item 2.2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Item 2.3 { i-class=\"badge rounded-pill my-1 bg-primary text-white\"}\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 3 { t-class=\"text-primary my-2\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Item 3.1 \n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Item 3.2 { icon=\"fas-question-circle\" i-class=\"badge rounded my-1 bg-danger text-white\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Item 3.3\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"},attrs:{"height":"17px"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticClass:"rounded",staticStyle:{"width":"60px","display":"inline-block"},attrs:{"src":"/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('span',{staticClass:"text-warning my-2",staticStyle:{"line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("Deer")]),_c('div',[_v("Item 1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticClass:"rounded",staticStyle:{"width":"60px","display":"inline-block"},attrs:{"src":"/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('span',{staticClass:"text-info my-2",staticStyle:{"line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("Deer")]),_c('div',[_v("Item 2\n"),_c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-question-circle badge rounded-pill my-1 bg-success text-white",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 2.1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-question-circle badge rounded-pill my-1 bg-success text-white",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 2.2")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-question-circle badge rounded-pill my-1 bg-primary text-white",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 2.3")])])])])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticClass:"rounded",staticStyle:{"width":"60px","display":"inline-block"},attrs:{"src":"/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('span',{staticClass:"text-primary my-2",staticStyle:{"line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("Deer")]),_c('div',[_v("Item 3\n"),_c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-question-circle badge rounded-pill my-1 bg-primary text-white",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 3.1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-question-circle badge rounded my-1 bg-danger text-white",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 3.2 ")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-question-circle badge rounded my-1 bg-danger text-white",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item 3.3")])])])])])])])],1)]),_v(" "),_c('p',[_c('strong',[_v("The spacing between the icon and the content can be customized by using a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("i-spacing")]),_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":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 1 { icon=\"+1\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 2 { i-spacing=\"1rem\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 3 { i-spacing=\"2rem\" }\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("πŸ‘β€‹")]),_c('div',[_v("Item 1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"1rem","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("πŸ‘β€‹")]),_c('div',[_v("Item 2")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"2rem","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("πŸ‘β€‹")]),_c('div',[_v("Item 3")])])])])],1)]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_c('p',[_v("Similar to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("icon")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("text")]),_v(" attribute, other icon attributes such as "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("i-class")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("i-width")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("i-height")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("i-spacing")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("t-size")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("t-class")]),_v(" apply for subsequent list items at the same level, until they are overridden by the same attribute. For example, Item 2.3's "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("i-class")]),_v(" overrides Item 2.1's and applies up to Item 3.1.")])]),_v(" "),_c('p',[_c('strong',[_v("The spacing between the icon and the content can be customized by using a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("i-spacing")]),_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":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 1 { icon=\"+1\" text=\"Yay\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 2 { i-spacing=\"1rem\" }\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 3 { i-spacing=\"2rem\" }\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("πŸ‘β€‹")]),_c('span',{staticStyle:{"line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("Yay")]),_c('div',[_v("Item 1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("πŸ‘β€‹")]),_c('span',{staticStyle:{"line-height":"unset","margin-inline-end":"1rem","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("Yay")]),_c('div',[_v("Item 2")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("πŸ‘β€‹")]),_c('span',{staticStyle:{"line-height":"unset","margin-inline-end":"2rem","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("Yay")]),_c('div',[_v("Item 3")])])])])],1)])],1),_v(" "),_c('p',[_c('strong',[_v("You can apply Markdown's heading and paragraph syntax within the list.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" #### Heading 1: Overview {icon=\"/images/overview-d.png\" i-width=\"65px\" i-class=\"rounded\" }\n")]),_c('span',[_v(" Content 1: This section provides a summary of the document or topic. \n")]),_c('span',[_v(" It sets the context and purpose of the content to follow.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" #### Heading 2: Detailed Description { icon=\"/images/detailed-d.png\" i-width=\"65px\" i-class=\"rounded\" }\n")]),_c('span',[_v(" Content 2: This section delves deeper into the topic, offering comprehensive information and detailed explanations.\n")]),_c('span',[_v(" It might also include evidence, examples, or justifications.\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticClass:"rounded",staticStyle:{"width":"65px","display":"inline-block"},attrs:{"src":"/images/overview-d.png","alt":"Icon"}}),_v("​​")]),_c('div',[_c('h4',{attrs:{"id":"heading-1-overview"}},[_v("Heading 1: Overview"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-1-overview","onclick":"event.stopPropagation()"}})]),_v("\nContent 1: This section provides a summary of the document or topic.\nIt sets the context and purpose of the content to follow.")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticClass:"rounded",staticStyle:{"width":"65px","display":"inline-block"},attrs:{"src":"/images/detailed-d.png","alt":"Icon"}}),_v("​​")]),_c('div',[_c('h4',{attrs:{"id":"heading-2-detailed-description"}},[_v("Heading 2: Detailed Description"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-2-detailed-description","onclick":"event.stopPropagation()"}})]),_v("\nContent 2: This section delves deeper into the topic, offering comprehensive information and detailed explanations.\nIt might also include evidence, examples, or justifications.")])])])])],1)]),_v(" "),_c('p',[_v("Icon specifications should be attached only to the first element of a list item (for the example above, the icon specification should be attached to the heading, not the content below the heading).")]),_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":"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(" 2.")]),_v(" Sub item 1.2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("2.")]),_v(" Item 2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("3.")]),_v(" Item 3\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('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('popover',{scopedSlots:_u([{key:"content",fn:function(){return [_c('div',{staticStyle:{"text-align":"center","margin-bottom":"5px"}},[_v("++"),_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('ol',{staticClass:"ps-0 ms-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)])]},proxy:true}])},[_v("\nfirst number\n")]),_v("!\n")],1),_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('div',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',{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',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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":"292b4"}},[_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":"292b4","type":"radio"}}),_v(" Item 5")])])])])],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless","no-close":"","popup-url":"/userGuide/formattingContents.html#math-formulae","panelId":"math-formulae"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{attrs:{"id":"math-formulae"}},[_c('strong',[_v("Math Formulae")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#math-formulae","onclick":"event.stopPropagation()"}})])]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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("Two types of delimiters are supported and can be used interchangeably:")]),_v(" "),_c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("'dollars'")]),_v(" "),_c('ul',[_c('li',[_v("Insert "),_c('strong',[_v("inline")]),_v(" equations by enclosing them in "),_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(" "),_c('li',[_v("Insert "),_c('strong',[_v("display")]),_v(" equations by enclosing them in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("$$...$$")])]),_v(" "),_c('li',[_v("Insert "),_c('strong',[_v("display")]),_v(" + "),_c('strong',[_v("equation number")]),_v(": "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("$$...$$ (1)")])])])]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("'brackets'")]),_v(" "),_c('ul',[_c('li',[_v("Insert "),_c('strong',[_v("inline")]),_v(" equations by enclosing them in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\\(...\\)")])]),_v(" "),_c('li',[_v("Insert "),_c('strong',[_v("display")]),_v(" equations by enclosing them in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\\[...\\]")])]),_v(" "),_c('li',[_v("Insert "),_c('strong',[_v("display")]),_v(" + "),_c('strong',[_v("equation number")]),_v(": "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\\[...\\] (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":"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")]),_c('span',[_v("\n")]),_c('span',[_v("$$ 4x + 5y = 16 $$ (3)\n")]),_c('span',[_v("\n")]),_c('span',[_v("$$\\frac{10x}{3} + \\frac{5y}{3} = 8$$ (4)\n")]),_c('span',[_v("\n")]),_c('span',[_v("Finally, the Pythagoras theorem: $c^2 = a^2 + b^2$.\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("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.7278em;vertical-align:-0.0833em;"}}),_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.2222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.625em;vertical-align:-0.1944em;"}}),_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.2778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.6444em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("11")])])])])])]),_c('span',[_v("(1)")])],1),_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.0074em;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.3214em;"}},[_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.2222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:2.0074em;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.3214em;"}},[_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.2778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.6444em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("8")])])])])])]),_c('span',[_v("(2)")])],1),_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.908em;vertical-align:-0.0833em;"}}),_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.8247em;"}},[_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","style":"margin-right:0.03588em;"}},[_v("iΟ€")])])])])])])])])]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.6444em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("1")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.6444em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("0")])])])])]),_v(" is a beautiful equation.")],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('mn',{pre:true},[_v("4")]),_c('mi',{pre:true},[_v("x")]),_c('mo',{pre:true},[_v("+")]),_c('mn',{pre:true},[_v("5")]),_c('mi',{pre:true},[_v("y")]),_c('mo',{pre:true},[_v("=")]),_c('mn',{pre:true},[_v("16")])],1),_c('annotation',{pre:true,attrs:{"encoding":"application/x-tex","v-pre":""}},[_v(" 4x + 5y = 16 ")])],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.7278em;vertical-align:-0.0833em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("4")]),_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("x")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.8389em;vertical-align:-0.1944em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("5")]),_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.2778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.6444em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("16")])])])])])]),_c('span',[_v("(3)")])],1),_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("10")]),_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("5")]),_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{10x}{3} + \\frac{5y}{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.0074em;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.3214em;"}},[_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("10")]),_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.2222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:2.0074em;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.3214em;"}},[_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("5")]),_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.2778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.6444em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("8")])])])])])]),_c('span',[_v("(4)")])],1),_c('p',[_v("Finally, the Pythagoras theorem: "),_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("c")]),_c('mn',{pre:true},[_v("2")])],1),_c('mo',{pre:true},[_v("=")]),_c('msup',{pre:true},[_c('mi',{pre:true},[_v("a")]),_c('mn',{pre:true},[_v("2")])],1),_c('mo',{pre:true},[_v("+")]),_c('msup',{pre:true},[_c('mi',{pre:true},[_v("b")]),_c('mn',{pre:true},[_v("2")])],1)],1),_c('annotation',{pre:true,attrs:{"encoding":"application/x-tex","v-pre":""}},[_v("c^2 = a^2 + b^2")])],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.8141em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("c")]),_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.8141em;"}},[_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"}},[_v("2")])])])])])])])]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.8974em;vertical-align:-0.0833em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("a")]),_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.8141em;"}},[_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"}},[_v("2")])])])])])])])]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.8141em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("b")]),_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.8141em;"}},[_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"}},[_v("2")])])])])])])])])])])])]),_v(".")],1)])],1)]),_v(" "),_c('p',[_v("Additional delimiters are possible by enabling the "),_c('a',{attrs:{"href":"/userGuide/usingPlugins.html#plugin-mathdelimiters"}},[_v("mathDelimiters")]),_v(" plugin.")]),_v(" "),_c('box',{attrs:{"type":"info"}},[_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":"/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 %}\n")]),_c('span',[_v("\n")]),_c('span',[_v("\\(e^{{\\frac{1}{3}} + 1}\\)\n")]),_c('span',[_v("\n")]),_c('span',[_v("{% endraw %}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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.7278em;vertical-align:-0.0833em;"}}),_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.2222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.625em;vertical-align:-0.1944em;"}}),_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.2778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.6444em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("11")])])])])])]),_c('span',[_v("(1)")])],1),_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.0074em;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.3214em;"}},[_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.2222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:2.0074em;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.3214em;"}},[_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.2778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.6444em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("8")])])])])])]),_c('span',[_v("(2)")])],1),_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.908em;vertical-align:-0.0833em;"}}),_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.8247em;"}},[_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","style":"margin-right:0.03588em;"}},[_v("iΟ€")])])])])])])])])]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222em;"}}),_c('span',{pre:true,attrs:{"class":"mbin"}},[_v("+")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2222em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.6444em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("1")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2778em;"}}),_c('span',{pre:true,attrs:{"class":"mrel"}},[_v("=")]),_c('span',{pre:true,attrs:{"class":"mspace","style":"margin-right:0.2778em;"}})]),_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.6444em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_v("0")])])])])]),_v(" is a beautiful equation.")],1)])],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless","no-close":"","popup-url":"/userGuide/components/popups.html#modals","panelId":"modals"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{attrs:{"id":"modals"}},[_c('strong',[_v("Modals")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#modals","onclick":"event.stopPropagation()"}})])]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('modal',{attrs:{"id":"modal:loremipsum"},scopedSlots:_u([{key:"header",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('modal',{attrs:{"id":"modal:centered","center":""},scopedSlots:_u([{key:"header",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('modal',{attrs:{"id":"modal:ok-text","ok-text":"Custom OK"},scopedSlots:_u([{key:"header",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 focus")]),_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 focus")])]),_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(", or any space-separated combination of these.")])]),_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")]),_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."),_c('br'),_c('strong',[_v("Note: Ensure id for each Modal is unique.")])])]),_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 small Modal.")])]),_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 large Modal.")])]),_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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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('modal',{attrs:{"ok-text":"OK","id":"modal:unused"},scopedSlots:_u([{key:"header",fn:function(){return [_v("Modal header")]},proxy:true}])},[_v("\n Modal content\n")])],1)],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless","no-close":"","popup-url":"/userGuide/components/navigation.html#navbars","panelId":"nav-bars"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{attrs:{"id":"nav-bars"}},[_c('strong',[_v("Nav Bars")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#nav-bars","onclick":"event.stopPropagation()"}})])]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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 insert your own custom styles via the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("add-class")]),_v(" attribute. You can "),_c('trigger',{attrs:{"trigger":"click","for":"modal:built-in-bg"}},[_v("use built-in background styles")]),_v(" or "),_c('a',{attrs:{"href":"/userGuide/components/advanced.html#inserting-custom-classes-into-components"}},[_v("insert your own defined CSS classes")]),_v(".")],1)]),_v(" "),_c('modal',{attrs:{"id":"modal:built-in-bg"},scopedSlots:_u([{key:"header",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("sticky")]),_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 environment--combined\"")]),_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 environment--combined\"")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("e.g. adding an image to the site nav")]},proxy:true}])},[_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.")],1),_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('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<a>")]),_v(" tags in particular")]},proxy:true}])},[_v("links")]),_v("."),_c('br'),_v("\nIf absent, the navigation buttons to open the menus are "),_c('em',[_v("automatically hidden")]),_v(".")],1)]),_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":"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:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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:{"heading":"CSS class attached to the root navigation element","class":"hljs css"}},[_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"heading":"","class":"hljs css"}},[_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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","no-close":"","popup-url":"/userGuide/components/navigation.html#page-navigation-menus","panelId":"page-navigation-menus"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{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()"}})])]),_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(" 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('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("page-nav-print")]),_v(" />")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("# Overview\n")]),_c('span',[_v("Content of the page...\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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('p',[_c('span',{staticClass:"keyword d-none"},[_v("print page nav as table of content")])]),_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(") displays a list of the current page's headings.")]),_v(" Page navigation menus are typically configured in "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#layouts"}},[_v("layouts")]),_v(", but can also be utilized in individual pages.")]),_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('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_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(".")]},proxy:true}])},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"default\"")])]),_v(" or a "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_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(".")]},proxy:true}])},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("heading level")])]),_v(".")],1),_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('li',[_c('p',[_c('strong',[_v("(Optional) To make pageNav available on print, you can position the page navigation menu on individual pages with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<page-nav-print />")]),_v(" component.")])])])]),_v(" "),_c('panel',{staticClass:"ms-4",attrs:{"type":"seamless","expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("Additional details on printing pageNav")])])]},proxy:true}])},[_v(" "),_c('p',[_v("You can specify the location of the page navigation menu on print by using either of the following syntaxes:")]),_v(" "),_c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<page-nav-print />")])]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<page-nav-print></page-nav-print>")]),_v(" "),_c('ul',[_c('li',[_v("This is useful if you want to include a custom title (or any other content) before the page navigation menu. For example, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<page-nav-print>Table of Contents</page-nav-print>")])])])])]),_v(" "),_c('p',[_v("You can specify multiple "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<page-nav-print />")]),_v(" components in a page and they do not have to be at the top of the page. They also do not appear when viewed on a browser.")]),_v(" "),_c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v("\nIn the page that you want to have page navigation printed (i.e. to serve as a table of content when viewed on PDFs), use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<page-nav-print />")]),_v(" component to position the pageNav like so:")]),_v(" "),_c('div',{staticClass:"indented",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(" 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('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("page-nav-print")]),_v(" />")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("# Overview\n")]),_c('span',[_v("Content of the page...\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('p',[_v("To view the pageNav on print, open the print preview of the page using the browser's print function.")]),_v(" "),_c('box',{attrs:{"type":"info","seamless":""}},[_c('p',[_v("If you are using Chrome, you can right-click on the page and select \"Print\" to open the print preview.\nYou can try it out by going to our "),_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands page")]),_v(" and printing it.")])])],1)],1),_v(" "),_c('div',{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(".")])])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless","no-close":"","popup-url":"/userGuide/components/presentation.html#panels","panelId":"panels"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{attrs:{"id":"panels"}},[_c('strong',[_v("Panels")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#panels","onclick":"event.stopPropagation()"}})])]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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":"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',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("markdown")]),_v(">")]),_v("_markdown_"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("markdown")]),_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("plain text ..."),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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(" "),_c('div',[_c('p',[_c('em',[_v("markdown")])])]),_v(" "),_c('p',[_v("plain text ...")])])],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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-close")]),_v(", or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-minimized-switch")]),_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":"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 minimized panel does not have a switch button**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-minimized-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 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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"","no-minimized-switch":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("This minimized panel does not have a switch button")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"","height":"20"}})])])]},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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('div',{attrs:{"id":"script_and_styles_warning"}},[_c('box',{attrs:{"type":"warning"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h4',{attrs:{"id":"global-effects-of-the-script-and-styles-from-the-imported-externals-2"}},[_v("Global Effects of the Script and Styles from the Imported Externals"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#global-effects-of-the-script-and-styles-from-the-imported-externals-2","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('p',[_v("Importing external resources that contains "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("script")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("styles")]),_v(" can inadvertently take global effects on your MarkBind website. Due to hoisting during processing, imported scripts and stylesheets affect the entire page. This could potentially alter its appearance and behavior beyond the intended scope.")]),_v(" "),_c('p',[_v("For example, if a CSS file imported via such means styles headings to be red, this change will be reflected page-wide.")]),_v(" "),_c('p',[_v("To safeguard against unintended consequences, consider directly incorporating the code or customizing styles to target specific elements or classes not used universally. This approach grants more precise control over your website's presentation and reduces the risk of unexpected changes.")])])],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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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("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 box\n")]),_c('span',[_v(" "),_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(" "),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('box',{attrs:{"type":"success"}},[_v("\n I'm a nested 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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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","no-close":"","popup-url":"/userGuide/formattingContents.html#paragraphs","panelId":"paragraphs"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{attrs:{"id":"paragraphs"}},[_c('strong',[_v("Paragraphs")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#paragraphs","onclick":"event.stopPropagation()"}})])]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("This is the first paragraph.")]),_v(" "),_c('p',[_v("This is another paragraph. This is the second sentence.")])])],1)]),_v(" "),_c('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless","no-close":"","popup-url":"/userGuide/components/imagesAndDiagrams.html#pictures","panelId":"pictures"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{attrs:{"id":"pictures"}},[_c('strong',[_v("Pictures")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#pictures","onclick":"event.stopPropagation()"}})])]),_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(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("lazy")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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":"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(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("lazy")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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","lazy":""}},[_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("lazy")]),_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 if this attribute is specified."),_c('br'),_c('strong',[_v("Either the height or width should be specified to avoid layout shifts while lazy loading images.")])])])])])]),_c('div',{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(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("lazy")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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","no-close":"","popup-url":"/userGuide/components/popups.html#popovers","panelId":"popovers"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{attrs:{"id":"popovers"}},[_c('strong',[_v("Popovers")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#popovers","onclick":"event.stopPropagation()"}})])]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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":"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("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("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("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("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("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("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("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("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("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("popover")]),_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("div")]),_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("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("popover")]),_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("div")]),_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("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("popover")]),_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',[_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("div")]),_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 src"),_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("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("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"From a HTML file\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/syntax/extra/loadContent.html#fragment\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" This is loaded from a .html file\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("div")]),_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(" "),_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("\"From a MarkDown file\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/formattingContents.md#overview\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" This is loaded from a .md file\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("div")]),_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("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("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")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('popover',{attrs:{"placement":"top"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on top")])]),_v(" "),_c('popover',{attrs:{"placement":"left"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on left")])]),_v(" "),_c('popover',{attrs:{"placement":"right"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on right")])]),_v(" "),_c('popover',{attrs:{"placement":"bottom"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on bottom")])]),_v(" "),_c('hr'),_v(" "),_c('h4',{staticClass:"no-index",attrs:{"id":"header-2"}},[_v("Header"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#header-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('popover',{attrs:{"placement":"top"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true},{key:"header",fn:function(){return [_v("Header")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on top")])]),_v(" "),_c('popover',{attrs:{"placement":"left"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true},{key:"header",fn:function(){return [_v("Header")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on left")])]),_v(" "),_c('popover',{attrs:{"placement":"right"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true},{key:"header",fn:function(){return [_v("Header")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on right")])]),_v(" "),_c('popover',{attrs:{"placement":"bottom"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true},{key:"header",fn:function(){return [_v("Header")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Popover on bottom")])]),_v(" "),_c('hr'),_v(" "),_c('h4',{staticClass:"no-index",attrs:{"id":"trigger"}},[_v("Trigger"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#trigger","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('popover',{attrs:{"placement":"top","trigger":"hover"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true},{key:"header",fn:function(){return [_v("Header")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Mouseenter")])])],1),_v(" "),_c('h4',{staticClass:"no-index",attrs:{"id":"markdown"}},[_v("Markdown"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#markdown","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('popover',{scopedSlots:_u([{key:"content",fn:function(){return [_c('span',{staticClass:"underline"},[_v("emoji")]),_v(" content 🐱")]},proxy:true},{key:"header",fn:function(){return [_c('strong',[_v("Emoji header")]),_v(" πŸš€")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Hover")])])],1),_v(" "),_c('h4',{staticClass:"no-index",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('div',[_c('popover',{scopedSlots:_u([{key:"header",fn:function(){return [_c('strong',[_v("Emoji header")]),_v(" πŸš€")]},proxy:true},{key:"content",fn:function(){return [_c('div',[_v("\n This is a long content...\n ")])]},proxy:true}])},[_v(" "),_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Hover")])])],1),_v(" "),_c('h4',{staticClass:"no-index",attrs:{"id":"content-using-src"}},[_v("Content using src"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#content-using-src","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('popover',{scopedSlots:_u([{key:"content",fn:function(){return [_v("Fragment loading test")]},proxy:true},{key:"header",fn:function(){return [_v("From a HTML file")]},proxy:true}])},[_v("\n This is loaded from a .html file\n ")])],1),_v(" "),_c('div',[_c('popover',{scopedSlots:_u([{key:"content",fn:function(){return [_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.")])]},proxy:true},{key:"header",fn:function(){return [_v("From a MarkDown file")]},proxy:true}])},[_v("\n This is loaded from a .md file\n ")])],1),_v(" "),_c('h4',{staticClass:"no-index",attrs:{"id":"wrap-text"}},[_v("Wrap Text"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#wrap-text","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('popover',{scopedSlots:_u([{key:"content",fn:function(){return [_v("Nice!")]},proxy:true},{key:"header",fn:function(){return [_v("false")]},proxy:true}])},[_v("What do you say")])],1)],1)],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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"pop:trigger_id"}},[_v("trigger")]),_v(".\n"),_c('popover',{attrs:{"id":"pop:trigger_id"},scopedSlots:_u([{key:"content",fn:function(){return [_v("This popover is triggered by a trigger")]},proxy:true}])}),_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 focus")]),_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 focus")])]),_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(", or any space-separated combination of these.")])]),_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(".")])])])])])])]),_v(" "),_c('br'),_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 focus")])]),_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(", or any space-separated combination of these.")])]),_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("Popover header, supports MarkDown text.")])]),_v(" "),_c('tr',[_c('td',[_v("content"),_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("Popover content, supports MarkDown text.")])]),_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 popover."),_c('br'),_v("Both "),_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(".html")]),_v(" are accepted.")])]),_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('box',{attrs:{"type":"info","light":""}},[_c('p',[_v("MarkBind supports the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" attribute, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("content")]),_v(" attribute and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("content")]),_v(" slot for popovers.\nUsually, only one of these would be used at a time.")]),_v(" "),_c('p',[_v("If multiple of these are used, MarkBind will prioritise in the following order:")]),_v(" "),_c('ol',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("content")]),_v(" slot")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("content")]),_v(" attribute")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" attribute")])])]),_v(" "),_c('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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('popover',{attrs:{"id":"pop:context-target","placement":"top"},scopedSlots:_u([{key:"header",fn:function(){return [_v("Popover header")]},proxy:true},{key:"content",fn:function(){return [_c('div',[_c('p',[_v("description πŸ‘")])])]},proxy:true}])})],1)],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless","no-close":"","popup-url":"/userGuide/components/others.html#questions-and-quizzes","panelId":"questions-and-quizzes"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{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()"}})])]),_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:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])]),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Fill-in-the-Blanks questions")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Fill-in-the-Blanks 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("\"blanks\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hint")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Google it!\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" ###### German sociologist __________ called the process of simultaneously analyzing the behavior of individuals and the society that shapes that behavior __________.\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("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Norbert Elias, Elias\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"That's his name!\"")]),_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("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"figuration\"")]),_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")]),_c('span',[_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("\"blanks\"")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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"}},[_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(", "),_c('strong',[_v("Fill-in-the-Blanks")]),_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:{"heading":"Header and Hint syntax","class":"hljs html"}},[_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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:{"heading":"Headers and Hints using slots","class":"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("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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("Two of the answers are correct!")]},proxy:true}])},[_v("Hover over me!")]),_v(" "),_c('span',{staticClass:"fas fa-mouse-pointer",attrs:{"aria-hidden":"true"}})],1)])]},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(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("blanks")]),_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"}},[_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('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_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!")]},proxy:true}])},[_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.")],1),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('h6',{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":"fill-in-the-blanks-questions"}},[_v("Fill-in-the-Blanks Questions"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#fill-in-the-blanks-questions","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Fill-in-the-blanks questions are specified with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"blanks\"")]),_v(" attribute.")]),_v(" "),_c('p',[_v("Unlike MCQ and checkbox questions, answer checking is performed for each blank 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 in each "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("q-option")]),_v(".\nIf no keywords are provided, the answer for that blank will always be marked as correct.")]),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_c('p',[_v("Keywords are validated by checking if the keyword matches the user's answer exactly (ignoring letter casing).\nThis works well for some\n"),_c('popover',{scopedSlots:_u([{key:"header",fn:function(){return [_v("When does validation work?")]},proxy:true},{key:"content",fn:function(){return [_c('span',[_v("\nWhen the keywords given are short and specific to the blank (eg. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("abstraction")]),_v("), it increases the chances that the blank will be validated correctly.\n"),_c('br'),_c('br'),_v("\nIn contrast, something long and vague like "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("after discussing for a period of time")]),_v(" which can easily be expressed in a different way (eg. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("after deliberating for a while")]),_v(") would likely cause the blank to be validated incorrectly.\n")])]},proxy:true}])},[_v("cases\n")]),_v("\nand not others.")],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":"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("\"blanks\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hint")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Google it!\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" ###### German sociologist __________ called the process of simultaneously analyzing the behavior of individuals and the society that shapes that behavior __________.\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("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Norbert Elias, Elias\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"That's his name!\"")]),_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("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"figuration\"")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"blanks"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Google it!")])]},proxy:true}])},[_v(" "),_c('h6',{attrs:{"id":"german-sociologist-called-the-process-of-simultaneously-analyzing-the-behavior-of-individuals-and-the-society-that-shapes-that-behavior"}},[_v("German sociologist __________ called the process of simultaneously analyzing the behavior of individuals and the society that shapes that behavior __________."),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#german-sociologist-called-the-process-of-simultaneously-analyzing-the-behavior-of-individuals-and-the-society-that-shapes-that-behavior","onclick":"event.stopPropagation()"}})]),_v(" "),_c('q-option',{attrs:{"keywords":"Norbert Elias, Elias"},scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("That's his name!")])]},proxy:true}])}),_v(" "),_c('q-option',{attrs:{"keywords":"figuration"}})],1)],1)],1)]),_v(" "),_c('p',[_v("By default, if the question has yet to be answered correctly, intermediate results will be shown beside each blank. You can specify a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-intermediate-result")]),_v(" attribute to avoid this behvaiour (i.e. hide the result of each blank upon incorrect attempts).")]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_c('p',[_v("Since the validation is imperfect, the minimum proportion of correct blanks needed for the entire question to be marked as correct 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 set the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("threshold")]),_v(" attribute to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0")]),_v(". Doing so always marks the entire question correct, and users will be able to see all intended answers.")])]),_v(" "),_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("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"blanks\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hint")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"What properties would you want these database transactions to have?\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("threshold")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("0.75")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-intermediate-result")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" ###### In computer science, ACID is a set of properties of database transactions intended to guarantee data validity despite errors, power failures, and other mishaps. These properties are: A for __________, C for __________, I for __________, and D for __________.\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("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atomicity, Atomic\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Meaning: either all occurs or nothing occurs\"")]),_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("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Consistency, Consistent\"")]),_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("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Isolation, Isolated\"")]),_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("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Durability, Durable\"")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"blanks","threshold":"0.75","no-intermediate-result":""},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("What properties would you want these database transactions to have?")])]},proxy:true}])},[_v(" "),_c('h6',{attrs:{"id":"in-computer-science-acid-is-a-set-of-properties-of-database-transactions-intended-to-guarantee-data-validity-despite-errors-power-failures-and-other-mishaps-these-properties-are-a-for-c-for-i-for-and-d-for"}},[_v("In computer science, ACID is a set of properties of database transactions intended to guarantee data validity despite errors, power failures, and other mishaps. These properties are: A for __________, C for __________, I for __________, and D for __________."),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#in-computer-science-acid-is-a-set-of-properties-of-database-transactions-intended-to-guarantee-data-validity-despite-errors-power-failures-and-other-mishaps-these-properties-are-a-for-c-for-i-for-and-d-for","onclick":"event.stopPropagation()"}})]),_v(" "),_c('q-option',{attrs:{"keywords":"Atomicity, Atomic"},scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Meaning: either all occurs or nothing occurs")])]},proxy:true}])}),_v(" "),_c('q-option',{attrs:{"keywords":"Consistency, Consistent"}}),_v(" "),_c('q-option',{attrs:{"keywords":"Isolation, Isolated"}}),_v(" "),_c('q-option',{attrs:{"keywords":"Durability, Durable"}})],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Fill-in-the-Blanks 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("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("no-intermediate-result")]),_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("Hides the result of each blank after an incorrect attempt.")])])])])]),_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("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("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"}},[_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('popover',{scopedSlots:_u([{key:"header",fn:function(){return [_v("When does validation work?")]},proxy:true},{key:"content",fn:function(){return [_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")])]},proxy:true}])},[_v("cases\n")]),_v("\nand not others.")],1)]),_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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('h4',{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":"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("\"blanks\"")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('h6',{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":"blanks"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Google it!")])]},proxy:true}])},[_v(" "),_c('h6',{attrs:{"id":"german-sociologist-called-the-process-of-simultaneously-analyzing-the-behavior-of-individuals-and-the-society-that-shapes-that-behavior-2"}},[_v("German sociologist __________ called the process of simultaneously analyzing the behavior of individuals and the society that shapes that behavior __________."),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#german-sociologist-called-the-process-of-simultaneously-analyzing-the-behavior-of-individuals-and-the-society-that-shapes-that-behavior-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('q-option',{attrs:{"keywords":"Norbert Elias, Elias"},scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("That's his name!")])]},proxy:true}])}),_v(" "),_c('q-option',{attrs:{"keywords":"figuration"}})],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('div',{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:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])]),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Fill-in-the-Blanks questions")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Fill-in-the-Blanks 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("\"blanks\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hint")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Google it!\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" ###### German sociologist __________ called the process of simultaneously analyzing the behavior of individuals and the society that shapes that behavior __________.\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("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Norbert Elias, Elias\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"That's his name!\"")]),_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("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"figuration\"")]),_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")]),_c('span',[_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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("\"blanks\"")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_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('h6',{attrs:{"id":"which-of-the-following-is-true-3"}},[_v("Which of the following is true?"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#which-of-the-following-is-true-3","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":"blanks"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Google it!")])]},proxy:true}])},[_v(" "),_c('h6',{attrs:{"id":"german-sociologist-called-the-process-of-simultaneously-analyzing-the-behavior-of-individuals-and-the-society-that-shapes-that-behavior-3"}},[_v("German sociologist __________ called the process of simultaneously analyzing the behavior of individuals and the society that shapes that behavior __________."),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#german-sociologist-called-the-process-of-simultaneously-analyzing-the-behavior-of-individuals-and-the-society-that-shapes-that-behavior-3","onclick":"event.stopPropagation()"}})]),_v(" "),_c('q-option',{attrs:{"keywords":"Norbert Elias, Elias"},scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("That's his name!")])]},proxy:true}])}),_v(" "),_c('q-option',{attrs:{"keywords":"figuration"}})],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('panel',{attrs:{"type":"seamless","no-close":"","popup-url":"/userGuide/components/navigation.html#scroll-to-top-button","panelId":"scroll-to-top-button"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{attrs:{"id":"scroll-to-top-button"}},[_c('strong',[_v("Scroll To Top Button")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#scroll-to-top-button","onclick":"event.stopPropagation()"}})])]),_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("scroll-top-button")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-arrow-circle-up:\"")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon-size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"2x\"")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bottom")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"2%\"")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("right")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"2%\"")])]),_v("\n")]),_c('span',[_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("scroll-top-button")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"scroll-to-top-button-2"}},[_v("Scroll To Top Button"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#scroll-to-top-button-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{attrs:{"id":"content"}},[_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("scroll-top-button")]),_v(" component allows users to move to the top of the page.")]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Adding a scroll-top-button")])])]),_v(" "),_c('p',[_v("Add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<scroll-top-button></scroll-top-button>")]),_v(" to layout file.")]),_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("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(":fas-arrow-circle-up:")])]),_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("lg")])]),_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("bottom")]),_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("2%")])]),_v(" "),_c('td',[_v("Distance from bottom edge of page.")])]),_v(" "),_c('tr',[_c('td',[_v("right")]),_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("2%")])]),_v(" "),_c('td',[_v("Distance from right edge of page.")])])])])])]),_v(" "),_c('div',{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("scroll-top-button")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-arrow-circle-up:\"")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon-size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"2x\"")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bottom")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"2%\"")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("right")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"2%\"")])]),_v("\n")]),_c('span',[_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("scroll-top-button")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("You can see an example of a scroll to top button on the "),_c('mark',[_v("on the bottom right side")]),_v(" of this page.")])])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless","no-close":"","popup-url":"/userGuide/components/navigation.html#search-bars","panelId":"search-bars"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{attrs:{"id":"search-bars"}},[_c('strong',[_v("Search Bars")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#search-bars","onclick":"event.stopPropagation()"}})])]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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('div',{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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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(".")])])],1),_v(" "),_c('div',{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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback}})],1)])])]),_v(" "),_c('panel',{attrs:{"type":"seamless","no-close":"","popup-url":"/userGuide/components/navigation.html#site-navigation-menus","panelId":"site-navigation-menus"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{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()"}})])]),_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("site-nav")]),_v(">")]),_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',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("site-nav")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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',[_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("<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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.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('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("a menu item with sub menu-items")]},proxy:true}])},[_v("parent menu item")]),_v(" to make it expand by default.")],1),_v(" In the example above, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("* Authoring Contents :expanded:")]),_v(" makes the menu item "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Authoring Contents")]),_v(" expand by default.")])]),_v(" "),_c('div',{attrs:{"id":"examples"}}),_v(" "),_c('div',{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("site-nav")]),_v(">")]),_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',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("site-nav")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless","no-close":"","popup-url":"/userGuide/formattingContents.html#tables","panelId":"tables"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{attrs:{"id":"tables"}},[_c('strong',[_v("Tables")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tables","onclick":"event.stopPropagation()"}})])]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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:"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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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('panel',{attrs:{"type":"seamless","no-close":"","popup-url":"/userGuide/components/presentation.html#tabs","panelId":"tabs"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{attrs:{"id":"tabs"}},[_c('strong',[_v("Tabs")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tabs","onclick":"event.stopPropagation()"}})])]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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":"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(" Text in 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("markdown")]),_v(">")]),_v("_some markdown_"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("markdown")]),_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("\"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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 Text in the first tab\n "),_c('div',[_c('p',[_c('em',[_v("some markdown")])])])]),_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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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","no-close":"","popup-url":"/userGuide/tweakingThePageStructure.html#plugin-tags","panelId":"tags"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{attrs:{"id":"tags"}},[_c('strong',[_v("Tags")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tags","onclick":"event.stopPropagation()"}})])]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('div',[_c('h3',{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"}},[_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Attaching tags to elements:")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Attaching multiple tags to an element:")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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 frontmatter.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Specifying tags in frontmatter:")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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 frontmatter, and are processed after frontmatter 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"}},[_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Using general tags:")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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"}},[_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Using general tags:")]),_v(" "),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_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:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('div',{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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])]),_v(" "),_c('div',{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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless","no-close":"","popup-url":"/userGuide/formattingContents.html#text-styles","panelId":"text-styles"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{attrs:{"id":"text-styles"}},[_c('strong',[_v("Text Styles")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#text-styles","onclick":"event.stopPropagation()"}})])]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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('div',{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":"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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"hljs markdown"}},[_c('span',[_v("~~Strike through~~\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('s',[_v("Strike through")])])])],1)]),_v(" "),_c('p',[_v("Syntax added by MarkBind:")]),_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":"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--,\n")]),_c('span',[_v("Super^script^, Sub~script~,\n")]),_c('span',[_v("->Center-align<-\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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',[_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(",\nSuper"),_c('sup',[_v("script")]),_v(", Sub"),_c('sub',[_v("script")]),_v(",\n")]),_c('div',{staticClass:"text-center"},[_v("Center-align")]),_c('p')])],1)])]),_v(" "),_c('p',[_v("Additional font colouring syntax:")]),_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":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("#r#Coloured Text##")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('span',{staticClass:"mkb-text-red"},[_v("Coloured Text")])])])],1)]),_v(" "),_c('p',[_v("Full list of colours:")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Letter")]),_v(" "),_c('th',[_v("Colour")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("r")]),_v(" "),_c('td',[_v("red")])]),_v(" "),_c('tr',[_c('td',[_v("g")]),_v(" "),_c('td',[_v("green")])]),_v(" "),_c('tr',[_c('td',[_v("b")]),_v(" "),_c('td',[_v("blue")])]),_v(" "),_c('tr',[_c('td',[_v("c")]),_v(" "),_c('td',[_v("cyan")])]),_v(" "),_c('tr',[_c('td',[_v("m")]),_v(" "),_c('td',[_v("magenta")])]),_v(" "),_c('tr',[_c('td',[_v("y")]),_v(" "),_c('td',[_v("yellow")])]),_v(" "),_c('tr',[_c('td',[_v("k")]),_v(" "),_c('td',[_v("black")])]),_v(" "),_c('tr',[_c('td',[_v("w")]),_v(" "),_c('td',[_v("white")])])])])]),_c('box',{attrs:{"type":"tip","seamless":""}},[_c('p',[_v("To escape the syntax, simply put a backslash in front of it (e.g. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\\#b#")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\\##")]),_v(").")])])],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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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")])])])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless","no-close":"","popup-url":"/userGuide/components/imagesAndDiagrams.html#thumbnails","panelId":"thumbnails"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{attrs:{"id":"thumbnails"}},[_c('strong',[_v("Thumbnails")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#thumbnails","onclick":"event.stopPropagation()"}})])]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{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","no-close":"","popup-url":"/userGuide/components/popups.html#tooltips","panelId":"tooltips"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{attrs:{"id":"tooltips"}},[_c('strong',[_v("Tooltips")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tooltips","onclick":"event.stopPropagation()"}})])]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{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":"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("Tooltip 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("Tooltip 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("Tooltip 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("Tooltip 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("\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',[_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("\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',[_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("\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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('tooltip',{attrs:{"placement":"top"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Tooltip on top")])]),_v(" "),_c('tooltip',{attrs:{"placement":"left"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Tooltip on left")])]),_v(" "),_c('tooltip',{attrs:{"placement":"right"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Tooltip on right")])]),_v(" "),_c('tooltip',{attrs:{"placement":"bottom"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Tooltip on bottom")])]),_v(" "),_c('hr'),_v(" "),_c('p',[_v("Trigger")]),_v(" "),_c('p',[_c('tooltip',{attrs:{"placement":"top","trigger":"click"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true}])},[_v(" "),_c('button',{staticClass:"btn btn-secondary"},[_v("Click")])])],1),_v(" "),_c('p',[_c('tooltip',{attrs:{"placement":"top","trigger":"focus"},scopedSlots:_u([{key:"content",fn:function(){return [_v("Lorem ipsum dolor sit amet")]},proxy:true}])},[_v(" "),_c('input',{attrs:{"placeholder":"Focus"}})])],1),_v(" "),_c('hr'),_v(" "),_c('p',[_c('strong',[_v("Markdown")]),_v(":\n"),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_c('em',[_v("Hello")]),_v(" "),_c('strong',[_v("World")])]},proxy:true}])},[_v(" "),_c('a',{attrs:{"href":""}},[_v("Hover me")])]),_v(" "),_c('br')],1),_v(" "),_c('p',[_c('strong',[_v("Free Text")]),_v(":\n"),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_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.")]},proxy:true}])},[_c('i',[_v("coupling")])])],1)],1)],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":"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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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":"tt:trigger_id"}},[_v("trigger")]),_v(".\n"),_c('tooltip',{attrs:{"id":"tt:trigger_id"},scopedSlots:_u([{key:"content",fn:function(){return [_v("This tooltip triggered by a trigger")]},proxy:true}])}),_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 focus")]),_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 focus")])]),_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(", or any space-separated combination of these.")])]),_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 focus")])]),_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(", or any space-separated combination of these.")])]),_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('div',{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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("Hover "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("An explanation, "),_c('strong',[_v("supports simple Markdown")])]},proxy:true}])},[_v("here")]),_v(" to see a tooltip.")],1)])],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless","no-close":"","popup-url":"/userGuide/components/imagesAndDiagrams.html#tree","panelId":"tree"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{attrs:{"id":"tree"}},[_c('strong',[_v("Tree")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tree","onclick":"event.stopPropagation()"}})])]),_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("tree")]),_v(">")]),_v("\n")]),_c('span',[_v("C:/course/\n")]),_c('span',[_v(" textbook/\n")]),_c('span',[_v(" index.md\n")]),_c('span',[_v(" index.md\n")]),_c('span',[_v(" reading.md\n")]),_c('span',[_v(" site.json\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tree")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"tree-2"}},[_v("Tree"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tree-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("A "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tree")]),_v(" component allows you to generate tree-like visualisations, suitable for displaying folder structure.")])]),_v(" "),_c('p',[_v("Use indentation (2 spaces) to indicate the level of nesting.")]),_v(" "),_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("tree")]),_v(">")]),_v("\n")]),_c('span',[_v("C:/course/\n")]),_c('span',[_v(" textbook/\n")]),_c('span',[_v(" index.md\n")]),_c('span',[_v(" index.md\n")]),_c('span',[_v(" reading.md\n")]),_c('span',[_v(" site.json\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tree")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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:"tree"},[_v("C:/course/\nβ”œβ”€β”€ textbook/\nβ”‚ └── index.md\nβ”œβ”€β”€ index.md\nβ”œβ”€β”€ reading.md\n└── site.json\n")])])],1)]),_v(" "),_c('p',[_v("Markdown unordered lists are also 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":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tree")]),_v(">")]),_v("\n")]),_c('span',[_v("C:/course/\n")]),_c('span',[_v(" - textbook/\n")]),_c('span',[_v(" - index.md\n")]),_c('span',[_v("C:/course/\n")]),_c('span',[_v(" * textbook/\n")]),_c('span',[_v(" * index.md\n")]),_c('span',[_v("C:/course/\n")]),_c('span',[_v(" + textbook/\n")]),_c('span',[_v(" + index.md\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tree")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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:"tree"},[_v("C:/course/\nβ”œβ”€β”€ textbook/\n└── index.md\nC:/course/\nβ”œβ”€β”€ textbook/\n└── index.md\nC:/course/\nβ”œβ”€β”€ textbook/\n└── index.md\n")])])],1)]),_v(" "),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("Besides file system structures, you can use this for any lightweight tree-like structure.")]),_v(" "),_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("tree")]),_v(">")]),_v("\n")]),_c('span',[_v("Enjoy MarkBind?\n")]),_c('span',[_v(" You may want to:\n")]),_c('span',[_v(" Like :heart:\n")]),_c('span',[_v(" Share :speech_balloon:\n")]),_c('span',[_v(" Contribute :pencil:\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tree")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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:"tree"},[_v("Enjoy MarkBind?\n└── You may want to:\n β”œβ”€β”€ Like ❀️\n β”œβ”€β”€ Share πŸ’¬\n └── Contribute πŸ“\n")])])],1)])]),_v(" "),_c('p',[_v("You can use Tree in combination with inline Markdown or inline HTML elements.")]),_v(" "),_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("tree")]),_v(">")]),_v("\n")]),_c('span',[_v("Formatting is supported!\n")]),_c('span',[_v(" textbook/\n")]),_c('span',[_v(" `index.md`\n")]),_c('span',[_v(" **index.md**\n")]),_c('span',[_v(" ~~index.md~~\n")]),_c('span',[_v(" %%dimmed%%\n")]),_c('span',[_v(" Super^script^\n")]),_c('span',[_v(" ****Super Bold****\n")]),_c('span',[_v(" !!Underline!!\n")]),_c('span',[_v(" !!Underline with {text=danger}!!{.text-danger}\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("\"text-danger\"")]),_v(">")]),_v("RED"),_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(" __reading.md__\n")]),_c('span',[_v(" ++site.json++\n")]),_c('span',[_v(" ==hello==\n")]),_c('span',[_v(" :construction:\n")]),_c('span',[_v(" :fas-file-code:\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("tree")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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:"tree"},[_v("Formatting is supported!\nβ”œβ”€β”€ textbook/\nβ”‚ └── "),_c('code',{staticClass:"hljs inline no-lang"},[_v("index.md")]),_v("\nβ”œβ”€β”€ "),_c('strong',[_v("index.md")]),_v("\nβ”‚ β”œβ”€β”€ "),_c('s',[_v("index.md")]),_v("\nβ”‚ β”œβ”€β”€ "),_c('span',{staticClass:"dimmed"},[_v("dimmed")]),_v("\nβ”‚ β”œβ”€β”€ Super"),_c('sup',[_v("script")]),_v("\nβ”‚ β”œβ”€β”€ "),_c('strong',[_c('strong',[_v("Super Bold")])]),_v("\nβ”‚ β”œβ”€β”€ "),_c('span',{staticClass:"underline"},[_v("Underline")]),_v("\nβ”‚ β”œβ”€β”€ "),_c('span',{staticClass:"underline text-danger"},[_v("Underline with {text=danger}")]),_v("\nβ”‚ └── "),_c('span',{staticClass:"text-danger"},[_v("RED")]),_v("\nβ”œβ”€β”€ "),_c('strong',[_v("reading.md")]),_v("\nβ”œβ”€β”€ "),_c('span',{staticClass:"large"},[_v("site.json")]),_v("\nβ”œβ”€β”€ "),_c('mark',[_v("hello")]),_v("\nβ”œβ”€β”€ 🚧\nβ”œβ”€β”€ "),_c('span',{staticClass:"fas fa-file-code",attrs:{"aria-hidden":"true"}}),_v("\n└── πŸ˜ƒ\n")])])],1)]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Currently, Pop-Ups(tooltip/trigger) are "),_c('span',{staticClass:"underline"},[_v("not")]),_v(" supported within a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tree")]),_v(" component.")])]),_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":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")]),_v(" to find more information about text styles and other supported inline syntax.")])])]),_v(" "),_c('div',{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("tree")]),_v(">")]),_v("\n")]),_c('span',[_v("C:/course/\n")]),_c('span',[_v(" textbook/\n")]),_c('span',[_v(" index.md\n")]),_c('span',[_v(" index.md\n")]),_c('span',[_v(" reading.md\n")]),_c('span',[_v(" site.json\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tree")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('div',{staticClass:"tree"},[_v("C:/course/\nβ”œβ”€β”€ textbook/\nβ”‚ └── index.md\nβ”œβ”€β”€ index.md\nβ”œβ”€β”€ reading.md\n└── site.json\n")])])],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless","no-close":"","popup-url":"/userGuide/reusingContents.html#variables","panelId":"variables"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('div',[_c('h5',{attrs:{"id":"variables"}},[_c('strong',[_v("Variables")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#variables","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("Place global variables in "),_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("`_markbind/variables.md`")]),_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("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":"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',[_v("The year was {{ year }}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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#variables"}},[_c('em',[_v("User Guide β†’ Reusing Contents β†’ Variables")])])])]),_v(" "),_c('h2',{attrs:{"id":"variables-2"}},[_v("Variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#variables-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{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.")])]),_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"}},[_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-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(":")]),_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("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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-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.")])]),_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"}},[_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])]),_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: Fri, 29 Mar 2024, 3:54:16 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 5.4.0")])])])])])]),_c('h3',{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('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("similar to how you assign filepaths for other Nunjucks tags")]},proxy:true}])},[_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.")],1),_v(" "),_c('tabs',[_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Importing from JSON files")]},proxy:true}])},[_v(" "),_c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_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('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\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('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("Place global variables in "),_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("`_markbind/variables.md`")]),_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("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":"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',[_v("The year was {{ year }}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn d-print-none",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])],1)])]),_c('hr',{staticClass:"footnotes-sep"}),_v(" "),_c('section',{staticClass:"footnotes"},[_c('ol',{staticClass:"footnotes-list"},[_c('popover',{attrs:{"id":"pop:footnotefn-75-1"},scopedSlots:_u([{key:"content",fn:function(){return [_c('div',[_c('p',[_v("Here is the footnote. Footnotes will appear at the bottom of the page.")])])]},proxy:true}])}),_c('popover',{attrs:{"id":"pop:footnotefn-75-2"},scopedSlots:_u([{key:"content",fn:function(){return [_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.")])])]},proxy:true}])}),_c('popover',{attrs:{"id":"pop:footnotefn-75-3"},scopedSlots:_u([{key:"content",fn:function(){return [_c('div',[_c('p',[_v("Inline notes are easier to write, since\nyou don't have to pick an identifier and move down to type the\nnote.")])])]},proxy:true}])}),_v(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_c('popover',{attrs:{"id":"pop:footnotefn-74-1"},scopedSlots:_u([{key:"content",fn:function(){return [_c('div',[_c('p',[_v("Math")])])]},proxy:true}])}),_v(" "),_m(4)],1)])],1),_v(" "),_c('overlay-source',{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":"#syntax-reference"}},[_v("Syntax Referenceβ€Ž")]),_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":"#annotations"}},[_v("Annotationsβ€Ž")]),_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":"#badges"}},[_v("Badgesβ€Ž")]),_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":"#boxes"}},[_v("Boxesβ€Ž")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#breadcrumbs"}},[_v("Breadcrumbsβ€Ž")]),_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":"#dates"}},[_v("Datesβ€Ž")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#diagrams"}},[_v("Diagramsβ€Ž")]),_v(" "),_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":"#embeds"}},[_v("Embedsβ€Ž")]),_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":"#footnotes"}},[_v("Footnotesβ€Ž")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#frontmatter"}},[_v("Frontmatterβ€Ž")]),_v(" "),_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":"#horizontal-rules"}},[_v("Horizontal Rulesβ€Ž")]),_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":"#images"}},[_v("Imagesβ€Ž")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#includes"}},[_v("Includesβ€Ž")]),_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":"#line-breaks"}},[_v("Line Breaksβ€Ž")]),_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":"#lists"}},[_v("Listsβ€Ž")]),_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":"#modals"}},[_v("Modalsβ€Ž")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#nav-bars"}},[_v("Nav Barsβ€Ž")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#page-navigation-menus"}},[_v("Page Navigation Menusβ€Ž")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#panels"}},[_v("Panelsβ€Ž")]),_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":"#pictures"}},[_v("Picturesβ€Ž")]),_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":"#questions-and-quizzes"}},[_v("Questions and Quizzesβ€Ž")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#scroll-to-top-button"}},[_v("Scroll To Top Buttonβ€Ž")]),_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":"#site-navigation-menus"}},[_v("Site Navigation Menusβ€Ž")]),_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":"#tabs"}},[_v("Tabsβ€Ž")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#tags"}},[_v("Tagsβ€Ž")]),_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":"#thumbnails"}},[_v("Thumbnailsβ€Ž")]),_v(" "),_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":"#tree"}},[_v("Treeβ€Ž")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#variables"}},[_v("Variablesβ€Ž")])])])],1)]),_v(" "),_c('scroll-top-button')],1),_v(" "),_m(5)])} +}; + var pageVueStaticRenderFns = [function anonymous( +) { +with(this){return _c('h1',{attrs:{"id":"syntax-reference"}},[_v("Syntax Reference"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#syntax-reference","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('li',{staticClass:"footnote-item",attrs:{"id":"fn-75-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-75-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-75-3"}},[_c('p',[_v("Inline 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-74-1"}},[_c('p',[_v("Math")])])} +},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 5.4.0")]),_v(" on Fri, 29 Mar 2024, 3:54:16 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 index d67f52b..1c628f1 100644 --- a/userGuide/templates.html +++ b/userGuide/templates.html @@ -3,7 +3,7 @@ <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="generator" content="MarkBind 5.3.0"> + <meta name="generator" content="MarkBind 5.4.0"> <meta name="viewport" content="width=device-width, initial-scale=1"><title>MarkBind - User Guide: Templates @@ -15,9 +15,9 @@ const baseUrl = '' -

                                  Templates

                                  User Guide β†’ 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. Includes core features such as site and page navigation for a more convenient quick start.
                                  Minimal minimal Minimalistic template that gets you started quickly.

                                  Adding Navigation Buttons


                                  +

                                  Supported Templates

                                  Name Template key Description Quick Deploy
                                  Default default Default template if --template is unspecified. Includes core features such as site and page navigation for a more convenient quick start.
                                  Minimal minimal Minimalistic template that gets you started quickly.

                                  Adding Navigation Buttons


                                  @@ -15,9 +15,9 @@ const baseUrl = '' -

                                  Themes

                                  User Guide β†’ Themes

                                  Applying 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
                                  bootswatch-zephyr

                                  Making the Site Searchable

                                  Deploying the Site


                                  +

                                  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
                                  bootswatch-zephyr

                                  Making the Site Searchable

                                  Deploying the Site


                                  @@ -15,9 +15,9 @@ const baseUrl = '' -

                                  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 }}

                                  By default, MarkBind processes any code in the form of {{ content }}. This is because Nunjucks (which is supported by MarkBind) uses this syntax to evaluate an expression, variable, or function calls. For instance:

                                  {{ username }}
-

                                  OUTPUT:

                                  * item 1

                                  • item 1

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

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

                                  By default, MarkBind processes any code in the form of {{ content }}. This is because Nunjucks (which is supported by MarkBind) uses this syntax to evaluate an expression, variable, or function calls. For instance:

                                  {{ username }}
+

                                  This will not display {{ username }} as a raw string, but instead, look up the variable username from the context and display its value.

                                  In general, to use this syntax as a raw string in a code block or a template, there are two methods available. The syntax can either be encased as a variable like {{ '{{' }} and {{ '}}' }}, or alternatively, the entire code block can be encased with the raw-endraw tags: {% raw %} {{ content }} {% endraw %}.

                                  If using raw-endraw tags outside <code> elements, markdown code fences, or inline code, you also need to add the v-pre attribute.

                                  For HTML elements, the v-pre attribute needs to be declared as part of the HTML tag:

                                  {% raw %}
-
-<div v-pre>
-  <p>{{ content }}</p>
-</div>
-
-{% endraw %}
-

                                  This will not display {{ username }} as a raw string, but instead, look up the variable username from the context and display its value.

                                  In general, to use this syntax as a raw string in a code block or a template, there are two methods available. The syntax can either be encased as a variable like {{ '{{' }} and {{ '}}' }}, or alternatively, the entire code block can be encased with the raw-endraw tags: {% raw %} {{ content }} {% endraw %}.

                                  If using raw-endraw tags outside <code> elements, markdown code fences, or inline code, you also need to add the v-pre attribute.

                                  For HTML elements, the v-pre attribute needs to be declared as part of the HTML tag:

                                  {% raw %}
+
+<div v-pre>
+  <p>{{ content }}</p>
+</div>
+
+{% endraw %}
+

                                  For Markdown elements, the v-pre attribute needs to be declared using markdown-it-attrs, which allows classes, identifiers, and attributed to be added to Markdown syntax:

                                  {% raw %}
-
-# Header with {{ content }} {v-pre}
-
-{% endraw %}
-

                                  For Markdown elements, the v-pre attribute needs to be declared using markdown-it-attrs, which allows classes, identifiers, and attributed to be added to Markdown syntax:

                                  {% raw %}
+
+# Header with {{ content }} {v-pre}
+
+{% endraw %}
+

                                  Otherwise, any HTML or Markdown content containing double curly braces will be processed as a variable and will not be displayed properly.

                                  Note: This step isn't necessary for <code> elements, markdown code fences and inline code because MarkBind automatically adds v-pre for them.

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

                                  • Code:

                                    The
+

                                  Otherwise, any HTML or Markdown content containing double curly braces will be processed as a variable and will not be displayed properly.

                                  Note: This step isn't necessary for <code> elements, markdown code fences and inline code because MarkBind automatically adds v-pre for them.

                                  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)].
-

                                  • 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 modify 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
-

                                  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">
+

                                  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="ms-3">
@@ -250,7 +250,7 @@
 <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>
+

                                  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="ms-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)
                                  +

                                  OUTPUT:

                                  Some text at level 1 (before included content)
                                  Some text from include
                                  Some text at level 1 (after included content)
                                  @@ -15,9 +15,9 @@ const baseUrl = '' -

                                  Troubleshooting

                                  Troubleshooting

                                  HTML Rendering Issues

                                  Unexpected behavior can occur in rendered pages due to a number of different reasons. One of these reasons is when the rendered pages are not valid HTML.

                                  Incorrect HTML markup can be due to:

                                  • nesting block-level elements inside <p> or <span> elements
                                  • missing <tbody> tags
                                  Example: block-level elements inside <span> elements
                                  
 <span id="example">
@@ -36,7 +36,7 @@
 Bees   |     no     |    20 |
 Cats   |    yes     |   100 |
 </span>
-

                                  The table specified by the Markdown syntax above will be rendered as a block-level element, which will be included in a inline span element. This makes the HTML output invalid.

                                  Underlying Error (Example)

                                  A possible fix for the above situation is to wrap the table in a <div> element instead:

                                  
+

                                  The table specified by the Markdown syntax above will be rendered as a block-level element, which will be included in a inline span element. This makes the HTML output invalid.

                                  Underlying Error (Example)

                                  A possible fix for the above situation is to wrap the table in a <div> element instead:

                                  
 <div id="example">
 
 Animal | Trainable? | Price | Remarks
@@ -61,7 +61,7 @@
 Bees   |     no     |    20 |
 Cats   |    yes     |   100 |
 </div>
-

                                  OUTPUT:

                                  Example1

                                  Example2

                                  Example3

                                  Example: Markdown not rendered without singposting
                                  +

                                  OUTPUT:

                                  Example1

                                  Example2

                                  Example3

                                  Example: Markdown not rendered without singposting
                                  @@ -15,9 +15,9 @@ const baseUrl = '' -

                                  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.

                                  Frontmatter

                                  You can use a frontmatter section to specify page properties such as the title and keywords of the page. To specify frontmatter for a page, insert a <frontmatter> tag in the following format at the beginning of the page.
                                  @@ -33,7 +33,7 @@ property1: value1 property2: value2 </frontmatter> -

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

                                  Frontmatter YAML-style Frontmatter Syntax
                                  <frontmatter>
   title: Binary Search Tree
 </frontmatter>
-
                                  		 
                                  ---
   title: Binary Search Tree
 ---
-

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

                                  If a page has multiple frontmatters, it will take the last frontmatter by default. You may make use of omitFrontmatter, which is an attribute of MarkBind's <include> feature to omit the frontmatters that are not needed.

                                  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.

                                  Page properties that are defined in site.json for a particular page will override those defined in the frontmatter of the page. For example, if we declare a title within the frontmatter of the page (say index.md) like such:

                                  <frontmatter>
-  title: Hello World
-</frontmatter>
-

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

                                  If a page has multiple frontmatters, it will take the last frontmatter by default. You may make use of omitFrontmatter, which is an attribute of MarkBind's <include> feature to omit the frontmatters that are not needed.

                                  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.

                                  Page properties that are defined in site.json for a particular page will override those defined in the frontmatter of the page. For example, if we declare a title within the frontmatter of the page (say index.md) like such:

                                  <frontmatter>
+  title: Hello World
+</frontmatter>
+

                                  But the title property in the corresponding site.json is set as such:

                                  {
-  "pages": [
-    {
-      "src": "index.md",
-      "title": "Landing Page",
-    }
-  ],
-}
-

                                  But the title property in the corresponding site.json is set as such:

                                  {
+  "pages": [
+    {
+      "src": "index.md",
+      "title": "Landing Page",
+    }
+  ],
+}
+

                                  Then, the title of index.md will be set as "Landing Page" instead of "Hello World".

                                  In this manner, setting the property title in site.json will always override the title declared within the frontmatter of the page.

                                  <frontmatter>
+

                                  Then, the title of index.md will be set as "Landing Page" instead of "Hello World".

                                  In this manner, setting the property title in site.json will always override the title declared within the frontmatter 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>
+

                                  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>
@@ -240,7 +240,7 @@
     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.

                                  Sticking the header to the top

                                  A sticky header can be implemented by simply adding the sticky attribute to a <header> element.

                                  Using this attribute as opposed to setting position: sticky manually in your stylesheets comes with several conveniences:

                                  • When scrolled to, page anchors will line up below the sticky header, and not hidden behind it.
                                  • To preserve screen real estate, the header is hidden on devices with a width of less than 767px when the user scrolls down, and automatically re-shown when the page is scrolled up.
                                  Offsetting elements with the header height

                                  MarkBind also exposes the css variable --sticky-header-height which contains the height of your header.

                                  It's primary intended use case is to offset secondary layout elements (e.g. your site navigation menu) so that they are not hidden behind the sticky header, as the reader scrolls down your page's main contents.

                                  Example Here's how it is used in the default layout's site and page navigation menus

                                  #site-nav,
+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.
                                   
                                   
                                   
                                  Sticking the header to the top
                                   
                                  A sticky header can be implemented by simply adding the sticky attribute to a <header> element.
                                   
                                  Using this attribute as opposed to setting position: sticky manually in your stylesheets comes with several conveniences:
                                   
                                  • When scrolled to, page anchors will line up below the sticky header, and not hidden behind it.
                                    •  
                                  • To preserve screen real estate, the header is hidden on devices with a width of less than 767px when the user scrolls down, and automatically re-shown when the page is scrolled up.
                                   
                                  Offsetting elements with the header height
                                   
                                  MarkBind also exposes the css variable --sticky-header-height which contains the height of your header.
                                   
                                  It's primary intended use case is to offset secondary layout elements (e.g. your site navigation menu) so that they are not hidden behind the sticky header, as the reader scrolls down your page's main contents.
                                   
                                  Example Here's how it is used in the default layout's site and page navigation menus
                                   
                                  #site-nav,
 #page-nav {
     position: sticky;
     /*
@@ -273,7 +273,7 @@
     max-height: calc(100vh - var(--sticky-header-height));
     ...
 }
-
                                   
                                  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.  
                                  2. Include it under a <site-nav> element.
                                    3.  
                                  3. (Optional) To make siteNav accessible on smaller screens, you can use the <site-nav-button /> component in the navbar.
                                   
                                  CODE:
                                   
                                  <site-nav>
+

                                  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)
@@ -298,7 +298,7 @@
   * [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 to make it expand by default. In the example above, * Authoring Contents :expanded: makes the menu item Authoring Contents expand by default.

                                  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 or a .

                                    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.

                                  5. (Optional) To make pageNav available on print, you can position the page navigation menu on individual pages with the <page-nav-print /> component.

                                  Additional details on printing pageNav

                                  You can specify the location of the page navigation menu on print by using either of the following syntaxes:

                                  • <page-nav-print />
                                  • <page-nav-print></page-nav-print>
                                    • This is useful if you want to include a custom title (or any other content) before the page navigation menu. For example, <page-nav-print>Table of Contents</page-nav-print>

                                  You can specify multiple <page-nav-print /> components in a page and they do not have to be at the top of the page. They also do not appear when viewed on a browser.

                                  Example -In the page that you want to have page navigation printed (i.e. to serve as a table of content when viewed on PDFs), use the <page-nav-print /> component to position the pageNav like so:

                                  <frontmatter>
-  pageNav: 2
-  pageNavTitle: "Chapters of This Page"
-</frontmatter>
-
-<page-nav-print />
-
-# Overview
-Content of the page...
-

                                  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 to make it expand by default. In the example above, * Authoring Contents :expanded: makes the menu item Authoring Contents expand by default.

                                  Constructing a page navigation menu


                                  A Page Navigation Menu (pageNav for short) displays a list of the current page's headings. Page navigation menus are typically configured in layouts, but can also be utilized in individual pages.

                                  Adding a pageNav

                                  1. Specify the smallest heading level you want to be included within the <frontmatter> of a page with or a .

                                    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.

                                  5. (Optional) To make pageNav available on print, you can position the page navigation menu on individual pages with the <page-nav-print /> component.

                                  Additional details on printing pageNav

                                  You can specify the location of the page navigation menu on print by using either of the following syntaxes:

                                  • <page-nav-print />
                                  • <page-nav-print></page-nav-print>
                                    • This is useful if you want to include a custom title (or any other content) before the page navigation menu. For example, <page-nav-print>Table of Contents</page-nav-print>

                                  You can specify multiple <page-nav-print /> components in a page and they do not have to be at the top of the page. They also do not appear when viewed on a browser.

                                  Example +In the page that you want to have page navigation printed (i.e. to serve as a table of content when viewed on PDFs), use the <page-nav-print /> component to position the pageNav like so:

                                  <frontmatter>
+  pageNav: 2
+  pageNavTitle: "Chapters of This Page"
+</frontmatter>
+
+<page-nav-print />
+
+# Overview
+Content of the page...
+

                                  To view the pageNav on print, open the print preview of the page using the browser's print function.

                                  If you are using Chrome, you can right-click on the page and select "Print" to open the print preview. -You can try it out by going to our CLI Commands page and printing it.

                                  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'
+

                                  To view the pageNav on print, open the print preview of the page using the browser's print function.

                                  If you are using Chrome, you can right-click on the page and select "Print" to open the print preview. +You can try it out by going to our CLI Commands page and printing it.

                                  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>
-

                                  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>
-
                                  <p tags="language--java advanced">System.out.println("Hello world");</p>
 <p tags="language--C# basic">Console.WriteLine("Hello world");</p>
-

                                  Using HTML, JavaScript, CSS

                                  Reusing Contents


                                  +

                                  Using HTML, JavaScript, CSS

                                  Reusing Contents


                                  @@ -15,9 +15,9 @@ const baseUrl = '' -

                                  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


                                  +

                                  Formatting Contents

                                  Presentational Components


                                  @@ -15,9 +15,9 @@ const baseUrl = '' -

                                  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.

                                  Markdown in HTML

                                  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:

                                  <div>
 Without preceding blank line: Apples **Bananas** Cherries
@@ -35,7 +35,7 @@
 
 With preceding blank line: Apples **Bananas** Cherries
 </div>
-

                                  OUTPUT:

                                  +

                                  OUTPUT:

                                  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:

                                  <div>
+

                                  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:

                                  <div>
 <md>Apples **Bananas** Cherries</md>
 </div>
 
 <div>
 <markdown>##### Apples **Bananas** Cherries</markdown>
 </div>
-

                                  OUTPUT:

                                  Apples Bananas Cherries
                                  Apples Bananas Cherries

                                  JavaScript libraries

                                  External JavaScript libraries can be included in MarkBind to add a wide range of features and functionalities. One such use case is to add a charting library for data visualization.

                                  Charts

                                  Popular chart libraries such as Chart.js and Apache ECharts can be used in MarkBind to create beautiful charts, similar to how they are used in any HTML web page. The details of how to use these libraries are beyond the scope of this section, but you can find more information on their websites. In general, you will perform these 3 steps:

                                  1. Import the library via a CDN or locally.
                                  2. Specify a target HTML element to render the chart.
                                  3. Initialize the chart with the data and options.

                                  As mentioned in the above section, you should not leave any blank lines within HTML elements to prevent MarkBind from parsing the contents as Markdown instead of code/text.

                                  Example Here is an example of how to use Chart.js to create a pie chart.

                                  CODE:

                                  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
+

                                  OUTPUT:

                                  Apples Bananas Cherries
                                  Apples Bananas Cherries

                                  JavaScript libraries

                                  External JavaScript libraries can be included in MarkBind to add a wide range of features and functionalities. One such use case is to add a charting library for data visualization.

                                  Charts

                                  Popular chart libraries such as Chart.js and Apache ECharts can be used in MarkBind to create beautiful charts, similar to how they are used in any HTML web page. The details of how to use these libraries are beyond the scope of this section, but you can find more information on their websites. In general, you will perform these 3 steps:

                                  1. Import the library via a CDN or locally.
                                  2. Specify a target HTML element to render the chart.
                                  3. Initialize the chart with the data and options.

                                  As mentioned in the above section, you should not leave any blank lines within HTML elements to prevent MarkBind from parsing the contents as Markdown instead of code/text.

                                  Example Here is an example of how to use Chart.js to create a pie chart.

                                  CODE:

                                  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
 <div style="width:400px;height:400px;">
   <canvas id="myChart"></canvas>
 </div>
@@ -100,7 +100,7 @@
     }
 });
 </script>
-

                                  OUTPUT:

                                  Example Here is an example of how to use Apache ECharts to create a bar chart.

                                  CODE:

                                  <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.js"></script>
+

                                  OUTPUT:

                                  Example Here is an example of how to use Apache ECharts to create a bar chart.

                                  CODE:

                                  <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.js"></script>
 <div id="echart" style="width:400px;height:400px;"></div>
 <script type="text/javascript">
   // Initialize the echarts instance based on the prepared DOM
@@ -142,7 +142,7 @@
   // Display the chart using the configuration items and data just specified.
   eChart.setOption(option);
 </script>
-

                                  OUTPUT:

                                  Advanced Component Usage

                                  Tweaking the Page Structure


                                  +

                                  OUTPUT:

                                  Advanced Component Usage

                                  Tweaking the Page Structure


                                  @@ -15,9 +15,9 @@ const baseUrl = '' -

                                  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:

                                  {
+

                                  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",
@@ -42,7 +42,7 @@
     }
   }
 }
-

                                  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 div element the id algolia-search-input to connect it to Algolia DocSearch.

                                  <div id="algolia-search-input"></div>
-

                                  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
                                  {
+

                                  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
                                  {
+

                                  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'
+

                                  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>
-

                                  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>
-
                                  <p tags="language--java advanced">System.out.println("Hello world");</p>
 <p tags="language--C# basic">Console.WriteLine("Hello world");</p>
-

                                  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
                                  {
+

                                  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"
@@ -452,7 +452,7 @@
     }
   }
 }
-

                                  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.

                                  Plugin: MathDelimiters

                                  This plugin allows you to use additional delimiters for your math formulae. Available delimiters are listed in the markdown-it-texmath package.

                                  These delimiters are supported without guarantee that they will be rendered correctly, especially when they happen to conflict with -other MarkBind syntax.

                                  Note that the default delimiters still function as expected, this plugin simply adds the additional delimiters.

                                  To enable this plugin, add mathDelimiters to your site's plugins and specify the delimters in the context.

                                  site.json
                                  {
+

                                  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.

                                  Plugin: MathDelimiters

                                  This plugin allows you to use additional delimiters for your math formulae. Available delimiters are listed in the markdown-it-texmath package.

                                  These delimiters are supported without guarantee that they will be rendered correctly, especially when they happen to conflict with +other MarkBind syntax.

                                  Note that the default delimiters still function as expected, this plugin simply adds the additional delimiters.

                                  To enable this plugin, add mathDelimiters to your site's plugins and specify the delimters in the context.

                                  site.json
                                  {
   ...
   "plugins": [
     "mathDelimiters"
@@ -480,7 +480,7 @@
     }
   },
 }
-

                                  OUTPUT:

                                  a2+b2=c2\begin{equation} +

                                  OUTPUT:

                                  a2+b2=c2\begin{equation} a^2+b^2=c^2 -\end{equation}
                                  (ABBC)\begin{equation} +\end{equation}
                                  (ABBC)\begin{equation} \begin{pmatrix} A & B \\ B & C \end{pmatrix} -\end{equation}

                                  Plugin: Web3Forms

                                  This plugin allows you to create forms whose response will be sent directly to your email, using the Web3Forms API.

                                  +\end{equation}

                                  Plugin: Web3Forms

                                  This plugin allows you to create forms whose response will be sent directly to your email, using the Web3Forms API.

                                  Don't forget to check your spam/junk folder if your form responses aren't appearing in your inbox! -
                                  +
                                  The free plan from Web3Forms allows up to 250 submissions per month.

                                  To set it up, get an access key from Web3Forms. Then add web3Form to your site's plugin, and add the accessKey parameter via the pluginsContext.

                                  Name Type Default Description
                                  accessKey String accessKey is required. It is provided by Web3Forms.
                                  site.json
                                  {
   ...
@@ -542,7 +542,7 @@
     }
   }
 }
-
                                  +
                                  The access key is exposed to public. This is generally ok since the access key is an alias to your email and is equivalent to revealing your email to public. -

                                  However it is possible that malicious users might use the access key in other forms. +

                                  However it is possible that malicious users might use the access key in other forms. This might subject the email linked to the access key to spam with irrelevant form submissions.

                                  To add a form to your site, use a <web-3-form> tag.

                                  CODE:

                                  <web-3-form header="Contact Us">
     <label for="name">Name</label>
     <input type="text" name="name" required placeholder="John Doe">
     <button type="submit">Submit</button>
 </web-3-form>
-

                                  OUTPUT:

                                  Web3Forms plugin also supports a default 'Contact Us' form.

                                  The header will be <p class="h2">Contact Us</p> for the default form if no header is specified. +

                                  OUTPUT:

                                  Web3Forms plugin also supports a default 'Contact Us' form.

                                  The header will be <p class="h2">Contact Us</p> for the default form if no header is specified. This uses Bootstrap to style the header.

                                  CODE:

                                  <web-3-form default />
-

                                  OUTPUT:

                                  CODE:

                                  <web-3-form default header="**New header**"/>
-

                                  OUTPUT:

                                  CODE:

                                  <web-3-form default header="**New header**"/>
+

                                  OUTPUT:

                                  Web3Forms plugin supports common inputs.

                                  The inputs supported are

                                  • name-input
                                  • email-input
                                  • message-input
                                  • submit-button

                                  CODE:

                                  <web-3-form header="**Form with name input**">
+

                                  OUTPUT:

                                  Web3Forms plugin supports common inputs.

                                  The inputs supported are

                                  • name-input
                                  • email-input
                                  • message-input
                                  • submit-button

                                  CODE:

                                  <web-3-form header="**Form with name input**">
 <name-input></name-input>
 </web-3-form>
 
@@ -633,7 +633,7 @@
 <web-3-form header="**Form with submit button**">
 <submit-button></submit-button>
 </web-3-form>
-

                                  OUTPUT:

                                  Web3Forms plugin supports customised header and styles

                                  Options from the box component are supported here.

                                  CODE:

                                  <web-3-form default type="warning" header="Here's a form :rocket:" color="red" dismissible>
+

                                  OUTPUT:

                                  Web3Forms plugin supports customised header and styles

                                  Options from the box component are supported here.

                                  CODE:

                                  <web-3-form default type="warning" header="Here's a form :rocket:" color="red" dismissible>
 </web-3-form>
-

                                  OUTPUT:

                                  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


                                  +

                                  OUTPUT:

                                  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


                                  @@ -15,9 +15,9 @@ const baseUrl = '' -
                                  +

                                  More info in: User Guide β†’ Templates

                                  Reusing Contents

                                  Setting Site Properties